Open Graph Tags Complete Guide - og:title, Image & Twitter Cards (2026)

When someone pastes your URL into Facebook, LinkedIn, Slack, Discord, or iMessage, those apps do not guess from the visible page. They look for Open Graph tags in the HTML head: a title, a description, an image, a type, and a canonical URL. Get those right and the share card looks like a designed preview. Skip them and you get a random image, a truncated title, or no card at all. This guide walks through the protocol, the tags that matter, how they differ from the HTML title and meta description, and the mistakes that break previews. When you want markup you can paste, use the Open Graph Tag Generator - it runs in your browser and never uploads the fields.

What Open Graph tags are

Open Graph is a small vocabulary of meta tags. Each tag is a name/value pair in the document head. The name uses the og: prefix. Crawlers from social apps fetch the public URL, read those tags, and build a card: image on top or to the side, title, description, and often a site name. The protocol started at Facebook. It is now the default share format across most of the web.

• Facebook and Instagram link previews read og:* first.
• LinkedIn, Slack, Discord, Telegram, and iMessage reuse the same tags.
• X (Twitter) can fall back to Open Graph, but twitter:* tags win when both exist.
• Search engines still use the HTML title and meta description for the SERP. OG is for shares, not for the blue link on Google.

A tag looks like meta property="og:title" content="Your share title". The property name is the key. The content attribute is the value. Special characters in the value must be escaped so the HTML stays valid. The generator handles that escaping for you.

The four tags every page needs

Facebook's basic object needs four properties. If any of them is missing or empty, many crawlers invent a fallback - or show a broken card.

• og:title - the headline on the card. Keep it short and specific. It can differ from the HTML title you want on Google.
• og:type - what kind of object this is. website is the default for a homepage or landing page. article is right for a blog post.
• og:image - an absolute https URL to the preview image. Relative paths (/images/og.png) fail because the crawler has no page context to resolve them.
• og:url - the canonical URL of this object. It should match the public URL people share, including https and the preferred host (www or apex).

Those four are the minimum. A card with only a title and no image looks unfinished. A card with an image but a vague title wastes the click.

Recommended extras

• og:description - one or two sentences under the title. Aim for about 70 to 200 characters. This is not the same string as your meta description unless you want it to be.
• og:site_name - your brand. LinkedIn and Slack often show it under the title so the source is obvious.
• og:locale - language and region in underscore form, such as en_US, es_ES, or pt_BR. Use this when the page is not English.

You can add richer type-specific fields later (article:author, product:price:amount). Start with the core set. A complete basic object beats a half-filled product object.

og:type values you will actually use

The type tells the crawler how to treat the URL. Wrong types rarely break the card, but they change which extra fields make sense and how some apps group the object.

• website - homepages, category indexes, and generic landing pages.
• article - blog posts, news, and how-to guides. Pair with a dated URL and a unique image.
• product - a single product or pricing page. Add a clear title and a hero shot.
• profile - a person or author page.

If you are unsure, website is safe. Do not invent custom types. Crawlers ignore names they do not know.

og:image rules

The image is the first thing people see. A weak or missing image is the most common reason a share looks cheap.

• Use 1200 x 630 pixels for a landscape card. That ratio (about 1.91:1) is what Facebook and LinkedIn expect.
• Stay above 600 x 315 so the crawler does not fall back to a tiny thumbnail.
• The URL must be absolute and https. Host the file on a public CDN or your own origin. Login walls and robots.txt blocks hide the image from crawlers.
• Keep the file reasonably small (well under 8 MB). PNG or JPEG is fine. Avoid WebP if you still need older Facebook caches to fetch it.
• Put the subject in the center. Some apps crop the sides on mobile.

Twitter Cards vs Open Graph

X can read og:title, og:description, and og:image. It also has its own twitter:* tags. If both are present, twitter:* wins on X and og:* still wins everywhere else. That is why most pages emit both.

• twitter:card - summary_large_image when you have a wide image, or summary when you do not.
• twitter:title, twitter:description, twitter:image - usually the same values as the matching og:* tags.
• You do not need a Twitter site handle for a basic large-image card.

If you only publish Open Graph, X will often still show a card. If you only publish Twitter tags, Facebook and LinkedIn will not. Open Graph is the shared base. Twitter tags are the extra layer for X.

OG vs HTML title vs meta description

Three strings, three jobs. Mixing them up is how you get a great SERP snippet and a weak Slack card - or the reverse.

• HTML title - the search result title and the browser tab. Target transactional or informational queries here.
• Meta description - the SERP snippet under that title. Google may rewrite it.
• og:title and og:description - the social card. Write for a person who already has the link, not for a keyword.

A tool page can keep a transactional HTML title (Free Open Graph Tag Generator) and a clearer og:title (Generate Open Graph tags for this article). A blog post can do the opposite: a keyword-led HTML title and a more human og:title. Check the SERP snippet with the Meta Description Checker. Check the share card with OG tags.

Worked example

A blog post about Open Graph itself might use these values. After you paste them into the head of the public URL, a crawler should see a complete object.

• og:title - Open Graph tags explained
• og:description - What og:title, og:image, og:url, and og:type do, plus Twitter Cards and image size.
• og:type - article
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - a 1200 x 630 PNG or JPEG on https
• og:site_name - ToolsMinify
• og:locale - en_US
• twitter:card - summary_large_image, with the same title, description, and image

Quotes and ampersands in a title must become " and & inside the content attribute. If you hand-write tags and the page fails to parse, that escaping is the first place to look.

Common mistakes

• Relative og:image or og:url. Both must be absolute.
• og:url that does not match the shared link (http vs https, apex vs www, missing locale prefix).
• An image under 200 x 200, or a 1:1 crop that LinkedIn then letterboxes.
• Tags in the body instead of the head. Crawlers look in the head.
• Blocking the image or the page in robots.txt. Social crawlers still need to fetch them.
• Stale Facebook cache. After you change tags, rescrape the URL in Facebook's Sharing Debugger. Other apps have their own caches.
• Duplicate conflicting og:title tags. The first one usually wins, and you will not like which one it is.
• Putting secrets or unpublished draft copy into og:description. The tags are public the moment the URL is.

Frequently asked questions

Are Open Graph tags a Google ranking factor?

Not directly. Google uses the HTML title, the meta description, and the page content for search. OG tags help people share the page with a clean card. Better shares can bring links and visits. That is an indirect effect, not a ranking switch.

Which Open Graph tags are required?

Start with og:title, og:type, og:image, and og:url. Add og:description, og:site_name, and og:locale when you have them. Empty tags are worse than omitted tags.

What size should og:image be?

1200 x 630 pixels is the usual landscape size. Stay above 600 x 315. Use an absolute https URL. Center the subject so mobile crops do not cut off the text on the image.

Do I need Twitter Card tags if I already have Open Graph?

X can read OG tags, but twitter:card plus matching title, description, and image give you explicit control on that network. Facebook and LinkedIn ignore twitter:* and still need og:*. Emit both when you can.

Why does Facebook still show the old image?

Facebook caches the first scrape. Change the image URL (or wait), then run the URL through Facebook's Sharing Debugger and request a new scrape. LinkedIn and Slack have similar caches. Changing only the file bytes at the same URL often does nothing.

Where do I put the HTML?

Inside the head of the public HTML document, or in your framework's metadata API so it renders in the head. The tags must be visible on the exact URL you set as og:url. For a click-by-click walkthrough of the builder, see How to Use Open Graph Tag Generator.

Build the tags in your browser

Fill title, description, URL, and image, then copy the live HTML. Nothing is uploaded:

• Open Graph Tag Generator - build og:* and optional Twitter Card tags, with a social preview.
• How to Use Open Graph Tag Generator - step-by-step guide for the same tool.
• Meta Description Checker & SERP Preview - check the search snippet, not the share card.
• Slug Generator - clean URL slugs for the page you will share.
• All SEO tools - the full category index.