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.
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" />| 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 |
| 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. |
| 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.
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:...".
og:image and og:url.og:image:alt.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.
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.