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.
Recommended optional properties
- 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
| Mistake | What happens | Fix |
|---|---|---|
| Relative image URL | Crawlers cannot resolve it reliably | Use a full https:// URL |
| Tags added by JavaScript | Crawlers that do not run scripts never see them | Render the tags on the server |
| Image behind hotlink protection | The crawler gets a 403 and no picture | Allow requests without a Referer, or serve the image publicly |
| og:url pointing at another page | Shares may be attributed to the wrong URL | Set it to this page's canonical URL |
| name instead of property | Some platforms ignore the tag | Use property="og:..." |
| Tags outside <head> | Parsers may skip them | Move 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.
Try it yourself
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.
Related articles
What Are Redirect Chains? Causes, Impact and How to Fix Them
Several hops where one would do: how redirect chains form, what they cost, and how to find and fix them.
Published
301 vs 302 vs 307 vs 308 Redirects: Which Status Code to Use
Two questions decide the code: is the move permanent, and must the request method be preserved?
Published
What Is Open Graph and How Does It Work?
The meta tags behind every link card: what Open Graph is, how platforms use it, and how a preview is built from your page.
Published