{"id":17413,"date":"2023-12-05T10:14:01","date_gmt":"2023-12-05T10:14:01","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=17413"},"modified":"2023-12-13T10:13:16","modified_gmt":"2023-12-13T10:13:16","slug":"add-twitter-card-meta-data-wordpress","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/add-twitter-card-meta-data-wordpress\/","title":{"rendered":"How to Add Twitter Card Meta Data in WordPress (Without Plugin)"},"content":{"rendered":"\n<p>In the digital world, capturing and maintaining your audience&#8217;s attention is crucial, and Twitter Cards can be a game-changer in this regard. This blog post will walk you through the process of adding Twitter Card metadata to your WordPress website, a seemingly complex task made easy.<\/p>\n\n\n\n<p>These metadata tags allow you to attach rich media to your Tweets, which link back to your content, thereby boosting engagement and website traffic. Ready to elevate your Twitter game? Follow along as we delve into the how-to details.<\/p>\n\n\n\n<p>Also Read, <a href=\"https:\/\/kwebby.com\/blog\/meta-tags-seo\/\">What Are Meta Tags? Is it Important for SEO? Let\u2019s Find Out!<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why I Hate WordPress Plugins?<\/h2>\n\n\n\n<p>Before we dive into the steps, let&#8217;s discuss why I hate using WordPress plugins for tasks like this. While there are certain plugins available for adding Twitter Card metadata to your website, they often come with their own set of issues.<\/p>\n\n\n\n<p>Some may not be compatible with your current theme or other plugins, causing conflicts and errors on your site. Others may slow down your site&#8217;s loading time, affecting user experience and search engine rankings.<\/p>\n\n\n\n<p>So, instead of relying on a plugin, let&#8217;s explore the manual method of adding Twitter Card metadata to your WordPress site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Twitter Card Metadata to Your WordPress Website<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/O5f7CSfxKVI?si=oNxE4ytz4-hqEpvS\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>The process of manually adding Twitter Card metadata to your WordPress website is simpler than you might think\u2014no coding expertise is required!<\/p>\n\n\n\n<p>This method allows you to bypass potential plugin issues, offering more control over your site&#8217;s performance and functionality.<\/p>\n\n\n\n<p>So, let&#8217;s roll up our sleeves and get into the nitty-gritty of manually enhancing your Twitter presence!<\/p>\n\n\n\n<p>First, copy the following code;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Get the post\/page title\nif (is_singular()) {\n    $og_title = get_the_title();\n} else {\n    $og_title = get_bloginfo('name');\n}\n\n\/\/ Get the post\/page description\nif (is_singular()) {\n    $og_description = get_the_excerpt();\n} else {\n    $og_description = get_bloginfo('description');\n}\n\n\/\/ Get the featured image URL\nif (is_singular() &amp;&amp; has_post_thumbnail()) {\n    $og_image = get_the_post_thumbnail_url(null, 'large');\n} else {\n    $og_image = 'URL_to_Your_Default_Image'; \/\/ Replace with your default image URL\n}\n\n\/\/ Get the current URL\n$og_url = get_permalink();\n\n\/\/ Output the OG meta tags\n?&gt;\n&lt;meta name=\"twitter:card\" content=\"summary_large_image\" \/&gt;\n&lt;meta name=\"twitter:title\" content=\"&lt;?php echo esc_attr($og_title); ?&gt;\" \/&gt;\n&lt;meta name=\"twitter:description\" content=\"&lt;?php echo esc_attr($og_description); ?&gt;\" \/&gt;\n&lt;meta name=\"twitter:creator\" content=\"Your-Twitter-Handle\" \/&gt;\n&lt;meta name=\"twitter:image\" content=\"&lt;?php echo esc_url($og_image); ?&gt;\" \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>In the above code, replace &#8220;your-twitter-handle&#8221; with your X or Twitter handle.<\/strong><\/p>\n\n\n\n<p>Now, go to your WordPress dashboard, Mouse over to <strong>Appearance<\/strong>, and click on <strong>Theme file editor<\/strong>;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"506\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-9.png\" alt=\"\" class=\"wp-image-17414\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-9.png 804w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-9-300x189.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-9-768x483.png 768w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/figure>\n\n\n\n<p>Make sure you have selected your current theme;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"534\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-10.png\" alt=\"\" class=\"wp-image-17416\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-10.png 776w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-10-300x206.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-10-768x528.png 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure>\n\n\n\n<p>Now, Navigate to <strong>header.php<\/strong> file from the right as below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-11.png\" alt=\"\" class=\"wp-image-17417\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-11.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-11-300x188.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-11-768x480.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, paste the above code in between <strong>&lt;head&gt;<\/strong> tags or below <strong>&lt;meta<\/strong>&gt; tags;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"555\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-12.png\" alt=\"\" class=\"wp-image-17418\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-12.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-12-300x163.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/image-12-768x416.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, click on Update file to save the code and check your <strong>blog post&#8217;s page source<\/strong> to see if all the details are correct or not;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"269\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/TWITTER-CARDS-META-DATA-1024x269.png\" alt=\"\" class=\"wp-image-17419\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/TWITTER-CARDS-META-DATA-1024x269.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/TWITTER-CARDS-META-DATA-300x79.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/TWITTER-CARDS-META-DATA-768x201.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/TWITTER-CARDS-META-DATA-1536x403.png 1536w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/TWITTER-CARDS-META-DATA-2048x537.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, try sharing your URL to Twitter and see if it works or not, you will be able to see a beautiful box like below;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/twitter-cards-preview-1024x595.png\" alt=\"\" class=\"wp-image-17420\" title=\"\" srcset=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/twitter-cards-preview-1024x595.png 1024w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/twitter-cards-preview-300x174.png 300w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/twitter-cards-preview-768x446.png 768w, https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2023\/12\/twitter-cards-preview.png 1159w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That&#8217;s all folks!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Social Media Meta Tags <\/h2>\n\n\n\n<p>Social media meta tags for websites consist of two types i.e. <a href=\"https:\/\/ogp.me\/\" data-type=\"link\" data-id=\"https:\/\/ogp.me\/\" target=\"_blank\">Open Graph (OG) Tag<\/a> which is a universal meta tag for social media like Linked, Facebook but X (formerly Twitter) uses <a href=\"https:\/\/developer.twitter.com\/en\/docs\/twitter-for-websites\/cards\/guides\/getting-started\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/developer.twitter.com\/en\/docs\/twitter-for-websites\/cards\/guides\/getting-started\" rel=\"noreferrer noopener\">Twitter cards meta tags<\/a>, therefore to combine both, you need to replace the above code with the following;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Get the post\/page title\nif (is_singular()) {\n    $og_title = get_the_title();\n} else {\n    $og_title = get_bloginfo('name');\n}\n\n\/\/ Get the post\/page description\nif (is_singular()) {\n    $og_description = get_the_excerpt();\n} else {\n    $og_description = get_bloginfo('description');\n}\n\n\/\/ Get the featured image URL\nif (is_singular() &amp;&amp; has_post_thumbnail()) {\n    $og_image = get_the_post_thumbnail_url(null, 'large');\n} else {\n    $og_image = 'URL_to_Your_Default_Image'; \/\/ Replace with your default image URL\n}\n\n\/\/ Get the current URL\n$og_url = get_permalink();\n\n\/\/ Output the OG meta tags\n?&gt;\n&lt;meta property=\"og:title\" content=\"&lt;?php echo esc_attr($og_title); ?&gt;\"&gt;\n&lt;meta property=\"og:description\" content=\"&lt;?php echo esc_attr($og_description); ?&gt;\"&gt;\n&lt;meta property=\"og:image\" content=\"&lt;?php echo esc_url($og_image); ?&gt;\"&gt;\n&lt;meta property=\"og:url\" content=\"&lt;?php echo esc_url($og_url); ?&gt;\"&gt;\n&lt;meta property=\"og:type\" content=\"article\"&gt;\n&lt;meta property=\"og:site_name\" content=\"your_site_name\" \/&gt;\n&lt;meta name=\"twitter:card\" content=\"summary_large_image\" \/&gt;\n&lt;meta name=\"twitter:title\" content=\"&lt;?php echo esc_attr($og_title); ?&gt;\" \/&gt;\n&lt;meta name=\"twitter:description\" content=\"&lt;?php echo esc_attr($og_description); ?&gt;\" \/&gt;\n&lt;meta name=\"twitter:creator\" content=\"Your-Twitter-Handle\" \/&gt;\n&lt;meta name=\"twitter:image\" content=\"&lt;?php echo esc_url($og_image); ?&gt;\" \/&gt;<\/code><\/pre>\n\n\n\n<p>Now, in the above code, do replace two things;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>your_site_name<\/strong> &#8211; With your site name, for example, Kwebby Digital<\/li>\n\n\n\n<li><strong>Your-Twitter-Handle<\/strong> &#8211; with your X Handle (formerly twitter), for example, @kwebbydigital<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">More Resources<\/h2>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/og-tags-wordpress-without-plugin\/\">How to add OG (Open Graph) tags in WordPress Without Plugin (Easy Way)<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/optimize-meta-title-and-meta-description\/\">How to Optimize Meta Title and Meta Description for SEO in WordPress in 2023<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/most-important-meta-tags-seo\/\">9 Most Important Meta Tags You Need to Know for SEO<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/kwebby.com\/blog\/social-media-meta-tags\/\">Ultimate Guide to Generate Social Media Meta Tags for Your Website<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>By manually adding Twitter Card metadata to your WordPress website, you can ensure a smooth and efficient process without relying on potentially problematic plugins.<\/p>\n\n\n\n<p>Not only does this offer more control over your site&#8217;s performance, but it also elevates your Twitter presence and boosts engagement.<\/p>\n\n\n\n<p>So why not give it a try and take your digital game to the next level? Don&#8217;t wait any longer, start adding Twitter Card metadata to your WordPress website today! Happy tweeting!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the digital world, capturing and maintaining your audience&#8217;s attention is crucial, and Twitter Cards can be a game-changer in this regard. This blog post&hellip;<\/p>\n","protected":false},"author":1,"featured_media":17422,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,404],"tags":[],"class_list":["post-17413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-tutorials","category-wordpress-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/17413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/comments?post=17413"}],"version-history":[{"count":3,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/17413\/revisions"}],"predecessor-version":[{"id":17614,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/17413\/revisions\/17614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/17422"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=17413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=17413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=17413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}