Skip to content

Open Graph tags

Also called Open Graph, OG tags, og:image, Open Graph protocol

What are Open Graph tags?

Open Graph tags are <meta> elements, defined by the Open Graph protocol created by Facebook, that tell social networks and messaging apps how to display a page when someone shares its link. The core tags are og:title, og:type, og:image and og:url, usually with og:description and og:site_name. They use the property attribute, for example property="og:title".

A chat bubble showing a user profile and a content card with a tag, representing Open Graph tags.

Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage and many others read Open Graph tags to build link previews. X reads its own Twitter card tags but falls back to Open Graph for the title, description and image when they are missing. Open Graph tags aren’t a Google ranking factor, though Google may use og:title as one source for title links.

Open Graph text can differ from your title tag and meta description. A search title is written for someone looking for an answer; a social title is seen by someone scrolling a feed, so it can be shorter and more conversational. The image matters most: it is usually the largest part of the preview.

Why Open Graph tags matter for SEO

A share with a clear title and large image gets noticed and clicked; a share with no image or the wrong text gets scrolled past. Better previews mean more referral traffic and more people seeing content that might earn links.

Without Open Graph tags, platforms guess, often picking a logo, a cookie banner or the first random image on the page.

How to add Open Graph tags

  1. Add og:title, og:description, og:image, og:url and og:type to the <head> of each page.
  2. Use a large image; 1200 × 630 pixels is the size Facebook recommends for link previews.
  3. Use an absolute URL for og:image and og:url.
  4. Test with Facebook’s Sharing Debugger or LinkedIn’s Post Inspector, which also refresh cached previews.

Open Graph tags example

HTML
<meta property="og:title" content="How to make a sourdough starter">
<meta property="og:description" content="Flour, water and 7 days. A step-by-step guide with photos.">
<meta property="og:image" content="https://example.com/img/starter-og.jpg">
<meta property="og:url" content="https://example.com/guides/sourdough-starter">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Baker’s Notes">

Open Graph tags FAQ

Do Open Graph tags help SEO?

Not directly. They don’t affect Google rankings, but better social previews bring more clicks and visibility, which can lead to links and mentions.

What size should an og:image be?

1200 × 630 pixels is the common recommendation and works well on most platforms.

Related SEO terms

  • Twitter card (X card)

    A Twitter card (now X card) is a set of meta tags that controls how a link looks when posted on X, including its title, description and image.

  • Title tag

    A title tag is the HTML element that names a page. Google often uses it as the clickable headline in results, so it affects rankings and clicks.

  • Meta description

    A meta description is an HTML tag that summarises a page. Google may show it as the snippet under the title; it affects clicks, not rankings.

  • On-page SEO

    On-page SEO is optimising the content and HTML of each page, such as text, title tag, headings, images and internal links, to rank and earn clicks.

  • Structured data

    Structured data is code in a standard format that describes a page’s content to search engines, making it eligible for rich results.

Back to the SEO glossary

Put the terms to work

Every term here is something OpenSEO measures. It is open source: start online in a minute, or run it on your own server.