Open Graph tags are meta elements in a page's head that control how a link looks when shared. The protocol requires four: og:title, og:type, og:image and og:url. Each uses the property attribute, for example meta property="og:title" content="...". Add og:description, og:site_name and image width, height and alt for better previews.
| Property | What to put in it |
|---|---|
| og:title | The title as it should appear in the share card |
| og:type | The kind of object, such as website or article |
| og:image | A full URL to the preview image |
| og:url | The canonical URL that identifies the page |
Updated
Share previews come from a handful of tags that are easy to get subtly wrong: a relative image path, a missing width and height, or a title that only lives in the title element. Fill in the builder to get correct markup, then read what every property does.
Fill in the fields to generate the tags and a rough share card. Real apps each draw their own card, so treat the preview as a guide.
| Property | Purpose | Example value |
|---|---|---|
| og:description | One or two sentences under the title | Same-day roof repairs across Leeds |
| og:site_name | The name of the overall site | Northside Roofing |
| og:locale | Language and territory, default en_US | en_GB |
| og:locale:alternate | Other languages the page exists in | fr_FR |
| og:determiner | Word before the title in a sentence | a, an, the, empty or auto |
| og:image:secure_url | https address for the image | https://example.com/og.jpg |
| og:image:type | MIME type of the image | image/jpeg |
| og:image:width | Width in pixels | 1200 |
| og:image:height | Height in pixels | 630 |
| og:image:alt | Description of the image | Roofer fitting slate tiles |
| og:video / og:audio | A video or audio file to go with the page | https://example.com/tour.mp4 |
| Value | Use for |
|---|---|
| website | Home pages and most other pages |
| article | Blog posts and news stories |
| profile | A page about one person |
| book | A page about a book |
| music.song, music.album, music.playlist, music.radio_station | Music pages |
| video.movie, video.episode, video.tv_show, video.other | Video pages |
Required tags first, then description, site name and the image block with its structured properties.
<meta property="og:title" content="Roof Repair in Leeds | Northside Roofing">
<meta property="og:type" content="website">
<meta property="og:url" content="https://northside.example/roof-repair">
<meta property="og:image" content="https://northside.example/og/roof-repair.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Roofer fitting slate tiles on a terraced house">
<meta property="og:description" content="Same-day leak repairs and free written quotes across Leeds.">
<meta property="og:site_name" content="Northside Roofing">
<meta name="twitter:card" content="summary_large_image">The prefix attribute declares the namespaces. Dates use ISO 8601.
<html prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
<head>
<meta property="og:type" content="article">
<meta property="og:title" content="How to Spot Storm Damage on Your Roof">
<meta property="og:url" content="https://northside.example/blog/storm-damage">
<meta property="og:image" content="https://northside.example/og/storm-damage.jpg">
<meta property="article:published_time" content="2026-10-02T09:00:00Z">
<meta property="article:section" content="Maintenance">
<meta property="article:tag" content="storms">
</head>Properties such as og:image:width describe the most recent og:image declared before them. Order matters: declare the image first, then its width, height, type and alt, then the next image.
og:image:secure_url is an extra https address for the same image. If your og:image already uses https, you do not need it.
website is the default for pages that are not a specific kind of object. article unlocks article:published_time, article:modified_time, article:author, article:section and article:tag.
The protocol also defines book, profile and the music and video groups. Use them only when the page really is that object; a product page is usually website.
The protocol does not set a size. 1200 by 630 pixels is a widely used landscape size and is the size the Next.js documentation uses in its examples. Keep important text away from the edges, since some apps crop the image.
Their job is the share card, not ranking. A clear title and picture can earn more clicks when people pass your link around in chats and feeds. Keep og:title consistent with your title element so every surface describes the page the same way.
The protocol is built on RDFa, which uses the property attribute. The examples on ogp.me write meta property="og:title". Twitter card tags, by contrast, use the name attribute, as in meta name="twitter:card".
Add at least twitter:card, set to summary_large_image if you want the big picture layout. Many apps read the og values for title, description and image when matching twitter tags are absent, but platform rules change, so test your live URL before assuming the fallback works.
Yes. The protocol allows arrays: repeat the og:image tag, and put each image's width, height and alt right after the image they describe. When values conflict, the protocol gives the first tag from the top preference.
Related: Open Graph preview, OG image generator, Meta tag generator, Meta tag checker, Next.js SEO checklist.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.