How to Add Open Graph Tags to a Website

Add og:title, og:description, og:image, og:url, og:type, and twitter:card tags so links to your pages show a title, summary, and image when shared.

Paste a link into Slack, LinkedIn, or a text message and a card appears with a title, description, and image. That card is built from Open Graph tags in the page's head. Without them, platforms guess, and often show nothing.

Add the core Open Graph tags

Inside <head> on each page:

<meta property="og:title" content="How to Replace a Kitchen Tap">
<meta property="og:description" content="Replace a kitchen tap in under an hour with a wrench, plumber's tape, and these steps.">
<meta property="og:url" content="https://yourdomain.com/replace-a-kitchen-tap">
<meta property="og:type" content="article">

The attribute is property, not name. Use website as the og:type for a home page or landing page and article for posts and guides. og:url should match the page's canonical URL.

Add the image

<meta property="og:image" content="https://yourdomain.com/images/kitchen-tap-share.jpg">

Make the image 1200x630 pixels. The URL must be absolute, including https:// and the domain; most scrapers ignore relative paths. Keep important content away from the edges, since some platforms crop the image to a square.

Add the Twitter card tag

X and a few other platforms read the Open Graph tags but need one extra tag to show the large image layout:

<meta name="twitter:card" content="summary_large_image">

This one uses name, not property. With it in place, the og: tags supply the title, description, and image; separate twitter:title and twitter:image tags are optional.

Test with a sharing debugger

Facebook's Sharing Debugger, in Meta's developer tools, and LinkedIn's Post Inspector each take a URL and show the card as it will appear, along with any tag they could not read. Paste the page URL, confirm the title, description, and image render, and fix any warnings about missing or malformed tags.

Platforms cache the first scrape. Once a platform has fetched a page it keeps that version, sometimes for weeks. After changing the tags or the image, run the URL through the debugger again and use its option to scrape the page again so the new card replaces the old one.

More Websites how-tos