Open Graph Tags: How to Set Them Up and Test Them

By /

Open Graph tags are small <meta> lines in your page’s <head> that tell Facebook, LinkedIn, Slack, WhatsApp and other apps what title, description and image to show when someone shares your link. Add four required tags, a good image and a description, then test the page in a debugger. That takes about 15 minutes per template, and it decides whether your link looks like a professional card or a bare URL.

This guide covers what to add, copy-and-paste code, how Twitter (X) cards fit in, how to test, and what to do when a preview refuses to update.

Mysearchhero
Grow your wider online presence
MySearchHero supports your wider online presence with a monthly bundle of published articles, backlinks, Reddit mentions, and AI-generated social media posts through an automated pipeline.

TL;DR

  • Every page needs four Open Graph tags: og:title, og:type, og:image and og:url. Add og:description too, since it is optional but recommended.
  • Open Graph tags do not directly influence search rankings. They control how your link looks when shared, which affects clicks and shares.
  • Use the property attribute for og: tags, and put them in server-rendered HTML, not injected by JavaScript.
  • If a preview is stale, don’t rewrite your tags. Re-scrape the URL in the platform’s debugger.
  • Use og:image at 1200×630 pixels so the card looks sharp on high-resolution screens.

Table of Contents

What Open Graph tags are

Facebook introduced the Open Graph protocol so that any web page can become a rich object in a social graph. In practice, you place extra <meta> tags in the <head> of the page, and any app that reads them builds a link card from your data instead of guessing.

The protocol is no longer Facebook-only. Facebook, LinkedIn, Slack, Discord, WhatsApp and X all read these tags, with X adding a few twitter: tags of its own. So one set of tags works across most places your customers will paste your link: group chats, email, social posts and community forums.

Without them, each platform picks its own title, grabs a random image from the page, or shows nothing. You lose control of the first impression at the exact moment someone is deciding whether to click.

Do Open Graph tags help SEO?

Not directly. Open Graph is a social metadata protocol, and the standard guidance is that it does not act as a ranking signal. What it does is change how your content looks and performs once it is shared.

That still matters for search indirectly. A card with a clear title and a real image gets clicked more often than a bare link. More clicks and shares mean more visits, more people who might link to you, and more brand searches. If you want the evidence on how far social activity can go in moving rankings, we break it down in Do Social Signals Really Affect Your SEO Rankings?

The honest framing: treat Open Graph as conversion work for shared links, not as a ranking trick. It costs almost nothing and it protects the traffic you already earn.

The four required tags

The protocol defines four required properties for every page:

Tag What it holds Example value
og:title The title of the page as it should appear on a card Emergency Plumbing in Austin, TX
og:type The kind of object website or article
og:image A URL for the preview image https://example.com/img/plumbing-og.jpg
og:url The canonical URL of the page https://example.com/plumbing/

If any of these is missing, platforms may infer the content or skip the preview entirely. The Facebook debugger calls this an “Inferred Property” warning.

A few practical notes on each:

  • og:title does not have to match your SEO title tag. Write it for a person scrolling a feed. Keep it short enough that it is not cut off, and lead with the point.
  • og:type should be website for a homepage. For blog posts and many service pages, practitioners suggest article, which gives platforms richer data to categorize the link.
  • og:image needs an absolute URL, not a relative path.
  • og:url should match your canonical URL. That keeps share counts consolidated under one identity rather than split across URL variants with tracking parameters.

Tags worth adding on top

Once the four are in place, add these:

  • og:description: one or two sentences that earn the click. It is optional in the protocol but highly recommended.
  • og:site_name: your business name, shown on some platforms above or below the title.
  • og:image:alt: alt text for the image, which helps accessibility.
  • og:locale: for a US audience, en_US.

Again, do not stuff keywords into these. A description written like a sentence a human would say does better than a list of search terms.

Copy-and-paste example

Here is a complete set for a local service business blog post. Replace the values with your own.

<head>
  <meta property="og:title" content="5 Signs Your Water Heater Is About to Fail" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/blog/water-heater-failure-signs/" />
  <meta property="og:image" content="https://example.com/img/water-heater-og.jpg" />
  <meta property="og:image:alt" content="A corroded water heater tank with a pooling leak" />
  <meta property="og:description" content="Rust-colored water, strange noises and more: how to spot trouble before you have a flood." />
  <meta property="og:site_name" content="Example Plumbing" />
  <meta property="og:locale" content="en_US" />
</head>

Two details trip people up. First, the protocol uses the property attribute, not name. Some lenient scrapers read name, but relying on that is inconsistent across platforms. Second, these tags must be in the server-rendered HTML of the page. Many scrapers do not run JavaScript, so tags added by a script on the client are often missed.

Setting up Twitter (X) cards

You do not need to duplicate everything. X falls back to your og: tags when twitter: tags are absent, so the minimum setup is one extra line that picks the card type:

<meta name="twitter:card" content="summary_large_image" />

Note the attribute here: Twitter tags use name, the opposite of Open Graph’s property. The four card types are summary, summary_large_image, app and player, and summary_large_image is the most useful for most business pages. The same reference lists 1200×628 as the image size for large cards, which is close enough to your 1200×630 Open Graph image that one file can serve both.

If you want a branded attribution, add twitter:site with your business handle. Beyond that, override twitter:title, twitter:description or twitter:image only when you want the X version to differ from the Facebook version.

Image rules that prevent most problems

The image does most of the work on a card. Follow these:

  1. Aim for 1200×630 pixels. The protocol guidance is that the image should be at least that size for high-resolution displays.
  2. Never go below the minimum. Facebook’s debugger flags images under 200×200 pixels with a “not big enough” error.
  3. Use a real, absolute URL that is publicly reachable, not behind a login or a block on bots.
  4. Keep text short and centered. Different apps crop the edges differently, so leave a safe margin.
  5. Make one image per key page, not one logo for the whole site. A plumber’s “water heater” post and “drain cleaning” page should not look identical in a feed.

For a local business, a real photo of your team, truck or finished job usually beats a stock graphic. People click on what looks like a real business.

Where your Facebook presence fits in

Open Graph controls the link card. Your Facebook Business Page is the place many of those links end up. If you are polishing how your business looks there, richer media on the page itself helps too, such as publishing a virtual tour to your Facebook Business Page, which suits businesses where customers want to see the space before visiting.

How to add the tags on your site

The method depends on how your site is built.

  • WordPress: most SEO plugins have a social tab for each post and page, plus site-wide defaults. Set a default image so that no page is ever left without one, then override it on important pages.
  • Website builders: look for a “social sharing image” or “social preview” field in page settings. These fields usually write the tags for you.
  • Custom or developer-built sites: add the tags to the page template so they populate from each page’s own title, description, image and URL. Make sure they render on the server.

A useful habit is to set sensible site-wide fallbacks first (default image, site name, locale), then add page-level values for your homepage, your main service pages and your top posts.

How to test and debug your tags

Testing takes two steps: check the raw HTML, then check what the platform sees.

Step 1: view the source. Open the public URL, view the page source, and search for og:. Save the page and read every og: tag out of the HTML, and confirm all four required ones are there and spelled correctly. If you only inspect the live rendered page in developer tools, you can miss tags that scrapers will never see. A short guide to finding meta tags covers the difference between source and rendered HTML.

Step 2: run the Facebook Sharing Debugger. Paste your URL into developers.facebook.com/tools/debug. It shows the metadata Facebook currently sees, flags errors such as missing tags or small images, and offers a Scrape Again button to refresh its copy of your page. You will need to be logged in to use it.

Common results and what they mean:

What you see Likely cause Fix
“Inferred Property” A required tag is missing Add the missing og: tag
“Provided og:image is not big enough” Image under 200×200 pixels Export at 1200×630
Old image or title still showing Platform cache Click Scrape Again
No tags detected Tags injected by JavaScript, or page blocked Render tags server-side, check access

Why your preview won’t update

This is the most common frustration for business owners. You change the image, share the link, and the old one appears.

Social platforms cache the metadata they fetch. Updating tags in your CMS does not change what they stored. The fix is not to edit the tags again. Open the platform’s debugger, paste the URL and re-scrape it, which tells the network to drop the old copy and fetch the new one. Do this for each platform where the stale card appears.

Re-scraping replaces a cached social preview

A good rule: whenever you change a title, description or image on a page that is already being shared, re-scrape it before you post the link again.

Open Graph best practices checklist

  • Include all four required tags on every indexable page.
  • Add og:description and write it by hand for your top pages.
  • Use property for og: tags and name for twitter: tags.
  • Keep og:url identical to your canonical URL.
  • Use website for the homepage and article for posts.
  • Give every key page its own 1200×630 image.
  • Render tags in server-side HTML.
  • Test new templates in a debugger before you launch them.
  • Re-scrape after any change to a shared page.

Our perspective: shared links are part of the content job

Most small business owners we work with treat Open Graph as a developer chore, so it gets skipped. We think that is a mistake, because every article you publish is also a link someone might drop into a group chat, a Reddit thread or a social post. If the card looks broken, the work behind that article is wasted at the last step.

Our perspective: shared links are part of the content job — overview diagram

Our service publishes SEO articles, builds backlinks, places brand mentions in relevant Reddit conversations and posts to social platforms each month. All of that creates shared links, and each one gets seen as a card first. So our advice is simple: fix the template once, with a default image and correct tags, and every future article inherits a good preview. It is one of the few marketing tasks that you do once and keep benefiting from.

We also would not overstate it. Open Graph will not lift a weak page in search. Pair it with content that answers real questions, and with authority built off your own site, as we explain in Off-Page SEO: What It Is and How to Build Authority.

— Mike

If you would rather not run this yourself

Tags are one small piece of a steady content and visibility routine, and most owners of service businesses do not have time to maintain all of it. MySearchHero bundles published SEO articles, backlinks, Reddit mentions and AI-generated social posts into one monthly subscription. The Hero plan is $397 per month and combines the full set, and we back it with a 45-day money-back guarantee if organic metrics do not improve. You can see every plan on our pricing page.

FAQ

What are Open Graph tags?

They are <meta> tags in a page’s <head> that tell social platforms and messaging apps which title, type, image and URL to use when your link is shared. The Open Graph protocol defines them. Without them, platforms guess or show a plain link.

How do I check my Open Graph tags?

View the page source and look for og: tags, then paste the URL into the Facebook Sharing Debugger. The debugger shows what Facebook sees and warns about missing tags or small images. Use its Scrape Again button after you fix anything.

Do Open Graph tags matter for SEO?

They are not a direct ranking factor. They improve how shared links look, which can raise clicks and shares. Those effects can support your visibility over time, but they will not replace good content and links.

What size should my Open Graph image be?

Use 1200×630 pixels as a standard. Anything under 200×200 pixels triggers an error in Facebook’s debugger. The same image also works well for X large cards, which are specified at 1200×628.

Do I need separate Twitter card tags?

Usually only one. X falls back to your Open Graph tags, so adding twitter:card with the value summary_large_image is enough for most pages. Add other twitter: tags only when you want X to show something different.

Sources

Scroll to Top