og:title is the meta tag that sets the headline of your link preview on social platforms. It is separate from your HTML tag and should usually be shorter - keep it under 60 characters and leave the brand suffix out; that is what og:site_name is for.

Open Graph meta tags: the complete og: tag reference

Q: Do Open Graph tags affect Google rankings?

Not directly - Open Graph tags are not a ranking factor. But Google uses og:site_name as a signal for the site name it shows in search results, and can fall back to OG data when your regular title or description is missing. The indirect effect is bigger: better previews get more shares, and shares get traffic.

Open Graph tags are the <meta> tags that decide what your link looks like when someone pastes it into Facebook, X, LinkedIn, Slack, Discord, WhatsApp or iMessage. Get them right and you control the headline, the description and the image. Leave them out and each platform guesses - usually badly.

This is a reference page. One section per tag, with the exact snippet, the length limits that actually bite, and what each platform does with it.

The full set of OG tags, copy-paste ready

If you only want the answer, here it is. Drop this into <head> and change the values:

<meta property="og:title" content="Open Graph meta tags: the complete reference" />
<meta property="og:description" content="Every og: tag explained, with snippets and size limits." />
<meta property="og:image" content="https://getsite.ai/images/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram of the six core Open Graph tags" />
<meta property="og:url" content="https://getsite.ai/blog/how-to-use-open-graph-og-meta-tags" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="GetSite" />
<meta property="og:locale" content="en_US" />

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

Two things people get wrong in that block before they even read further: OG tags use property=, not name=, and Twitter Card tags use name=, not property=. Facebook's parser is strict about the first one.

Jump to a tag: og:title · og:description · og:image · og:url · og:type · og:site_name · Twitter Cards · Debugging

og:title - the og title tag and how long it can be

<meta property="og:title" content="Why Cats Rule the Internet" />

The headline of the preview card. It is not your <title> tag, and it should usually be shorter - a <title> often carries a brand suffix ("| GetSite Blog") that just wastes space in a social card.

Length: the spec sets no limit, but every platform truncates. Keep it to 60 characters or fewer and nothing gets cut anywhere. Past that: Facebook cuts around 88 characters in the feed, X around 70, LinkedIn wraps to two lines and stops around 120. Exact numbers shift with viewport width and platform redesigns, so treat 60 as the safe ceiling rather than a spec.

Rendering: Facebook, X, LinkedIn, Slack and Discord all show it in bold as the main line of the card. Google does not use og:title for the blue link in search results - it uses your <title> tag - though it may fall back to OG data when the title is missing or unhelpful.

Write it as a headline, not a filename. "Why Cats Rule the Internet" beats "Cats - Blog - Page 3".

og:description - the og description tag and its character limit

<meta property="og:description" content="A short, honest summary of the page. One or two sentences, no keyword stuffing." />

The grey line under the title. Think of it as the trailer, not the plot summary.

Length: aim for 110 characters or fewer if you care about mobile. Facebook shows roughly 200 characters on desktop and closer to 110 on mobile, X truncates in a similar range, and anything longer ends in an ellipsis.

Rendering: Facebook and Slack show it in full. X shows it on summary and summary_large_image cards. LinkedIn has largely dropped description text from feed link previews - its cards now show image, title and domain - so do not rely on og:description to carry your pitch on LinkedIn. Google ignores it for snippets and uses your <meta name="description"> instead, which is a separate tag with its own rules worth learning.

og:image - the og image tag, size, and format rules

<meta property="og:image" content="https://getsite.ai/images/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Text description of the image" />

The single tag that does the most work. It is also the one that breaks most often, because it depends on a second HTTP request that has to succeed for a crawler you never see.

Dimensions: 1200 × 630 pixels (a 1.91:1 ratio) is the universal safe size. Below 600 × 315 most platforms downgrade you from a large card to a small square thumbnail. Below roughly 200 × 200 Facebook may skip the image entirely.

File size: Facebook accepts up to 8 MB and X around 5 MB, but the real constraint is WhatsApp, which wants the thumbnail under about 300 KB or it renders no image at all. If you want previews everywhere, keep it small.

Format: JPG and PNG work everywhere. WEBP and AVIF are inconsistently supported - LinkedIn in particular has a history of refusing them. Use JPG or PNG for the OG image even if the rest of your site serves WEBP.

Rules that trip people up:

The URL must be absolute. /images/og.png silently fails; https://yoursite.com/images/og.png works.
It must be publicly reachable - not behind basic auth on a staging domain, not blocked in robots.txt, not on a CDN that requires a signed URL.
Set og:image:width and og:image:height. Without them the first person to share your link sees a card with no image while the platform fetches and measures the file in the background.
og:image:alt is read by screen readers on Facebook and X. It costs one line.

You can declare multiple og:image tags; Facebook treats the first as the default and lets the sharer pick. Most people should just set one good one.

og:url - the og url tag and why it must be canonical

<meta property="og:url" content="https://getsite.ai/blog/how-to-use-open-graph-og-meta-tags" />

The canonical, absolute address of this page. It should match your <link rel="canonical"> and it should point at itself - not at your homepage, which is a surprisingly common copy-paste bug.

Strip tracking parameters. Facebook aggregates likes, shares and comment counts against the og:url value, so if half your traffic shares ?utm_source=newsletter and half shares the clean URL, you split your engagement across two objects that never merge.

Pick one protocol and one host - https, and either www or not - and be consistent across the whole site.

og:type - the og type tag and its valid values

<meta property="og:type" content="article" />

Tells the platform what kind of object the page is. If you omit it, parsers assume website.

The values you will actually use:

website - homepages, landing pages, anything that is not a discrete piece of content.
article - blog posts, news, documentation.
profile - a page about one person.
video.movie, video.episode, music.song, book - media pages.
product - a Facebook extension used by e-commerce and product catalogs.

Choosing article unlocks a set of companion tags:

<meta property="article:published_time" content="2026-08-10T09:00:00Z" />
<meta property="article:modified_time" content="2026-08-10T09:00:00Z" />
<meta property="article:author" content="https://getsite.ai/about" />
<meta property="article:section" content="SEO" />
<meta property="article:tag" content="open graph" />

These are mostly invisible in the card itself. They matter to aggregators, feed readers and anything doing content analysis on your pages.

og:site_name - the og site name tag, and why Google cares

<meta property="og:site_name" content="GetSite" />

The human-readable name of the whole site, not the page - "IMDb", not "The Godfather (1972)". It should be byte-identical on every page you publish.

This is the tag people skip, and it is the one with the most surprising payoff: Google uses og:site_name as one of the signals for the site name it displays above your result in search. The other signals are your homepage's WebSite structured data, its <title>, and its <h1>. When those disagree, Google picks - and it often picks badly. Making og:site_name agree with the rest is the cheapest way to stop your search results being labelled "yoursite.com - Home | Welcome".

Where else it shows up:

Slack renders it as the bold label at the top of the unfurled card, above the title.
Discord shows it as small grey text above the title.
Facebook and X ignore it and display your domain instead - which is exactly why it feels safe to skip, and why so many sites do.

Twitter Card tags: the twitter: equivalents of og: tags

X reads Open Graph tags. If a twitter: tag is missing, it falls back to the matching og: one. So in most cases you need exactly one extra line:

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

The full mapping, for when you want X to say something different from everyone else:

Twitter Card tag	Falls back to	Notes
`twitter:card`	-	`summary`, `summary_large_image`, `app` or `player`
`twitter:title`	`og:title`	Truncates around 70 characters
`twitter:description`	`og:description`	Up to 200 characters
`twitter:image`	`og:image`	Absolute URL, roughly 5 MB max
`twitter:image:alt`	`og:image:alt`	420 character limit
`twitter:site`	-	The `@handle` of the publication
`twitter:creator`	-	The `@handle` of the author

summary gives you a small square thumbnail beside the text. summary_large_image gives you the full-width 1.91:1 card, which is what almost everyone wants.

Remember the attribute difference: Twitter Card tags use name=. X's parser tolerates property=, but other tools that read these tags may not.

Other og: tags worth knowing

og:locale - the language and territory, like en_US. Add og:locale:alternate for each translation.
og:image:secure_url - the https version of the image. Redundant if og:image is already https.
og:image:type - the MIME type, such as image/png.
og:video and og:audio - for pages whose main content is media, with og:video:width, og:video:height and og:video:type alongside.
og:determiner - the word that precedes the title ("a", "an", "the"). Almost nobody uses this.

Setting OG tags in Next.js

If you are on the App Router, you never write the meta tags by hand - you export a metadata object and Next.js emits them with the right attributes:

export const metadata = {
  title: "Open Graph meta tags: the complete og: tag reference",
  description: "Every og: tag explained, with snippets and size limits.",
  openGraph: {
    type: "article",
    siteName: "GetSite",
    url: "https://getsite.ai/blog/how-to-use-open-graph-og-meta-tags",
    title: "Open Graph meta tags: the complete og: tag reference",
    description: "Every og: tag explained, with snippets and size limits.",
    images: [{ url: "https://getsite.ai/images/og.png", width: 1200, height: 630 }],
  },
  twitter: { card: "summary_large_image", site: "@morion4000" },
};

Note siteName - it maps to og:site_name, and it is easy to leave out of a metadata object because nothing in your own preview breaks without it.

How to test and debug OG tags

The fastest check is our free Open Graph preview and debugger: paste a URL and it renders the Facebook, X and LinkedIn cards from your actual tags, and flags anything missing, truncated or oversized - in one place instead of three platform tools.

Every platform also caches your tags, so "I changed it and it still shows the old image" is normal, not a bug. You have to force a re-scrape:

Facebook - the Sharing Debugger. Paste the URL, hit Scrape Again. It also lists every tag it found and every one it could not parse.
LinkedIn - the Post Inspector. LinkedIn caches previews for around seven days; the inspector is the only way to clear it.
X - the old Card Validator was retired. Paste the link into the post composer and look at the preview it draws.
Slack and Discord - paste the link into a DM to yourself.
The terminal - curl -s https://yoursite.com | grep 'og:' tells you what a crawler actually receives, which is not always what your browser's devtools show.

Common OG tag mistakes

Tags rendered client-side. Social crawlers do not execute JavaScript. If React injects your meta tags after hydration, the crawler sees an empty <head>. This is the number one cause of "my tags are right but the preview is blank" - that curl command above will show it immediately.
Relative image URLs. og:image must be absolute.
Using name= for og: tags. The Open Graph spec uses property=, and Facebook enforces it.
The same og:title on every page, because a layout template set it once and no page overrides it.
og:url pointing at the homepage on every page - copied from a snippet and never edited.
An image blocked in robots.txt or sitting on a staging host with basic auth.
Assuming the fix is live. It is cached. Re-scrape.

Frequently asked questions

What does OG mean?

OG stands for Open Graph - the protocol Facebook published in 2010 so that any webpage can describe itself to other apps: its title, image, description and type. It is what turns a pasted link into a preview card, and it is now read by X, LinkedIn, Slack, Discord, WhatsApp and iMessage as well.

What is og:title?

og:title is the meta tag that sets the headline of your link preview on social platforms. It is separate from your HTML <title> tag and should usually be shorter - keep it under 60 characters and leave the brand suffix out; that is what og:site_name is for.

What size should an og:image be?

1200 × 630 pixels, a 1.91:1 ratio. Use JPG or PNG, keep the file small (WhatsApp wants under roughly 300 KB), and reference it with an absolute https URL.

Do Open Graph tags affect Google rankings?

Not directly - they are not a ranking factor. But Google uses og:site_name as a signal for the site name it shows in search results, and can fall back to OG data when your regular title or description is missing. The indirect effect is bigger: better previews get more shares, and shares get traffic.

Generating Open Graph images

The tags are the easy half; producing a decent 1200 × 630 image per page is the part that stalls. If you want one without opening a design tool, we have a free generator at imgsrc.pub/generate-og-image.

And if you would rather not think about any of this: sites built with GetSite emit the full OG and Twitter Card set on every page automatically, with a per-page image, canonical og:url and a consistent og:site_name. See how the SEO side works.