What are Open Graph tags?

Open Graph tags are tags in a page’s , with property names starting og:, that tell social platforms what title, description, image and URL to use when the page is shared. The Open Graph protocol was introduced by Facebook in 2010 and is documented at ogp.me.

Which Open Graph tags are required?

The protocol lists four: og:title, og:type, og:image and og:url. In practice add og:description too, plus twitter:card for X.

Do Open Graph tags help SEO?

Not directly: Google doesn’t use them as a ranking signal. They improve how links look when shared, which affects click-through from social and messaging apps.

Should I use property= or name= for og tags?

The spec uses property= (RDFa). Most crawlers accept name= too, but property= is the safe choice for og: tags. Twitter tags officially use name=.

Can I have more than one og:image?

Yes. Repeat the tag; the first one is preferred and some platforms let the sharer pick another. Structured properties such as og:image:width apply to the og:image directly before them.

Open Graph tags: the complete reference

Open Graph tags are the <meta property="og:…"> lines that tell Facebook, LinkedIn, Slack, Discord, WhatsApp and (with a few twitter: additions) X how to draw your link. Here is every tag that matters, and how crawlers actually use them.

The minimum set for every page

Six tags give you a good card on every major platform. The Open Graph protocol (ogp.me) marks the first four as required; the last two fill real gaps.

Put them in the server-rendered HTML. Tags added by client-side JavaScript are never seen by crawlers.

Or skip the typing and use the generator.

<meta property="og:title" content="How we cut deploy time in half" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/blog/deploys" />
<meta property="og:description" content="Five CI changes…" />
<meta name="twitter:card" content="summary_large_image" />

Basic tags

Tag	What it does	Example value
`og:title`	The title of the page as it should appear in the card. Required.	`How we cut deploy time in half`
`og:type`	The kind of object: website, article, product, profile, video.movie, music.song, book… Required; defaults to website.	`article`
`og:image`	Absolute URL of the image to show. Required.	`https://example.com/og.png`
`og:url`	The canonical URL of the page; share counts group under it. Required.	`https://example.com/blog/deploys`
`og:description`	One or two sentences summarising the page.	`Five CI changes that took builds from 14 to 6 minutes.`
`og:site_name`	The name of the overall site.	`Example Engineering`
`og:locale`	Language and territory, language_TERRITORY format. Default en_US.	`en_GB`
`og:locale:alternate`	Other locales the page is available in (repeatable).	`fr_FR`
`og:determiner`	Word before the title in a sentence: a, an, the, auto or blank.	`the`

Image and media properties

Tag	What it does	Example value
`og:image:url`	Same as og:image.	`https://example.com/og.png`
`og:image:secure_url`	An https URL for the image, for sites that also serve http.	`https://example.com/og.png`
`og:image:type`	MIME type of the image.	`image/png`
`og:image:width`	Width in pixels.	`1200`
`og:image:height`	Height in pixels.	`630`
`og:image:alt`	Description of what’s in the image (not a caption). Should be set whenever og:image is.	`Chart of build time falling`
`og:video / og:audio`	URL of a video or audio file to accompany the page; take :secure_url, :type, :width, :height like images.	`https://example.com/clip.mp4`

Article tags (og:type = article)

Tag	What it does	Example value
`article:published_time`	ISO 8601 date-time the article was first published.	`2026-09-01T09:00:00Z`
`article:modified_time`	ISO 8601 date-time it was last changed.	`2026-09-20T15:30:00Z`
`article:author`	URL of a profile page (or name, as most platforms accept).	`https://example.com/team/sam`
`article:section`	A high-level section name.	`Engineering`
`article:tag`	Tag words (repeatable).	`CI`

Twitter / X card tags

Tag	What it does	Example value
`twitter:card`	summary, summary_large_image, app or player. The only X tag with no og: fallback.	`summary_large_image`
`twitter:site`	@username of the website.	`@example`
`twitter:creator`	@username of the content author.	`@samdev`
`twitter:title`	Title for X; falls back to og:title.	`How we cut deploy time in half`
`twitter:description`	Description for X; falls back to og:description.	`Five CI changes…`
`twitter:image`	Image for X; falls back to og:image.	`https://example.com/og.png`
`twitter:image:alt`	Alt text for the image, up to 420 characters.	`Chart of build time falling`

How crawlers read Open Graph tags

Every platform follows roughly the same six steps. Step through them and watch which lines of the <head> matter at each stage.

Step through what a crawler does with your link

1. Request

You paste a link. Within a second the platform’s server (not your browser) requests the URL with its own user agent: facebookexternalhit, Twitterbot, LinkedInBot, Slackbot-LinkExpanding, Discordbot, WhatsApp.

<head>
  <title>Deploy guide | Acme</title>
  <meta name="description" content="Cut deploy time…">
  <meta property="og:title" content="How we cut deploy time">
  <meta property="og:description" content="Our 5-step…">
  <meta property="og:image" content="https://acme.dev/og.png">
  <meta property="og:url" content="https://acme.dev/deploy">
  <meta name="twitter:card" content="summary_large_image">
</head>

Try it: which tag wins?

Switch tags on and off. X reads twitter: tags first and falls back to Open Graph; Facebook never reads twitter: tags.

Tags on the page twitter:title og:title <title> twitter:image og:image twitter:card

X title ← twitter:title
Ship it Friday: the X-only headline

X image ← og:image

X layout: summary_large_image (full-width image)

Facebook title ← og:title
How we cut deploy time by half

Facebook image ← og:image