{"id":22146,"date":"2018-07-12T12:15:32","date_gmt":"2018-07-12T09:15:32","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=22146"},"modified":"2018-07-12T12:22:03","modified_gmt":"2018-07-12T09:22:03","slug":"wordpress-diy-adding-twitter-cards-meta","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/","title":{"rendered":"WordPress DIY: Adding Twitter Cards Meta to your blog"},"content":{"rendered":"<p>Just like my <a href=\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-adding-google-analytics-script\/\">last article<\/a>, we won\u2019t be focusing on using a third party plugin, but write our own plugin. I\u2019m a minimalist and don\u2019t prefer to use layer-2 solutions for really trivial things that can easily be achieved by writing code.<\/p>\n<p>Now, though trivial to implement, the twitter cards support is a very important and useful thing for your blog. To understand why, consider the following example tweet from Python Software Foundation:<\/p>\n<figure id=\"attachment_22151\" aria-describedby=\"caption-attachment-22151\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-22151 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/no_twitter_card-768x432.png\" alt=\"twitter cards meta\" width=\"768\" height=\"432\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/no_twitter_card-768x432.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/no_twitter_card-768x432-300x169.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><figcaption id=\"caption-attachment-22151\" class=\"wp-caption-text\">Links had no Twitter Card Meta<\/figcaption><\/figure>\n<p>As you can see, the posted links on this tweet from the domain djangoproject.com didn\u2019t expand into a preview because they didn\u2019t have twitter card meta tags in their pages. Unlike Facebook who expands all posted links, Twitter doesn\u2019t do that automatically, but only after parsing some meta tags which should be in their required format. Only after that, the tweets expand into a full preview like this:<\/p>\n<figure id=\"attachment_22152\" aria-describedby=\"caption-attachment-22152\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/twitter_card-768x418.png\"><img decoding=\"async\" class=\"wp-image-22152 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/twitter_card-768x418.png\" alt=\"twitter cards meta\" width=\"768\" height=\"418\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/twitter_card-768x418.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/twitter_card-768x418-300x163.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><figcaption id=\"caption-attachment-22152\" class=\"wp-caption-text\">Link had Twitter Card Meta<\/figcaption><\/figure>\n<p>So as the owner of a WordPress blog, you\u2019d be certainly interested in having the tweets containing links to your own site expand into these previews, right? So, let\u2019s go about doing it.<\/p>\n<p>Essentially, your web page should contain the following meta tags that twitter parses in order to come up with a preview:<\/p>\n<pre class=\"brush:php; wrap-lines:false\"> &lt;meta name=\"twitter:card\" content=\"summary\" \/&gt;\r\n &lt;meta name=\"twitter:site\" content=\"@prahladyeri\" \/&gt;\r\n &lt;meta name=\"twitter:creator\" value=\"@prahladyeri\" \/&gt;\r\n &lt;meta name=\"twitter:url\" content=\"https:\/\/prahladyeri.com\/blog\/2018\/06\/people-migrating-from-github-to-gitlab-should-learn-about-these-details-first.html\" \/&gt;\r\n &lt;meta name=\"twitter:title\" content=\"People migrating from Github to Gitlab should learn about these details first\" \/&gt;\r\n &lt;meta name=\"twitter:description\" content=\"After &lt;a href=\"https:\/\/www.prahladyeri.com\/blog\/2018\/06\/microsofts-github-acquisition-an-unbiased-perspective.html\"&gt;Microsoft's recent acquisition of Github&lt;\/a&gt;, a mass exodus has kind of begun and many small and large projects are moving their code bases to the much hyped &lt;a href=\"https:\/\/gitlab.com\/\"&gt;Gitlab&lt;\/a&gt; in a hurry, and these include both open and closed source projects. However, before migrating to Gitlab, they should take a pause and learn something about Gitlab and consider evaluating other alternatives too.\" \/&gt;\r\n &lt;meta name=\"twitter:image\" content=\"https:\/\/secure.gravatar.com\/avatar\/3f253507b82dd33f352c08f649caaa54?rating=PG&amp;size=75\" \/&gt;<\/pre>\n<p>All these meta tags have different meanings. For example, <strong>twitter:url<\/strong> is for the canonical URL of your page, <strong>twitter:title<\/strong> is for the title that should be displayed in the preview, etc.<\/p>\n<p>Now, let\u2019s add a simple PHP plugin file that automatically adds these tags in all the pages of our WordPress blog. Firstly, create a text file called <strong>\u201c\/wp-content\/plugins\/custom_headers.php\u201d<\/strong> in your WordPress installation folder (no need to create if you had done already by following the last article).<\/p>\n<p>After that, just add the below function and call it using <strong>add_action()<\/strong>:<\/p>\n<pre class=\"brush:php; wrap-lines:false\">function add_twitter_card_header() {\r\n\t#twitter cards hack\r\n\tglobal $post;\r\n\tif(is_single() || is_page()) {\r\n\t\t$twitter_url    = get_permalink();\r\n\t\t$twitter_title  = get_the_title();\r\n\t\t$content = get_extended( $post-&gt;post_content );\r\n\t\t$attch_id = get_post_thumbnail_id($post-&gt;ID);\r\n\t\t$twitter_thumbs = wp_get_attachment_image_src($attch_id, full);\r\n\t\t$twitter_thumb  = $twitter_thumbs[0];\r\n\t\tif(!$twitter_thumb) {\r\n\t\t\t$twitter_thumb = 'https:\/\/secure.gravatar.com\/avatar\/3f253507b82dd33f352c08f649caaa54?rating=PG&amp;size=75';\r\n\t\t}\r\n\t\t?&gt;\r\n\t\t&lt;meta name=\"twitter:card\" content=\"summary\" \/&gt;\r\n\t\t&lt;meta name=\"twitter:site\" content=\"@prahladyeri\" \/&gt;\r\n\t\t&lt;meta name=\"twitter:creator\" value=\"@prahladyeri\" \/&gt;\r\n\t\t&lt;meta name=\"twitter:url\" content=\"&lt;?php echo $twitter_url; ?&gt;\" \/&gt;\r\n\t\t&lt;meta name=\"twitter:title\" content=\"&lt;?php echo $twitter_title; ?&gt;\" \/&gt;\r\n\t\t&lt;meta name=\"twitter:description\" content=\"&lt;?php echo esc_html($content['main']); ?&gt;\" \/&gt;\r\n\t\t&lt;meta name=\"twitter:image\" content=\"&lt;?php echo $twitter_thumb; ?&gt;\" \/&gt;\r\n\t\t&lt;?php\r\n\t}\r\n}\r\n\r\nadd_action('wp_head', 'add_twitter_card_header');<\/pre>\n<p>This simple block of code will pick up all required things such as the post\u2019s title content excerpt, etc. and supply them to twitter via the meta tags. Few important things you need to remember:<\/p>\n<p>1. Firstly, update the $twitter_thumb variable in the following block with your own gravatar:<\/p>\n<pre class=\"brush:php; wrap-lines:false\">if(!$twitter_thumb) { $twitter_thumb = 'https:\/\/secure.gravatar.com\/avatar\/3f253507b82dd33f352c08f649caaa54?rating=PG&amp;size=75'; }<\/pre>\n<p>This will show the gravatar by default if you haven\u2019t set a featured image in your post.<\/p>\n<p>2. You\u2019ll need to add the <strong>\u201cRead More\u201d<\/strong> meta tag in all your posts, otherwise <strong>$content[\u2018main\u2019]<\/strong> will return the whole thing instead of just the excerpt.<\/p>\n<p>Once you do this and publish your post, head over to the <a href=\"https:\/\/cards-dev.twitter.com\/validator\">Twitter Cards Validator Service<\/a> and test your link. Its as easy as that!<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Prahlad Yeri, partner at our <a href=\"\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"https:\/\/prahladyeri.com\/blog\/2018\/07\/wordpress-diy-adding-twitter-cards-meta-to-your-blog.html\" target=\"_blank\" rel=\"noopener\">WordPress DIY: Adding Twitter Cards Meta to your blog<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Just like my last article, we won\u2019t be focusing on using a third party plugin, but write our own plugin. I\u2019m a minimalist and don\u2019t prefer to use layer-2 solutions for really trivial things that can easily be achieved by writing code. Now, though trivial to implement, the twitter cards support is a very important &hellip;<\/p>\n","protected":false},"author":20,"featured_media":932,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-22146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress DIY: Adding Twitter Cards Meta to your blog - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about twitter cards meta? Check our article on how to create a simple custom plugin for your WordPress blog that you\u2019ll hand-code!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress DIY: Adding Twitter Cards Meta to your blog - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about twitter cards meta? Check our article on how to create a simple custom plugin for your WordPress blog that you\u2019ll hand-code!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prahlad1981\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-12T09:15:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-12T09:22:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Prahlad Yeri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/prahladyeri\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prahlad Yeri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\"},\"author\":{\"name\":\"Prahlad Yeri\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd\"},\"headline\":\"WordPress DIY: Adding Twitter Cards Meta to your blog\",\"datePublished\":\"2018-07-12T09:15:32+00:00\",\"dateModified\":\"2018-07-12T09:22:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\"},\"wordCount\":495,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\",\"name\":\"WordPress DIY: Adding Twitter Cards Meta to your blog - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg\",\"datePublished\":\"2018-07-12T09:15:32+00:00\",\"dateModified\":\"2018-07-12T09:22:03+00:00\",\"description\":\"Interested to learn more about twitter cards meta? Check our article on how to create a simple custom plugin for your WordPress blog that you\u2019ll hand-code!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WordPress DIY: Adding Twitter Cards Meta to your blog\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd\",\"name\":\"Prahlad Yeri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g\",\"caption\":\"Prahlad Yeri\"},\"description\":\"Prahlad is a freelance software developer working on web and mobile application development. He also likes to blog about programming and contribute to opensource.\",\"sameAs\":[\"http:\/\/www.prahladyeri.com\/\",\"https:\/\/www.facebook.com\/prahlad1981\",\"http:\/\/in.linkedin.com\/pub\/prahlad-yeri\/16\/a53\/243\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/prahladyeri\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/prahlad-yeri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress DIY: Adding Twitter Cards Meta to your blog - Web Code Geeks - 2026","description":"Interested to learn more about twitter cards meta? Check our article on how to create a simple custom plugin for your WordPress blog that you\u2019ll hand-code!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/","og_locale":"en_US","og_type":"article","og_title":"WordPress DIY: Adding Twitter Cards Meta to your blog - Web Code Geeks - 2026","og_description":"Interested to learn more about twitter cards meta? Check our article on how to create a simple custom plugin for your WordPress blog that you\u2019ll hand-code!","og_url":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/prahlad1981","article_published_time":"2018-07-12T09:15:32+00:00","article_modified_time":"2018-07-12T09:22:03+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg","type":"image\/jpeg"}],"author":"Prahlad Yeri","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/prahladyeri","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Prahlad Yeri","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/"},"author":{"name":"Prahlad Yeri","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd"},"headline":"WordPress DIY: Adding Twitter Cards Meta to your blog","datePublished":"2018-07-12T09:15:32+00:00","dateModified":"2018-07-12T09:22:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/"},"wordCount":495,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/","url":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/","name":"WordPress DIY: Adding Twitter Cards Meta to your blog - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg","datePublished":"2018-07-12T09:15:32+00:00","dateModified":"2018-07-12T09:22:03+00:00","description":"Interested to learn more about twitter cards meta? Check our article on how to create a simple custom plugin for your WordPress blog that you\u2019ll hand-code!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/wordpress-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/wordpress\/wordpress-diy-adding-twitter-cards-meta\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"WordPress","item":"https:\/\/www.webcodegeeks.com\/category\/wordpress\/"},{"@type":"ListItem","position":3,"name":"WordPress DIY: Adding Twitter Cards Meta to your blog"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd","name":"Prahlad Yeri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g","caption":"Prahlad Yeri"},"description":"Prahlad is a freelance software developer working on web and mobile application development. He also likes to blog about programming and contribute to opensource.","sameAs":["http:\/\/www.prahladyeri.com\/","https:\/\/www.facebook.com\/prahlad1981","http:\/\/in.linkedin.com\/pub\/prahlad-yeri\/16\/a53\/243\/","https:\/\/x.com\/https:\/\/twitter.com\/prahladyeri"],"url":"https:\/\/www.webcodegeeks.com\/author\/prahlad-yeri\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=22146"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/932"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=22146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=22146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=22146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}