Skip to main content
SEO / Web
Published 8 min read

Open Graph Meta Tags Explained

What each og: tag does, which ones you actually need, and the mistakes that quietly break link previews.

Open Graph looks simple, a handful of <meta> tags, but small details decide whether a card works. This reference walks through the tags you will use, the structured image properties, and the mistakes that most often break previews. If you want the big picture first, read What Is Open Graph and How Does It Work?.

The four properties the protocol requires

og:title

The headline shown on the card. Make it specific and complete without the site name, which platforms can show separately. There is no universal length limit; platforms truncate at different points, so keep the important words first. A title of roughly 60 to 90 characters usually displays in full on most cards.

og:type

The kind of thing the page is. Use website for general pages and article for posts and news, and pick a more specific type such as profile or a music or video type when it truly applies. A custom value is allowed by the protocol, but platforms may ignore types they do not recognize.

og:image

The URL of the picture. It should be absolute (starting with https://), reachable without cookies or a login, and an actual image file with a matching Content-Type. A relative URL, a URL that redirects through a login, or an image blocked to crawlers are the most common reasons a card shows no picture. See how to fix an OG image not showing and what size an Open Graph image should be.

og:url

The address the page wants to be known by. Platforms use it to treat variants of a URL (with tracking parameters, for instance) as one page. It should normally equal the canonical URL, as explained in canonical URL vs og:url.

  • og:description: a one- or two-sentence summary. If it is missing, platforms may fall back to the meta description or show no summary at all.
  • og:site_name: the name of the overall site, which some platforms display near the title.
  • og:locale and og:locale:alternate: the language and territory of the content, such as en_US.

Structured image properties

Extra properties describe the image that comes immediately before them. Place them directly after the og:image they belong to.

<meta property="og:image" content="https://example.com/images/card.png">
<meta property="og:image:secure_url" content="https://example.com/images/card.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A diagram of how a link preview is built">

Declaring the width and height lets some platforms lay out the card on the very first share without downloading the image first. Alt text is an accessibility improvement for platforms that support it. Neither is required for a card to appear, and both must match the real image, which the Open Graph & Social Preview Analyzer checks by downloading it.

Repeated tags and duplicates

Repeating og:image is legitimate when you offer several images. Repeating og:title or og:description with different values is not: crawlers pick one, and which one is not guaranteed. Duplicates usually appear when a theme and an SEO plugin both print metadata. Keep one source.

Mistakes that quietly break previews

MistakeWhat happensFix
Relative image URLCrawlers cannot resolve it reliablyUse a full https:// URL
Tags added by JavaScriptCrawlers that do not run scripts never see themRender the tags on the server
Image behind hotlink protectionThe crawler gets a 403 and no pictureAllow requests without a Referer, or serve the image publicly
og:url pointing at another pageShares may be attributed to the wrong URLSet it to this page's canonical URL
name instead of propertySome platforms ignore the tagUse property="og:..."
Tags outside <head>Parsers may skip themMove them into the head

Test the delivered HTML

View-source in your browser shows what the server delivered, while the developer tools Elements panel shows the page after JavaScript has run. For previews, the first is the one that matters.

Frequently asked questions

Which Open Graph tags are required?
The Open Graph protocol lists og:title, og:type, og:image and og:url as required. In practice platforms often tolerate a missing og:type or og:url, and og:description is strongly recommended even though the protocol treats it as optional.
Can I repeat og:image?
Yes. The protocol allows several og:image tags, and the order matters because structured properties such as og:image:width belong to the og:image tag before them. Platforms differ in which image they use, so put your preferred image first.
Should I use name or property?
Use property for Open Graph tags, for example <meta property="og:title" content="...">. Some platforms also accept name, but property is what the protocol specifies.
Does og:title have to match the HTML title?
No. They are separate tags and are often different on purpose, for example a shorter or more engaging headline for social sharing.

The tool that pairs with this guide.

Did this help you untangle your redirects?

If these free developer tools save you time, consider buying me a byte. Your support helps keep DevCraftKit free and growing.

Buy me a byte 💾