` tag. Social copy sometimes benefits from a slightly different phrasing, though most implementations use the same value. ```html <meta property="og:title" content="Open Graph and Social Meta Tags"> ``` **`og:description`** A short description shown beneath the title. Aim for 100–150 characters. Platforms truncate at different lengths, so front-load the key information. ```html <meta property="og:description" content="How og:title, og:image, and Twitter cards control social link previews, and what breaks them."> ``` **`og:image`** The image shown in the preview. Must be an absolute URL: a relative path like `/images/og.jpg` fails completely. ```html <meta property="og:image" content="https://example.com/images/open-graph-og.jpg"> ``` **`og:url`** The canonical URL for the page. Ensures all shares, likes, and comment counts consolidate to one URL rather than splitting across URL variants (with and without trailing slashes, with query parameters, etc.). ```html <meta property="og:url" content="https://example.com/on-page-seo/open-graph/"> ``` ## Additional tags worth including **`og:type`** The content type. Use `article` for blog posts and documentation pages, `website` for the homepage and category pages. The protocol says any page without a type "should be treated as `og:type` website".[^1] ```html <meta property="og:type" content="article"> ``` **`og:site_name`** Your brand name, shown separately from the page title in many previews. ```html <meta property="og:site_name" content="SEO Handbook"> ``` **`article:published_time` and `article:modified_time`** For pages with `og:type: article`. Machine-readable timestamps that some platforms display alongside the preview. ```html <meta property="article:published_time" content="2026-05-07T00:00:00Z"> <meta property="article:modified_time" content="2026-05-07T00:00:00Z"> ``` ## Twitter/X cards X (formerly Twitter) has its own meta tag system running in parallel with Open Graph. Where both exist, X prefers its own tags; where X tags are absent, it falls back to OG. The minimum implementation: ```html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Open Graph and Social Meta Tags"> <meta name="twitter:description" content="How og:title, og:image, and Twitter cards control social link previews."> <meta name="twitter:image" content="https://example.com/images/open-graph-og.jpg"> ``` `twitter:card` accepts `summary` (small square image) or `summary_large_image` (full-width image). Use `summary_large_image` for content pages. Without this tag, X defaults to a small `summary` card regardless of image dimensions. ## Image specifications Image quality has a visible effect on preview click-through. Requirements: - **Dimensions:** 1200×630 px is the standard. Major platforms render a 1.91:1 ratio without cropping. Images of different proportions are letterboxed or cropped unpredictably. - **Format:** JPG or PNG. WebP is accepted by most platforms but not universally. - **File size:** keep under 1 MB. Some platforms reject larger files without showing an error. - **Absolute URL:** the URL must include the protocol and domain. Relative paths fail. - **Unique per page:** a single sitewide default image produces a generic preview for every page. Individual page images perform significantly better. ## What breaks Open Graph link previews? **Missing `og:image` or a relative image URL.** A common cause of a blank or broken preview. **Cached stale data.** Platforms cache OG data aggressively. After updating a preview image or title, use the platform's debugger tool to force a re-fetch. **Bot access blocked.** If the page requires authentication or is blocked in `robots.txt`, crawlers cannot read the OG tags and the preview falls back to nothing. **Image URL returns a 404.** The image URL must be reachable by an external crawler, not by authenticated users alone. **`og:url` pointing to a redirect.** Platforms follow the URL you specify. If it redirects, some platforms display the final destination URL rather than the canonical you intended. ## Testing and auditing - **Facebook / Meta Sharing Debugger.** Shows exactly what OG tags Facebook reads, with a "Scrape Again" button to clear the cache. - **LinkedIn Post Inspector.** Inspects OG tags as LinkedIn reads them. - **X (Twitter) cards.** X retired its Card Validator in 2022 and has not replaced it with a first-party card preview tool. Use the post composer (paste your URL into a new post) to see an actual card preview without publishing. - **OpenGraph.xyz.** A neutral third-party previewer. Useful for checking without a platform login. For site-wide audits, Screaming Frog and Ahrefs site audit both flag missing or duplicate OG tags across a crawl. ## Frequently asked questions ### Does Open Graph affect Google rankings? No, not directly. Google does not use `og:` tags as ranking signals. Googlebot reads them but treats them as supplementary metadata. Their value is in social sharing performance and link previews in messaging apps; any AI role is unconfirmed. ### Should `og:title` match the `<title>` tag? They can differ. The `<title>` tag is optimised for SERPs; `og:title` is optimised for social sharing. In practice, most implementations use the same value unless there is a specific reason to differentiate. ### Do I need Twitter card tags if I already have Open Graph? Technically no. X falls back to OG tags if its own are absent. But `twitter:card` is required to activate a large image preview: without it, X defaults to `summary` regardless of image dimensions. Adding the minimum `twitter:card` tag is worthwhile. [^1]: [The Open Graph protocol](https://ogp.me/)

--- title: "Open Graph and Social Meta Tags" description: "What Open Graph and Twitter/X card meta tags do, how to implement them correctly, and what breaks social link previews." tldr: "Open Graph tags (og:title, og:description, og:image, og:url) control how your pages appear when shared on social platforms and messaging apps. Twitter/X card tags serve the same function for X. Neither is a direct Google ranking factor, but both affect click-through rate from social shares. Missing or misconfigured OG tags produce broken or generic link previews." publishDate: 2026-05-07 updatedDate: 2026-09-14 author: "Liam Hayward" --- Open Graph is a protocol, introduced by Facebook in 2010, that lets a webpage set how it looks when shared as a link: its title, image, description and content type. Without the tags, platforms infer what to show, with inconsistent results. It does not change where a page ranks in Google; its value is in the clicks a page earns when it is shared on social platforms and in messaging apps. ## Why does Open Graph matter for SEO? Open Graph has no direct effect on Google search rankings. It matters for a few reasons that still affect organic performance. **Click-through rate from social.** A well-formed social preview generates more clicks than a blank or auto-generated one. Social shares drive traffic, and that traffic contributes to brand signals and potential link acquisition over time. **Messaging and non-search channels.** WhatsApp, Slack, Discord, iMessage, and LinkedIn all render Open Graph previews. A broken preview in a Slack channel is a missed opportunity for branded referral traffic. **A possible, unconfirmed AI-context role.** Some SEOs suggest AI search tools may read `og:description` as a fallback for page context when the meta description is absent. No platform has confirmed that its systems weight OG tags, so treat this as plausible rather than established, and implement OG tags for the confirmed benefits above. ## What are the essential Open Graph tags? The protocol itself lists `og:title`, `og:type`, `og:image` and `og:url` as its four required properties and files `og:description` under "optional metadata".[^1] The four that decide what a preview looks like are a different set, and every public page should have them: **`og:title`** The title shown in the preview. Can differ from the `` tag. Social copy sometimes benefits from a slightly different phrasing, though most implementations use the same value. ```html <meta property="og:title" content="Open Graph and Social Meta Tags"> ``` **`og:description`** A short description shown beneath the title. Aim for 100–150 characters. Platforms truncate at different lengths, so front-load the key information. ```html <meta property="og:description" content="How og:title, og:image, and Twitter cards control social link previews, and what breaks them."> ``` **`og:image`** The image shown in the preview. Must be an absolute URL: a relative path like `/images/og.jpg` fails completely. ```html <meta property="og:image" content="https://example.com/images/open-graph-og.jpg"> ``` **`og:url`** The canonical URL for the page. Ensures all shares, likes, and comment counts consolidate to one URL rather than splitting across URL variants (with and without trailing slashes, with query parameters, etc.). ```html <meta property="og:url" content="https://example.com/on-page-seo/open-graph/"> ``` ## Additional tags worth including **`og:type`** The content type. Use `article` for blog posts and documentation pages, `website` for the homepage and category pages. The protocol says any page without a type "should be treated as `og:type` website".[^1] ```html <meta property="og:type" content="article"> ``` **`og:site_name`** Your brand name, shown separately from the page title in many previews. ```html <meta property="og:site_name" content="SEO Handbook"> ``` **`article:published_time` and `article:modified_time`** For pages with `og:type: article`. Machine-readable timestamps that some platforms display alongside the preview. ```html <meta property="article:published_time" content="2026-05-07T00:00:00Z"> <meta property="article:modified_time" content="2026-05-07T00:00:00Z"> ``` ## Twitter/X cards X (formerly Twitter) has its own meta tag system running in parallel with Open Graph. Where both exist, X prefers its own tags; where X tags are absent, it falls back to OG. The minimum implementation: ```html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Open Graph and Social Meta Tags"> <meta name="twitter:description" content="How og:title, og:image, and Twitter cards control social link previews."> <meta name="twitter:image" content="https://example.com/images/open-graph-og.jpg"> ``` `twitter:card` accepts `summary` (small square image) or `summary_large_image` (full-width image). Use `summary_large_image` for content pages. Without this tag, X defaults to a small `summary` card regardless of image dimensions. ## Image specifications Image quality has a visible effect on preview click-through. Requirements: - **Dimensions:** 1200×630 px is the standard. Major platforms render a 1.91:1 ratio without cropping. Images of different proportions are letterboxed or cropped unpredictably. - **Format:** JPG or PNG. WebP is accepted by most platforms but not universally. - **File size:** keep under 1 MB. Some platforms reject larger files without showing an error. - **Absolute URL:** the URL must include the protocol and domain. Relative paths fail. - **Unique per page:** a single sitewide default image produces a generic preview for every page. Individual page images perform significantly better. ## What breaks Open Graph link previews? **Missing `og:image` or a relative image URL.** A common cause of a blank or broken preview. **Cached stale data.** Platforms cache OG data aggressively. After updating a preview image or title, use the platform's debugger tool to force a re-fetch. **Bot access blocked.** If the page requires authentication or is blocked in `robots.txt`, crawlers cannot read the OG tags and the preview falls back to nothing. **Image URL returns a 404.** The image URL must be reachable by an external crawler, not by authenticated users alone. **`og:url` pointing to a redirect.** Platforms follow the URL you specify. If it redirects, some platforms display the final destination URL rather than the canonical you intended. ## Testing and auditing - **Facebook / Meta Sharing Debugger.** Shows exactly what OG tags Facebook reads, with a "Scrape Again" button to clear the cache. - **LinkedIn Post Inspector.** Inspects OG tags as LinkedIn reads them. - **X (Twitter) cards.** X retired its Card Validator in 2022 and has not replaced it with a first-party card preview tool. Use the post composer (paste your URL into a new post) to see an actual card preview without publishing. - **OpenGraph.xyz.** A neutral third-party previewer. Useful for checking without a platform login. For site-wide audits, Screaming Frog and Ahrefs site audit both flag missing or duplicate OG tags across a crawl. ## Frequently asked questions ### Does Open Graph affect Google rankings? No, not directly. Google does not use `og:` tags as ranking signals. Googlebot reads them but treats them as supplementary metadata. Their value is in social sharing performance and link previews in messaging apps; any AI role is unconfirmed. ### Should `og:title` match the `<title>` tag? They can differ. The `<title>` tag is optimised for SERPs; `og:title` is optimised for social sharing. In practice, most implementations use the same value unless there is a specific reason to differentiate. ### Do I need Twitter card tags if I already have Open Graph? Technically no. X falls back to OG tags if its own are absent. But `twitter:card` is required to activate a large image preview: without it, X defaults to `summary` regardless of image dimensions. Adding the minimum `twitter:card` tag is worthwhile. [^1]: [The Open Graph protocol](https://ogp.me/)