Open Graph tags (OG tags) are meta tags in the head of a page. They tell social networks and chat apps what to show when someone shares the link: the title, the description, and the image.
A template you can copy
This set covers X, Facebook, LinkedIn, Slack, Discord, WhatsApp, and iMessage.
<meta property="og:title" content="Invoices that send themselves" />
<meta property="og:description" content="Acme sends, tracks, and reconciles invoices so your team does not have to." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="Acme" />
<meta property="og:image" content="https://example.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Acme: invoices that send themselves" />
<meta name="twitter:card" content="summary_large_image" />The four required tags
| Tag | What it sets | Guide |
|---|---|---|
og:title | The headline of the preview. | og:title |
og:type | The kind of page: website or article in most cases. | og:type |
og:image | The image of the preview. 1200×630 pixels. | og:image |
og:url | The canonical address of the page. | og:url |
Optional tags
| Tag | What it sets |
|---|---|
og:description | One or two sentences below the title. Keep it below 155 characters. |
og:site_name | The name of the site, such as "Acme". Slack and Discord show it above the title. |
og:locale | The language of the page. The default is en_US. See og:locale. |
og:locale:alternate | Other languages in which the page exists. |
og:video | The URL of a video file for the page. |
og:audio | The URL of an audio file for the page. |
og:determiner | The word before the title in a sentence: a, an, the. Rarely used. |
Image properties
| Tag | What it sets |
|---|---|
og:image:width | Width in pixels. Use 1200. |
og:image:height | Height in pixels. Use 630. |
og:image:type | MIME type: image/png or image/jpeg. |
og:image:alt | Text for people who cannot see the image. |
og:image:secure_url | An https URL, when og:image is http. |
The OG image size guide has the size limits for each platform.
Twitter card tags
X reads Open Graph tags when its own tags are missing. You need only one X tag:
| Tag | What it sets |
|---|---|
twitter:card | summary_large_image for a full-width image. summary for a small square thumbnail. |
twitter:site | The @handle of the site. Optional. |
twitter:creator | The @handle of the author. Optional. |
twitter:title, twitter:description, twitter:image | Only when the text or the image must be different on X. |
Note the attribute. Open Graph tags use property="og:...". Twitter tags use name="twitter:...".
Best practices
- Put the tags in the server HTML. Crawlers do not run JavaScript.
- Use absolute https URLs for
og:imageandog:url. - Give each page its own title, description, URL, and image. A site where all pages share the home page tags gets the home page preview for all links.
- Keep the title below 60 characters and the description below 155.
- Make the image 1200×630 and below 1 MB. Use the OG image generator or the templates.
- Add alt text with
og:image:alt. - Test before you share. Platforms keep a copy of the first preview for days.
Do Open Graph tags help SEO?
Not directly. Search engines do not use OG tags to rank a page. They change how your link looks when people share it, and a better preview gets more clicks. Those visits and the links that follow are the SEO gain.
Test your Open Graph tags
Paste a URL into the Open Graph checker. It lists all tags on the page, measures the image, and shows the preview on four platforms. For examples of the result, browse the OG image gallery.