{"id":11598,"date":"2022-03-02T08:21:51","date_gmt":"2022-03-02T08:21:51","guid":{"rendered":"https:\/\/kwebby.com\/blog\/?p=11598"},"modified":"2026-10-06T08:01:16","modified_gmt":"2026-10-06T08:01:16","slug":"social-media-meta-tags","status":"publish","type":"post","link":"https:\/\/kwebby.com\/blog\/social-media-meta-tags\/","title":{"rendered":"How to Add Social Media Meta Tags to Your Website"},"content":{"rendered":"<p>Social media meta tags tell sharing platforms which title, description, image and URL to use when someone shares your page. Add Open Graph tags and X Card tags to the page\u2019s <code>&lt;head&gt;<\/code>, or enter the same details in your WordPress SEO plugin.<\/p>\n<p>If your link shows an old image or the wrong headline, I\u2019d check those tags before changing the post itself. The problem can also be a cached preview, an inaccessible image or two plugins publishing conflicting metadata.<\/p>\n<p>I\u2019ll walk you through the tags, a complete HTML example, the WordPress setup and the checks that help you find what\u2019s actually wrong.<\/p>\n<h2 id=\"key-takeaways\">Key takeaways<\/h2>\n<ul>\n<li>Use <code>og:title<\/code>, <code>og:type<\/code>, <code>og:image<\/code> and <code>og:url<\/code> as your Open Graph foundation. Add a useful description and image alt text.<\/li>\n<li>X still uses the <code>twitter:<\/code> prefix. Set <code>twitter:card<\/code> explicitly and use separate X fields when you want different text or artwork.<\/li>\n<li>A 1200 \u00d7 630 pixel JPEG or PNG is a practical starting image. Check how each destination crops it.<\/li>\n<li>Publish one consistent set of tags per page. A generator creates code; it doesn\u2019t install that code on your website.<\/li>\n<li>Inspect the public page, then use the platform\u2019s own sharing tools. Fixing your website and refreshing a platform\u2019s cached preview are separate steps.<\/li>\n<\/ul>\n<p><span id=\"what-are-social-media-meta-tags\"><\/span><\/p>\n<h2 id=\"what-are-social-media-meta-tags-and-where-do-they-go\">What are social media meta tags, and where do they go?<\/h2>\n<p>Social metadata lives in the HTML behind your page. When a platform fetches a shared link, it can use that metadata to build a preview card.<\/p>\n<p>Open Graph uses names such as <code>og:title<\/code>. X Cards use names such as <code>twitter:card<\/code>. You put them inside <code>&lt;head&gt;<\/code>, alongside your page title and other metadata.<\/p>\n<p>These tags describe the page you\u2019re linking to. They don\u2019t add hashtags to a caption, change your Instagram bio font or create a social media post for you.<\/p>\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/social-meta-flow.webp\"><img decoding=\"async\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/social-meta-flow.webp\" width=\"1672\" height=\"941\" alt=\"Conceptual illustration showing page metadata being read by a crawler and turned into a social link preview\" loading=\"lazy\" style=\"max-width:100%;height:auto;\" title=\"\"><\/a><figcaption>AI-generated conceptual illustration of how a link preview is assembled. The card is illustrative, not a screenshot from a social platform.<\/figcaption><\/figure>\n<p>Your normal <code>&lt;title&gt;<\/code> and <code>meta name=\"description\"<\/code> still have their own jobs. Keep them accurate even when you write a different social headline. If you\u2019re working on those fields too, Kwebby\u2019s <a href=\"https:\/\/kwebby.com\/meta-tag-generator\">Meta Tag Generator<\/a> covers the general page metadata.<\/p>\n<p><span id=\"why-is-it-important-for-seo\"><\/span><\/p>\n<h2 id=\"how-social-meta-tags-help-sharing-and-what-they-mean-for-seo\">How social meta tags help sharing, and what they mean for SEO<\/h2>\n<p>A clear preview helps people decide whether your page is relevant before they open it. A missing picture, vague title or unrelated description can make that decision harder.<\/p>\n<p>I treat social metadata as presentation work. Adding tags doesn\u2019t establish that your rankings will improve, and there\u2019s no guaranteed traffic lift from a prettier card.<\/p>\n<p>There is a useful search nuance: Google lists <code>og:title<\/code> among the sources it may use to create a search result\u2019s title link. That\u2019s why I keep the social headline consistent with the page\u2019s actual subject. See <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/title-link\" target=\"_blank\">Google\u2019s title link guidance<\/a>.<\/p>\n<p>For measurement, compare social referral visits and the actions those visitors take. Track search performance separately so you don\u2019t mistake a social campaign\u2019s traffic for an organic ranking improvement.<\/p>\n<p><span id=\"open-graph-data-facebook\"><\/span><\/p>\n<h2 id=\"open-graph-tags-for-facebook-and-other-link-previews\">Open Graph tags for Facebook and other link previews<\/h2>\n<p>The <a href=\"https:\/\/ogp.me\/\" target=\"_blank\">Open Graph protocol<\/a> defines four required properties: <code>og:title<\/code>, <code>og:type<\/code>, <code>og:image<\/code> and <code>og:url<\/code>. A description is optional in the protocol, but it\u2019s a useful addition for a page you plan to share.<\/p>\n<p><span id=\"basic-meta-tags-for-facebook\"><\/span><\/p>\n<h3 id=\"the-basic-open-graph-tags-to-include\">The basic Open Graph tags to include<\/h3>\n<div style=\"overflow-x:auto;\">\n<table>\n<thead>\n<tr>\n<th scope=\"col\">Tag<\/th>\n<th scope=\"col\">What to put in it<\/th>\n<th scope=\"col\">What to check<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>og:title<\/code><\/td>\n<td>A specific headline for this page<\/td>\n<td>Does the opening phrase tell readers what they\u2019ll get?<\/td>\n<\/tr>\n<tr>\n<td><code>og:type<\/code><\/td>\n<td><code>article<\/code> for a blog post; <code>website<\/code> for a general page<\/td>\n<td>Use the appropriate defined type, not <code>blog<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><code>og:url<\/code><\/td>\n<td>The page\u2019s preferred canonical address<\/td>\n<td>Check HTTPS, hostname, path and trailing slash.<\/td>\n<\/tr>\n<tr>\n<td><code>og:image<\/code><\/td>\n<td>The full URL of a representative image<\/td>\n<td>It should open as an image without requiring a login.<\/td>\n<\/tr>\n<tr>\n<td><code>og:description<\/code><\/td>\n<td>A short summary of the page\u2019s value<\/td>\n<td>Explain the content without repeating the title.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Meta\u2019s <a href=\"https:\/\/developers.facebook.com\/documentation\/sharing\/webmasters\" target=\"_blank\">sharing documentation<\/a> shows <code>article<\/code> for a blog post and recommends a clean canonical URL without session or user-identifying parameters.<\/p>\n<p>For example, the social URL for this article is <code>https:\/\/kwebby.com\/blog\/social-media-meta-tags\/<\/code>. If you share a campaign link with tracking parameters, keep the page\u2019s underlying identity pointed at its preferred canonical address.<\/p>\n<p><span id=\"optional-meta-tags-for-facebook\"><\/span><\/p>\n<h3 id=\"useful-optional-tags-for-images-language-and-article-details\">Useful optional tags for images, language and article details<\/h3>\n<p>I\u2019d add image width, height and alt text before experimenting with more specialized metadata. Use the file\u2019s actual pixel dimensions and describe what the image shows.<\/p>\n<ul>\n<li><code>og:site_name<\/code>: your website or publication name<\/li>\n<li><code>og:locale<\/code>: the content\u2019s language and territory, such as <code>en_GB<\/code><\/li>\n<li><code>og:locale:alternate<\/code>: another available language version<\/li>\n<li><code>og:image:width<\/code> and <code>og:image:height<\/code>: the image dimensions<\/li>\n<li><code>og:image:alt<\/code>: a description of the image<\/li>\n<li><code>article:published_time<\/code> and <code>article:modified_time<\/code>: accurate original publication and update dates for an article<\/li>\n<\/ul>\n<p>Keep each image\u2019s extra properties directly after its <code>og:image<\/code> tag. The protocol permits multiple images, with the first given preference in a conflict. For a straightforward article, one intentional lead image is easier to maintain.<\/p>\n<p><code>og:video<\/code> and <code>og:audio<\/code> belong in a media-specific implementation. They don\u2019t guarantee an inline player. Likewise, add <code>fb:app_id<\/code> only when you have a relevant Meta app integration; don\u2019t paste a made-up app ID into a basic sharing template.<\/p>\n<p><span id=\"meta-tags-for-twitter\"><\/span><\/p>\n<h2 id=\"x-card-meta-tags-which-twitter-fields-should-you-use\">X Card meta tags: which twitter fields should you use?<\/h2>\n<p>The platform is called X, but the HTML names still use <code>twitter:<\/code>. Use the <code>name<\/code> attribute for these tags, as shown in the current <a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/generate-metadata#twitter\" target=\"_blank\">Next.js metadata reference<\/a>.<\/p>\n<div style=\"overflow-x:auto;\">\n<table>\n<thead>\n<tr>\n<th scope=\"col\">Tag<\/th>\n<th scope=\"col\">Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>twitter:card<\/code><\/td>\n<td>Selects a card style, commonly <code>summary<\/code> or <code>summary_large_image<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>twitter:title<\/code><\/td>\n<td>Provides the page headline for the card<\/td>\n<\/tr>\n<tr>\n<td><code>twitter:description<\/code><\/td>\n<td>Provides a short page summary<\/td>\n<\/tr>\n<tr>\n<td><code>twitter:image<\/code><\/td>\n<td>Points to the full image URL<\/td>\n<\/tr>\n<tr>\n<td><code>twitter:image:alt<\/code><\/td>\n<td>Describes the image<\/td>\n<\/tr>\n<tr>\n<td><code>twitter:site<\/code><\/td>\n<td>Identifies the site\u2019s X username, when applicable<\/td>\n<\/tr>\n<tr>\n<td><code>twitter:creator<\/code><\/td>\n<td>Identifies the content creator\u2019s X username, when applicable<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>For a normal article, I\u2019d start with <code>summary_large_image<\/code>. A player or app card has additional requirements, so changing that one value won\u2019t turn an ordinary page into a working video player or app promotion.<\/p>\n<p>Write a concise headline and put the distinguishing words first. Around 60 to 70 characters is a useful drafting target, and I\u2019d keep the summary under 200 characters. Treat those as writing targets here, not a promise that every character will appear in every X layout.<\/p>\n<p><code>twitter:creator<\/code> is a username such as <code>@yourauthor<\/code>, not an email address and not the identity of whoever happens to share the link. <a href=\"https:\/\/rankmath.com\/kb\/open-graph-meta-tags\/\" target=\"_blank\">Rank Math\u2019s social metadata documentation<\/a> explains the separate site and author fields.<\/p>\n<p><span id=\"final-output\"><\/span><\/p>\n<h2 id=\"a-complete-social-media-meta-tag-example-you-can-adapt\">A complete social media meta tag example you can adapt<\/h2>\n<p>This example is for a fictional article. Replace every <code>example.com<\/code> address, title, description, site name and image detail before you use it.<\/p>\n<p>Add it inside the page\u2019s existing <code>&lt;head&gt;<\/code>. If a CMS already outputs any of these fields, update that implementation instead of adding a second copy.<\/p>\n<pre style=\"overflow-x:auto;\"><code>&lt;!-- General page metadata --&gt;\n&lt;title&gt;How to Build a Balcony Herb Garden | Example Garden&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Choose herbs, plan containers and set up a small balcony garden.\"&gt;\n&lt;link rel=\"canonical\" href=\"https:\/\/example.com\/balcony-herb-garden\/\"&gt;\n\n&lt;!-- Open Graph --&gt;\n&lt;meta property=\"og:type\" content=\"article\"&gt;\n&lt;meta property=\"og:url\" content=\"https:\/\/example.com\/balcony-herb-garden\/\"&gt;\n&lt;meta property=\"og:title\" content=\"Build a Herb Garden on Your Balcony\"&gt;\n&lt;meta property=\"og:description\" content=\"A practical guide to choosing herbs, containers and a watering routine for a small balcony.\"&gt;\n&lt;meta property=\"og:site_name\" content=\"Example Garden\"&gt;\n&lt;meta property=\"og:locale\" content=\"en_GB\"&gt;\n&lt;meta property=\"og:image\" content=\"https:\/\/example.com\/images\/balcony-herbs.jpg\"&gt;\n&lt;meta property=\"og:image:type\" content=\"image\/jpeg\"&gt;\n&lt;meta property=\"og:image:width\" content=\"1200\"&gt;\n&lt;meta property=\"og:image:height\" content=\"630\"&gt;\n&lt;meta property=\"og:image:alt\" content=\"Basil, mint and parsley growing in pots on a sunny balcony\"&gt;\n\n&lt;!-- X Cards --&gt;\n&lt;meta name=\"twitter:card\" content=\"summary_large_image\"&gt;\n&lt;meta name=\"twitter:title\" content=\"Build a Herb Garden on Your Balcony\"&gt;\n&lt;meta name=\"twitter:description\" content=\"Choose herbs and containers, then set up a watering routine for your balcony garden.\"&gt;\n&lt;meta name=\"twitter:image\" content=\"https:\/\/example.com\/images\/balcony-herbs.jpg\"&gt;\n&lt;meta name=\"twitter:image:alt\" content=\"Basil, mint and parsley growing in pots on a sunny balcony\"&gt;<\/code><\/pre>\n<p>The example deliberately leaves out account handles. Add <code>twitter:site<\/code> or <code>twitter:creator<\/code> only with the correct account details.<\/p>\n<p>If you generate tags from a database, escape values for HTML attributes. A quotation mark inside a title should become <code>&amp;quot;<\/code>, and an ampersand should become <code>&amp;amp;<\/code>. Use your framework\u2019s escaping rather than concatenating raw user input into HTML.<\/p>\n<p><span id=\"open-graph-data-and-twitter\"><\/span><\/p>\n<h2 id=\"can-open-graph-and-x-cards-share-the-same-metadata\">Can Open Graph and X Cards share the same metadata?<\/h2>\n<p>Yes. You can use the same title, description and image for both. A shared set is often a sensible starting point when the audience and message are similar.<\/p>\n<p><a href=\"https:\/\/rankmath.com\/kb\/how-to-add-twitter-cards\/\" target=\"_blank\">Rank Math documents reusing Open Graph data for X<\/a>, but explicit X fields make your intended values easier to inspect. Keep <code>twitter:card<\/code> so you\u2019ve chosen a layout, then customize the X title or image when there\u2019s a reason to do so.<\/p>\n<p>Different names for the same piece of content are normal: <code>og:title<\/code> and <code>twitter:title<\/code> can coexist. Two conflicting <code>og:title<\/code> tags are the kind of duplication you should investigate.<\/p>\n<p><span id=\"choose-social-preview-image\"><\/span><\/p>\n<h2 id=\"choose-an-image-that-survives-cropping-and-loads-for-crawlers\">Choose an image that survives cropping and loads for crawlers<\/h2>\n<p>For a general share image, I\u2019d start with a 1200 \u00d7 630 pixel JPEG or PNG. Keep the subject and any essential text away from the edges, because the same artwork can appear in different card shapes.<\/p>\n<p><a href=\"https:\/\/developers.facebook.com\/documentation\/sharing\/webmasters\/images\" target=\"_blank\">Meta\u2019s image guidance<\/a> recommends at least 1200 \u00d7 630 for high-resolution displays and an aspect ratio close to 1.91:1. It lists 200 \u00d7 200 as the minimum allowed size and 8 MB as the maximum file size. Those minimum and maximum limits aren\u2019t good design targets.<\/p>\n<p>I\u2019d compress an ordinary share image to a few hundred kilobytes when the quality allows it. That\u2019s a practical performance goal, not a universal platform requirement. A huge upload gives a crawler more work without necessarily making a tiny preview clearer.<\/p>\n<p>Use a full HTTPS image URL. Check that it returns the image itself, rather than an attachment page, login screen, expired download link or blocked response. A page that opens for you while signed in may still fail for a social crawler.<\/p>\n<p>Supply real width and height values. Don\u2019t declare 1200 \u00d7 630 if the file is actually square, and don\u2019t expect a metadata field to resize an image.<\/p>\n<p><span id=\"tools-for-social-media-meta-tags\"><\/span><\/p>\n<h2 id=\"tools-to-generate-tags-inspect-them-and-preview-a-link\">Tools to generate tags, inspect them and preview a link<\/h2>\n<p>I separate three jobs: writing the metadata, checking what the published page contains, and seeing how a destination uses it. One tool\u2019s preview doesn\u2019t prove that all three are working.<\/p>\n<p><span id=\"method-1-kwebby-s-open-graph-checker-and-generator-tool\"><\/span><\/p>\n<h3 id=\"method-1-generate-tags-with-kwebby-then-check-the-published-page\">Method 1: Generate tags with Kwebby, then check the published page<\/h3>\n<ol>\n<li>Open the <a href=\"https:\/\/kwebby.com\/open-graph-generator\">Open Graph Generator<\/a>.<\/li>\n<li>Enter the page\u2019s title, description, canonical URL and image URL. Add your site name and X handle if relevant.<\/li>\n<li>Choose <strong>article<\/strong> for a blog post, then select the language and card type.<\/li>\n<li>Review the generated HTML. Add image dimensions and alt text if your final output doesn\u2019t include them.<\/li>\n<li>Copy the tags into the page\u2019s head or use the equivalent fields in your CMS. Publish the page.<\/li>\n<li>Use the <a href=\"https:\/\/kwebby.com\/open-graph-checker\">Open Graph Checker<\/a> to inspect the live URL, then test it with the platform\u2019s own tools.<\/li>\n<\/ol>\n<p>The current generator includes separate page URL and image URL fields, content-type and locale selectors, a card-type selector and a copyable HTML output. Its on-page card is a preview of your inputs. It isn\u2019t evidence that Facebook has fetched your page.<\/p>\n<p><span id=\"method-2-metatags-io-to-generate-social-markups\"><\/span><\/p>\n<h3 id=\"method-2-use-meta-tags-to-compare-preview-layouts\">Method 2: Use Meta Tags to compare preview layouts<\/h3>\n<p><a href=\"https:\/\/metatags.io\/\" target=\"_blank\">Meta Tags<\/a> offers editable image, title and description fields, previews for several destinations and a <strong>Get Code<\/strong> control.<\/p>\n<p>Use it to compare wording and image choices. After copying the code, you still need to add it to your website and publish. Treat any simulator as a design aid because the destination app can render its own layout.<\/p>\n<p><span id=\"wordpress-plugin-for-social-media-meta-tags\"><\/span><\/p>\n<h2 id=\"how-to-add-social-media-meta-tags-in-wordpress\">How to add social media meta tags in WordPress<\/h2>\n<p>Start with the SEO plugin you already use. Installing another plugin just for social metadata can leave you with duplicate output from the theme, the first plugin and the new plugin.<\/p>\n<p><span id=\"set-wordpress-social-fields\"><\/span><\/p>\n<h3 id=\"set-the-posts-social-image-title-and-description\">Set the post\u2019s social image, title and description<\/h3>\n<p>For Rank Math, open the post in the WordPress editor, open the Rank Math panel and select its <strong>Social<\/strong> tab. Set the Facebook image, title and description, then review the Twitter tab.<\/p>\n<p>If you want separate X values, disable the option that reuses Facebook\u2019s data. Choose the card type, set the desired fields and update the post. Rank Math\u2019s <a href=\"https:\/\/rankmath.com\/kb\/how-to-add-twitter-cards\/\" target=\"_blank\">current WordPress card setup guide<\/a> documents this workflow.<\/p>\n<p>A default social image is useful for pages that don\u2019t have their own artwork. Still give important articles a page-specific image, so every share doesn\u2019t look like a link to your homepage.<\/p>\n<p><span id=\"wordpress-without-plugin\"><\/span><\/p>\n<h3 id=\"if-you-add-tags-without-a-plugin-make-them-page-specific\">If you add tags without a plugin, make them page-specific<\/h3>\n<p>A developer can generate metadata through a theme hook or the site\u2019s existing template. Each page needs its own URL, title, summary and image. A hard-coded block in a global header can accidentally describe every article as the same page.<\/p>\n<p>Use a child theme or another maintainable integration, back up first and check for existing output. Kwebby has walkthroughs for <a href=\"https:\/\/kwebby.com\/blog\/og-tags-wordpress-without-plugin\/\">adding Open Graph tags in WordPress<\/a> and <a href=\"https:\/\/kwebby.com\/blog\/add-twitter-card-meta-data-wordpress\/\">adding X Card metadata without a plugin<\/a>.<\/p>\n<p>For a JavaScript app, include metadata in the HTML response served to sharing crawlers. A tag that appears only after browser-side JavaScript runs may never reach the crawler. Frameworks can handle this for you; <a href=\"https:\/\/nextjs.org\/docs\/app\/getting-started\/metadata-and-og-images\" target=\"_blank\">Next.js documents its metadata and OG image options<\/a>.<\/p>\n<p><span id=\"test-social-media-meta-tags\"><\/span><\/p>\n<h2 id=\"how-to-test-social-media-meta-tags-after-publishing\">How to test social media meta tags after publishing<\/h2>\n<ol>\n<li><strong>Open the exact public URL.<\/strong> Follow any redirect and confirm you\u2019re checking the final page.<\/li>\n<li><strong>View the page source.<\/strong> Search for <code>og:title<\/code>, <code>og:image<\/code> and <code>twitter:card<\/code>. Check values and duplicates, not just whether the names exist.<\/li>\n<li><strong>Open the image URL separately.<\/strong> Verify it works without your signed-in session.<\/li>\n<li><strong>Use Facebook\u2019s <a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\" target=\"_blank\">Sharing Debugger<\/a>.<\/strong> Inspect what its crawler fetched and request another scrape after correcting the page. You may need to sign in.<\/li>\n<li><strong>Use LinkedIn\u2019s <a href=\"https:\/\/www.linkedin.com\/post-inspector\/\" target=\"_blank\">Post Inspector<\/a>.<\/strong> Enter the public page URL to check its metadata and refresh LinkedIn\u2019s stored information.<\/li>\n<li><strong>Check X\u2019s current compose preview.<\/strong> Add the link to a draft and inspect the available preview before posting. Don\u2019t assume an old Card Validator tutorial still describes its current interface.<\/li>\n<\/ol>\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/linkedin-post-inspector.jpg\"><img decoding=\"async\" src=\"https:\/\/kwebby.com\/blog\/wp-content\/uploads\/2022\/03\/linkedin-post-inspector.jpg\" width=\"1150\" height=\"195\" alt=\"LinkedIn Post Inspector\u2019s public URL input and Inspect button\" loading=\"lazy\" style=\"max-width:100%;height:auto;\" title=\"\"><\/a><figcaption>Native screenshot of LinkedIn\u2019s public Post Inspector input screen. No URL was submitted for this capture; it shows the tool\u2019s entry point, not a validation result.<\/figcaption><\/figure>\n<p>I\u2019d check both a phone and a desktop preview for a launch that matters. Keep a short record of the URL, image filename, last edit and what each platform showed. It\u2019s much easier to diagnose a change when you know which version you\u2019re looking at.<\/p>\n<p><span id=\"fix-wrong-social-preview\"><\/span><\/p>\n<h2 id=\"fix-a-wrong-title-missing-image-or-outdated-social-preview\">Fix a wrong title, missing image or outdated social preview<\/h2>\n<div style=\"overflow-x:auto;\">\n<table>\n<thead>\n<tr>\n<th scope=\"col\">What you see<\/th>\n<th scope=\"col\">What I\u2019d check first<\/th>\n<th scope=\"col\">Next step<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Every article shows the same title<\/td>\n<td>Sitewide hard-coded tags or a global fallback<\/td>\n<td>Generate the values from each page\u2019s own content.<\/td>\n<\/tr>\n<tr>\n<td>The preview shows an old title<\/td>\n<td>Whether the public page source has the new value<\/td>\n<td>Clear the relevant site\/CDN cache, then request a platform re-scrape.<\/td>\n<\/tr>\n<tr>\n<td>The image is missing<\/td>\n<td>Image URL, access restrictions, format and dimensions<\/td>\n<td>Serve a public JPEG or PNG at a stable HTTPS address.<\/td>\n<\/tr>\n<tr>\n<td>The new title appears with the old image<\/td>\n<td>Whether the image URL stayed the same<\/td>\n<td>Publish the new image at a new URL and update the image tag.<\/td>\n<\/tr>\n<tr>\n<td>The wrong version of the page appears<\/td>\n<td>Redirects, <code>og:url<\/code> and the canonical link<\/td>\n<td>Make the intended page identity consistent.<\/td>\n<\/tr>\n<tr>\n<td>The checker finds multiple conflicting tags<\/td>\n<td>Theme code, SEO plugins and header-injection plugins<\/td>\n<td>Choose one owner for the metadata and remove the conflicting output.<\/td>\n<\/tr>\n<tr>\n<td>The page works in your browser but the crawler fails<\/td>\n<td>Login requirements, bot protection and server responses<\/td>\n<td>Ask your host or developer to diagnose the specific crawler request.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Don\u2019t treat all caching as one thing. Your WordPress cache can serve old HTML. Your CDN can serve an old file. A social platform can separately retain the metadata and image it fetched earlier.<\/p>\n<p>Meta explicitly caches images by URL. If the artwork changes, use a new image URL and update your tags. Keep the old image available because existing shares may reference it. Meta also says that changing the image for a URL doesn\u2019t automatically update every old share.<\/p>\n<p>If WordPress output looks correct but the preview still fails, <a href=\"https:\/\/rankmath.com\/kb\/open-graph-image-not-displaying\/\" target=\"_blank\">Rank Math\u2019s image troubleshooting guide<\/a> covers practical checks for social images and conflicting output. Work through the actual failure rather than adding more tags at random.<\/p>\n<p><span id=\"frequently-asked-questions\"><\/span><\/p>\n<h2 id=\"frequently-asked-questions-about-social-media-meta-tags\">Frequently asked questions about social media meta tags<\/h2>\n<p><span id=\"why-you-need-social-media-markups\"><\/span><\/p>\n<h3 id=\"why-do-you-need-social-media-markup\">Why do you need social media markup?<\/h3>\n<p>It gives a sharing platform an explicit title, summary and image for your page. Without it, the platform may infer those details. Set useful values so the preview has a better starting point, then check the result where you\u2019ll share it.<\/p>\n<p><span id=\"what-is-the-difference-between-open-graph-and-twitter-card\"><\/span><\/p>\n<h3 id=\"what-is-the-difference-between-open-graph-and-an-x-card\">What is the difference between Open Graph and an X Card?<\/h3>\n<p>Open Graph describes a page with <code>og:<\/code> properties. X Cards add <code>twitter:<\/code> properties, including a card style. Both can describe the same content, and they can coexist in the page\u2019s head.<\/p>\n<h3 id=\"can-i-use-the-same-social-media-meta-tags-for-all-platforms\">Can I use the same social media meta tags for all platforms?<\/h3>\n<p>You can reuse the core Open Graph data across platforms that support it and use the same values in X fields. Add <code>twitter:card<\/code> for the X layout you want. A shared image and headline are convenient, but identical rendering across every app isn\u2019t guaranteed.<\/p>\n<p><span id=\"can-i-use-social-markups-for-my-website-without-using-any-tools\"><\/span><\/p>\n<h3 id=\"can-i-add-social-markup-without-a-generator-or-plugin\">Can I add social markup without a generator or plugin?<\/h3>\n<p>Yes. Add valid HTML inside the page\u2019s head, or generate it through your site template. The example above gives you the structure. Check that your values are page-specific, escaped correctly and visible in the published response.<\/p>\n<p><span id=\"instagram-meta-tags\"><\/span><\/p>\n<h3 id=\"are-instagram-meta-tags-the-same-as-hashtags\">Are Instagram meta tags the same as hashtags?<\/h3>\n<p>No. Website metadata describes a linked webpage. Hashtags belong in social content. Adding <code>og:title<\/code> to your site won\u2019t add hashtags to Instagram posts or let you edit Instagram\u2019s own HTML. If your issue is a link preview, check the exact surface where that link is being shared.<\/p>\n<p><span id=\"social-meta-tags-body\"><\/span><\/p>\n<h3 id=\"can-i-paste-meta-tags-into-a-wordpress-paragraph-or-custom-html-block\">Can I paste meta tags into a WordPress paragraph or Custom HTML block?<\/h3>\n<p>Use your SEO plugin\u2019s social fields or a proper head integration. A content block sits in the article body and isn\u2019t a reliable place to publish sharing metadata. Code examples shown to readers should stay escaped, like the example in this guide.<\/p>\n<p><span id=\"social-preview-refresh-time\"><\/span><\/p>\n<h3 id=\"how-long-does-a-social-preview-take-to-refresh\">How long does a social preview take to refresh?<\/h3>\n<p>There isn\u2019t one reliable delay for every platform. First confirm the new metadata is public, then use the destination\u2019s inspection tool where available. A new image URL may also be needed, and old posts can retain their previous preview.<\/p>\n<p><span id=\"conclusion\"><\/span><\/p>\n<h2 id=\"final-thoughts-publish-accurate-tags-then-check-the-real-preview\">Final thoughts: publish accurate tags, then check the real preview<\/h2>\n<p>I\u2019d start with one important page. Give it a clear headline, a useful summary, a deliberate image and the correct canonical URL. Add the Open Graph and X fields through one maintained implementation.<\/p>\n<p>Then inspect the published source and the destination\u2019s preview. If something looks wrong, check the HTML, image access and caches in that order. That turns a vague \u201cmy link looks broken\u201d problem into a set of checks you can actually work through.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Social media meta tags tell sharing platforms which title, description, image and URL to use when someone shares your page. Add Open Graph tags and&hellip;<\/p>\n","protected":false},"author":1,"featured_media":11615,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,408,4],"tags":[],"class_list":["post-11598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-social-media-tutorials","category-tutorials"],"_links":{"self":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/11598","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=11598"}],"version-history":[{"count":6,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/11598\/revisions"}],"predecessor-version":[{"id":24800,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/posts\/11598\/revisions\/24800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media\/11615"}],"wp:attachment":[{"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/media?parent=11598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/categories?post=11598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kwebby.com\/blog\/wp-json\/wp\/v2\/tags?post=11598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}