What the hell is Open Graph?

Open Graph (OG) tags are meta tags in the <head> of a page that tell social platforms how to render a link. Without them, Facebook, Twitter, and LinkedIn fall back to whatever they can scrape: usually the plain page title, a random slice of body text, and no image.

The tags come from the Open Graph protocol, which Facebook published in 2010 and other platforms adopted. Each one is a <meta> element with a property attribute that starts with og:.

OG tags decide what your link looks like in a feed

The image: og:image picks the picture shown next to your link. Without it, most platforms render a bare row of text.
The headline: og:title sets the preview headline, and it can differ from the page's <title>.
Brand consistency: the same title, description, and image show up on every platform that reads the protocol.
SEO: OG tags are not a ranking factor. Better previews get more clicks from social, and that traffic is worth having on its own.

Better previews raise click-through rate

Click-through rate: a preview with an image and a written headline usually gets clicked more often than a bare URL.
Brand awareness: every share carries your image and your wording instead of the platform's guess.
Traffic: more clicks out of the same number of shares.

Put the tags in the page head

OG tags sit in the <head>, next to <title> and the standard description meta tag. Generators and CMS plugins can write them for you, but the output is still plain HTML you can read and edit. The Open Graph protocol site lists every supported tag. Here are the ones I usually use.

Four tags do most of the work

og:title: Defines the title that appears in the social media preview (ideally under 60 characters).
og:type: Specifies the type of content being shared. Common types are:
- article (for blog posts, news articles)
- website (for general websites)
- book (for books)
- product (for products)
- video (for videos)
- More types are listed in the Open Graph documentation.
og:image: Provides the URL of a high-quality image (ideally at least 1200x630 pixels) that will be displayed in the social media preview.
og:description: A concise (ideally under 200 characters) summary of your content that appears in the social media preview.
Additional Optional OG Tags:
- og:url: The canonical URL of the web page being shared. (default: current page URL)
- og:site_name: The name of your website.
- og:locale: The language of the content.
- og:audio: URL to an audio file (if you have one).
- og:video: URL to a video file (if you have one).

Copy this Open Graph tags example into your HTML head

This post is just an introduction to Open Graph, but if it was a comprehensive guide, the tags would look like this:

<head>
	<title>A Comprehensive Guide to Open Graph (OG) Tags</title>
	<meta
		name="description"
		content="Master OG tags to enhance your social media sharing and engagement."
	/>
 
	<meta
		property="og:title"
		content="A Comprehensive Guide to Open Graph (OG) Tags"
	/>
	<meta property="og:type" content="article" />
	<meta property="og:image" content="https://example.com/banner.jpg" />
	<meta
		property="og:description"
		content="Learn everything you need to know about OG tags, from their importance to implementation."
	/>
	<meta property="og:url" content="https://www.example.com/your-article-page" />
</head>

Once the page is live, run the URL through an Open Graph tags checker or the platform's own debugger. Platforms cache the first scrape they do, so a forced re-scrape is the fastest way to confirm the tags render the way you wrote them.