Social Media Meta Tags: What They Are and How to Add Them

What are social media meta tags and how do they work?

Meta tags are single lines of HTML that live in the head section of a page. Visitors never see them, but search engines, social networks and chat apps read them whenever a crawler visits. The subset written for link sharing, which some people call og tags or social sharing meta tags, comes in two families.

The first family is Open Graph. These tags use the meta property attribute, as in property="og:title". Facebook created the protocol, and today LinkedIn, WhatsApp, Slack, Discord and the link previews in iMessage read the same tags. The Open Graph protocol specification names four required properties: og:title, og:type, og:image and og:url.

The second family is Twitter Card tags, also called X cards, which use the meta name attribute, as in name="twitter:card". X falls back to the matching Open Graph value when twitter:title, twitter:description or twitter:image is missing. The twitter:card tag has no Open Graph twin, though, so you set it yourself to choose between a small summary card and a large image card.

Here is what happens when someone pastes your address into a post. The platform's crawler (facebookexternalhit for Facebook, LinkedInBot for LinkedIn, Twitterbot for X) requests the URL and reads the head. It builds a rich link preview, a social share card, from the title, description and image it finds, then caches that card so the next share is instant.

Keep these tags apart from two similar sounding checks. The title tag and meta description feed Google results, and we cover the first in our meta title check. Links from your site to your own Facebook or LinkedIn profiles are a different test, explained in the social media presence check.

Do social media meta tags help SEO?

Not directly. Google Search Central keeps a page of Google supported meta tags, and it covers items such as the description, robots and viewport tags. Open Graph and Twitter Card tags are not on that list, so they are not a ranking input you can pull.

The value is indirect, and it is still real. Well chosen Open Graph tags give a shared link a deliberate title, a clear summary and a sharp share thumbnail, which makes it look trustworthy, and people click what looks trustworthy. More clicks bring more visits, more mentions and sometimes the links that do help rankings.

Without the tags, the platform guesses. Facebook picks a fallback title and image from whatever it finds on the page, which often means a cropped logo, a stray sidebar picture or a headline cut off halfway. Link unfurling in chat apps works the same way, and it treats og:title and og:description as a ready-made summary when you provide them. Our AI readiness card also reads those two tags, as a light supporting signal and not as a ranking factor.

One myth worth correcting: these tags belong on every page, not only on the home page. Each blog post, product and landing page gets shared separately, and each deserves its own card.

How SEO Site Checker tests your social media meta tags

Our report opens your URL in headless Chromium and reads every meta element in the rendered DOM after the load event has fired. That means tags added by JavaScript before the load event are counted. It collects any tag whose property starts with og: and any tag whose name starts with twitter:, then compares them with a fixed list of 11.

The exact rule: a tag counts as present only when it uses the right attribute and its content is not empty. All 11 present is a pass, 1 to 10 missing is a warning, and all 11 missing is a fail.

What counts as a present tag

Attribute case and type both matter. A line written as name="og:title", property="twitter:card" or property="OG:title" is not collected, so the report treats that tag as missing even though a human can see it. The content value must also exist. If the same tag appears twice, the later one overwrites the earlier one, so an empty duplicate printed lower in the head by a theme or plugin cancels a good tag above it.

Whitespace alone counts as content, because the value is not trimmed before the test. The report also sees what the browser built, not the raw source file.

What pass, warning and fail mean

Even one missing tag gives a warning, so a page with a complete Open Graph set but no twitter:card sits on warning. Fail is reserved for pages where none of the 11 is found. Both warning and fail show the red How to Fix button, and only a pass adds to the SEO score percentage, so a warning earns nothing for this check.

The tags found list and the Missing Tags list are collapsed panels. Everyone sees the count and the status. The individual rows open for logged-in users, while guests see a prompt to sign in.

What this check does not test

The check confirms presence only. It never downloads your og:image, so it cannot tell whether the file loads, how large it is or whether it is the right shape. It does not measure title or description length, compare values with the page content or draw the preview as each platform would. A pass means the tags are there, not that the card is perfect, so pair it with a visual test.

• Pass: all 11 tags are present with content.
• Warning: 1 to 10 of the 11 are missing.
• Fail: none of the 11 is found.
• Not tested: image loading, size, text length and live previews.

Run the free SEO report

Which social media meta tags does every page need?

Every shareable page should carry all 11 tags with values written for it. The table shows what each controls and what to write, and the og:image row is the one that most changes how a shared link looks. For the deep reference on Open Graph properties and platform quirks, read our complete Open Graph guide.

X documents no twitter:url property, so it is not needed for the card to render, but our report tests it, so set it equal to og:url and move on. Older Twitter Card guidance rules out SVG, so a PNG or JPG inside both limits is the safest share image. Keep og:url identical to your canonical tag check target, because a card that points to a different address than the canonical splits shares between two URLs.

Optional extras: og:image:alt, og:image:width, og:image:height, og:locale, twitter:site and twitter:creator are useful, but our report does not test them. Add them after the 11 are in place.

How to add social media meta tags to your website

The work is the same everywhere: find where your head is generated, add the missing lines and give each page its own values.

1. Run the report. If you are logged in, open the Missing Tags list for the exact names. Otherwise compare your head with the 11 names in the table above.
2. Open the head. Edit the head of your page template, or find the social settings in your CMS, and add whatever is missing.
3. Write values for each page. Never paste one title and one image across every URL, because every shared link would then look identical.
4. Use absolute https addresses. Give og:image, twitter:image and og:url a full address starting with https, and prepare a 1200 by 630 image. The free image resizer can crop and scale one for you.
5. Print each tag once. Make sure every name appears a single time with content, and delete any empty duplicate your theme or plugin prints later in the head.
6. Publish and test again. Run the report, then check the card as described further down.

To skip typing, the Open Graph Generator builds the og: lines and the Twitter Card Generator builds the twitter: lines.

WordPress

Use the social tab of your SEO plugin, such as Yoast SEO or Rank Math, and set a default share image for pages without their own. Then view the source, because a theme and a plugin can both print duplicate meta tags. Some setups do not print all 11 lines, so add any gap the report still lists through a small head snippet or the plugin's custom head field.

Shopify

Open theme.liquid and find the snippet it renders for meta tags, named meta-tags or social-meta-tags depending on the theme. Add any missing og: and twitter: lines inside it.

Wix and Squarespace

Both builders give each page a social share image and description field, and they write the tags when you save. If a line the report wants is not printed, add it through the page's custom or advanced head code field, where the platform offers one.

Static HTML and JavaScript frameworks

Put the tags in one shared head partial so every page inherits them, and pass the page values in as variables. Use server-side rendering for the tags instead of injecting them after load, because social crawlers generally read the HTML as delivered and do not wait for scripts.

Social media meta tags example you can copy

This block holds all 11 tags our report tests. Open Graph lines use property and Twitter lines use name, and swapping them is an easy mistake that leaves a tag counted as missing.

<meta property="og:title" content="How to Repot a Monstera: A Step by Step Guide">
<meta property="og:description" content="Learn when to repot, which soil to use and how to avoid root damage.">
<meta property="og:image" content="https://example.com/images/repot-monstera-1200x630.jpg">
<meta property="og:url" content="https://example.com/repot-monstera">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Plant Care">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Repot a Monstera: A Step by Step Guide">
<meta name="twitter:description" content="Learn when to repot, which soil to use and how to avoid root damage.">
<meta name="twitter:image" content="https://example.com/images/repot-monstera-1200x630.jpg">
<meta name="twitter:url" content="https://example.com/repot-monstera">

Notice the absolute https image address and the matching og: and twitter: values, and use article as the og:type on posts. The next block holds four optional extras the report does not test.

<meta property="og:image:alt" content="A monstera plant being lifted out of its pot">
<meta property="og:locale" content="en_US">
<meta name="twitter:site" content="@exampleplants">
<meta name="twitter:creator" content="@exampleauthor">

How to test social media meta tags and refresh a link preview

Passing the report is the first half of the job. The second half is seeing what each platform really shows, and making it forget the old card if you changed something.

1. View page source. Open the source, not the inspector, and search for og: and twitter:. Social crawlers generally read the server HTML without running scripts, so tags that appear only after JavaScript runs may pass our rendered check and still fail in previews.
2. Preview the card. Paste the address into the Open Graph Validator for a visual preview and a check that the image loads.
3. Scrape Facebook again. Use the Facebook Sharing Debugger and choose to scrape again. Facebook caches an image by its URL, so a new picture needs a new file name.
4. Refresh LinkedIn. The LinkedIn Post Inspector help explains how to refresh a cached preview. Only new posts use the refreshed card.
5. Try X. Paste the link into a draft post and look at the card before you publish.

Common social media meta tags mistakes

• Wrong attribute. Writing name="og:title" or property="twitter:card" looks fine to the eye, but the report ignores it and counts the tag as missing.
• Forgotten tags. A missing twitter:card, og:type, og:site_name or twitter:url leaves the report on warning even when the Open Graph set is otherwise good.
• Empty values. A blank content attribute, or empty duplicate meta tags printed later by a theme or plugin, make a tag count as missing.
• Bad images. A relative path, an http image on an https site, or a picture that is too small or the wrong shape produces a broken or cropped thumbnail.
• Script only tags. Tags injected by JavaScript, or a bot challenge page shown to crawlers, mean the platform sees something different from your visitors.
• One card for everything. The same title and image on every page wastes the share, and an og:url that disagrees with the canonical tag splits it.
• Stale previews. Platforms cache cards, so editing the tags and then testing the old link shows yesterday's result.