Open Graph tags: og:image size, meta tags and Twitter cards

Q: Which Open Graph tags are required?

ogp.me lists four: og:title, og:type, og:image and og:url.

Q: Do I need Twitter card tags if I have Open Graph tags?

You need at least twitter:card to choose the card type.

Open Graph tags are <meta property="og:..."> elements in the page <head> that tell social platforms and messaging apps which title, description and image to show when someone shares a link. The format is defined by the Open Graph protocol at ogp.me.

Syntax

<html prefix="og: https://ogp.me/ns#">
<head>
  <meta property="og:title" content="Red sneakers">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/shoes/red-sneakers/">
  <meta property="og:image" content="https://www.example.com/img/red-sneakers-1200x630.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Red canvas sneakers on a white background">
  <meta property="og:description" content="Canvas sneakers with a rubber sole.">
  <meta property="og:site_name" content="Example Shoes">
</head>

Open Graph uses the property attribute, not name. The prefix attribute on <html> declares the namespace.

Required and optional properties

Property	Required (ogp.me)	Value
`og:title`	Yes	Title of the object as it should appear
`og:type`	Yes	Type, such as `website`, `article`, `profile`, `video.movie`
`og:image`	Yes	Absolute image URL
`og:url`	Yes	Canonical URL of the object
`og:description`	No	One or two sentence description
`og:site_name`	No	Name of the overall site
`og:locale`	No	Locale, default `en_US`
`og:locale:alternate`	No	Other available locales
`og:audio`, `og:video`	No	Audio or video file URL
`og:determiner`	No	Word before the title, such as `a` or `the`

og:image properties

Property	Meaning
`og:image` or `og:image:url`	Image URL
`og:image:secure_url`	HTTPS URL, if different
`og:image:type`	MIME type, such as `image/jpeg`
`og:image:width`	Width in pixels
`og:image:height`	Height in pixels
`og:image:alt`	Description of the image, not a caption

To add several images, repeat og:image. Structured properties such as og:image:width apply to the closest og:image above them. If a property conflicts, the first tag wins.

og:image size

ogp.me does not define an image size. Each platform sets its own.

Platform	Recommended	Minimum	Aspect ratio	Max file size	Source
Facebook (Meta)	At least 1200 x 630 px	200 x 200 px (600 x 315 px for large previews)	Close to 1.91:1	8 MB	Meta for Developers

Meta also says that setting og:image:width and og:image:height lets its crawler render the image right away instead of downloading and processing it first. Meta caches images by URL, so use a new URL when you change an image.

Twitter card tags

X reads its own twitter: tags, which use the name attribute.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="Red sneakers">
<meta name="twitter:description" content="Canvas sneakers with a rubber sole.">
<meta name="twitter:image" content="https://www.example.com/img/red-sneakers-1200x630.jpg">
<meta name="twitter:image:alt" content="Red canvas sneakers on a white background">

Tag	Value
`twitter:card`	`summary`, `summary_large_image`, `app` or `player`
`twitter:site`	@username of the site
`twitter:creator`	@username of the author
`twitter:title`	Title
`twitter:description`	Description
`twitter:image`	Absolute image URL
`twitter:image:alt`	Image description

Common mistakes

Relative image URL. Use an absolute https:// URL.
name="og:title" instead of property="og:title". Open Graph uses property.
Image too small. Below 600 x 315 px Facebook shows a small preview, and below 200 x 200 px none.
Same tags on every page. A template that ships the home page title and image on every route makes every shared link look the same.
Changed the image, preview stays old. Platforms cache previews. Use a new image URL and re-scrape with Meta's Sharing Debugger.
Image blocked by robots.txt or login. The platform crawler must be able to fetch the image.

How to check your page

List the tags in the raw HTML:

curl -s https://www.<your-domain>/page/ | grep -io '<meta[^>]*\(og\|twitter\):[^>]*>'

Use Meta's Sharing Debugger to see what Facebook reads and to force a new scrape.
Paste the link into a private message to yourself on the platform and check the preview.

On JavaScript sites

Link previews come from the HTML that the platform's crawler fetches. If your app sets og: tags with JavaScript after load, for example with a head manager in a client-side router, a crawler that does not run JavaScript sees only the defaults in index.html, or nothing.

The same applies to AI crawlers. The major ones, including GPTBot and ClaudeBot, do not run JavaScript, so titles and descriptions set only in the browser are not in what they read.

Put per-page Open Graph tags in the HTML your server sends: server-side rendering, static generation or prerendering.

See what ChatGPT sees on your site

FAQ

What is the best og:image size?

ogp.me does not set one. Meta recommends at least 1200 x 630 pixels with an aspect ratio close to 1.91:1, and a file no larger than 8 MB.

Which Open Graph tags are required?

ogp.me lists four: og:title, og:type, og:image and og:url.

Do I need Twitter card tags if I have Open Graph tags?

You need at least twitter:card to choose the card type.

Why does my link preview show the wrong image?

Usually caching or JavaScript. Platforms cache previews by URL, and crawlers that do not run JavaScript only see the tags in the server's HTML.