Open Graph Examples: Tags and Cards by Page Type
Copy-paste Open Graph examples for blog posts, product pages, homepages, docs, events, and profiles, with notes on the image and text for each card.
By Abid Ali, maintainer of OG Scope
Updated · First published
These Open Graph examples show the tags for the page types most sites publish: a blog post, a product page, a homepage, a documentation page, an event, and an author profile. Each one is a copy-paste block on example.com, followed by notes on why the title, description, and image are written the way they are.
The tag names barely change between examples. The values do. A good card comes from values written for that page, not from a single site-wide default.
The minimum Open Graph example
The Open Graph protocol lists four basic properties: og:title, og:type, og:image, and og:url. Most cards also use og:description, so a practical minimum is five tags:
<meta property="og:title" content="Field notes from a wet week" />
<meta property="og:description" content="What the rain did to the beds, and what was replanted." />
<meta property="og:image" content="https://example.com/covers/wet-week.webp" />
<meta property="og:url" content="https://example.com/blog/wet-week" />
<meta property="og:type" content="article" />Every URL is absolute and uses HTTPS. The image is a public file, not a path behind a login. og:url names the canonical address of the page, not a tracking link. The cheat sheet has the full tag list beyond these five.
Paste a page URL into the OG tag checker to compare its tags against this open graph example and see the estimated cards side by side.
Blog post or article
<meta property="og:type" content="article" />
<meta property="og:title" content="How to repot a fig tree without losing leaves" />
<meta property="og:description" content="Soil mix, pot size, and the one step that prevents leaf drop." />
<meta property="og:image" content="https://example.com/covers/fig-tree.webp" />
<meta property="og:image:alt" content="A fig tree in a terracotta pot beside a bag of soil." />
<meta property="og:url" content="https://example.com/blog/repot-a-fig-tree" />
<meta property="og:site_name" content="Field Notes" />
<meta property="article:published_time" content="2026-01-15T09:00:00Z" />
<meta name="twitter:card" content="summary_large_image" />- og:type is article, and the publish date uses ISO 8601.
- og:title names the post and adds the outcome. The brand lives in og:site_name.
- og:description adds what the title leaves out, rather than repeating it.
- og:image:alt describes the picture for readers who cannot see it.
Product page
<meta property="og:type" content="website" />
<meta property="og:title" content="Oak desk, 140 cm" />
<meta property="og:description" content="Solid oak desk with a built-in cable tray and adjustable feet." />
<meta property="og:image" content="https://example.com/products/oak-desk-1200x630.webp" />
<meta property="og:image:alt" content="An oak desk with a cable tray, on a plain light background." />
<meta property="og:url" content="https://example.com/shop/oak-desk-140" />
<meta property="og:site_name" content="Studio Shop" />
<meta name="twitter:card" content="summary_large_image" />- og:type stays website. Some platforms document a product type, so check the platform before switching.
- The description names the material and the feature that sets the item apart. Prices are left out, because a cached card can keep an old price.
- The image is the product on a plain background, exported at 1200 x 630 so the platform does not crop a tall photo.
Store platforms print these tags from product fields. The guide to Open Graph on Shopify and Magento shows which fields fill each tag.
Homepage
<meta property="og:type" content="website" />
<meta property="og:title" content="Field Notes: a weekly garden journal" />
<meta property="og:description" content="Planting notes, weather logs, and seasonal checklists for small gardens." />
<meta property="og:image" content="https://example.com/covers/home.webp" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="Field Notes" />- og:title is the one place where the brand name leads, followed by what the site is.
- og:url is the root address with a trailing slash, matching the canonical.
- The image is a branded cover, often the logo and a short tagline in large type.
Documentation page
<meta property="og:type" content="article" />
<meta property="og:title" content="Webhooks: retry rules and signatures" />
<meta property="og:description" content="How failed deliveries are retried and how to verify each request signature." />
<meta property="og:image" content="https://example.com/docs/og/webhooks.webp" />
<meta property="og:url" content="https://example.com/docs/webhooks" />
<meta property="og:site_name" content="Example Docs" />- Dated, single-topic docs fit article. A reference page that changes without a date fits website. The og:type guide covers the choice.
- The title names the feature and the task, so a link pasted into a chat explains itself.
- Many docs sites generate one image per section, with the section name on a brand color.
Event or webinar page
<meta property="og:type" content="website" />
<meta property="og:title" content="Spring planting workshop, March 14" />
<meta property="og:description" content="A two-hour hands-on session on seed starting and bed preparation. Free, limited seats." />
<meta property="og:image" content="https://example.com/events/spring-workshop.webp" />
<meta property="og:url" content="https://example.com/events/spring-workshop" />- The date goes in the title, because it is the first thing a reader needs.
- After the event, update the tags or the page. Platforms cache cards, so an old share can keep the original date.
- The core Open Graph protocol has no event type, so website is the usual value.
Author profile
<meta property="og:type" content="profile" />
<meta property="og:title" content="Sam Rivera, garden editor" />
<meta property="og:description" content="Writes the weekly notes on soil, watering, and small-space planting." />
<meta property="og:image" content="https://example.com/authors/sam.webp" />
<meta property="og:url" content="https://example.com/authors/sam" />
<meta property="profile:first_name" content="Sam" />
<meta property="profile:last_name" content="Rivera" />- og:type is profile, with optional first name and last name properties.
- The title pairs the name with the role, so the card says who the person is.
- A square portrait works when the image is cropped to the center.
OG image examples by page type
The image takes up most of a large card, so it carries more weight than any line of text. These open graph image examples describe what tends to work for each page type:
| Page type | Image | Keep in mind |
|---|---|---|
| Blog post | Cover photo or illustration, optional short title | Text large enough to read on a phone |
| Product | The product on a plain background | Center the item; edges can be cropped |
| Homepage | Logo and tagline on a brand color | Avoid small print and dense layouts |
| Docs | Section name on a brand color | One template, values per section |
| Event | Event name and date | Update or retire after the date |
| Profile | Portrait with a plain background | Square subject, centered |
An og image example is only useful if the file loads. The OG image checker shows whether the published URL resolves and reads the pixel size, and the OG image size tool crops a file to 1200 x 630 in the browser.
An Open Graph template to copy
This open graph template fills the gaps the examples share. Replace each bracketed value with text from the page:
<meta property="og:type" content="[website or article]" />
<meta property="og:title" content="[Page name, no brand suffix]" />
<meta property="og:description" content="[One or two sentences that stand alone]" />
<meta property="og:image" content="https://example.com/[path]/[file]-1200x630.webp" />
<meta property="og:image:alt" content="[What the image shows]" />
<meta property="og:url" content="https://example.com/[canonical-path]" />
<meta property="og:site_name" content="[Site name]" />
<meta name="twitter:card" content="summary_large_image" />In a CMS or framework, map each placeholder to a page field: the post title, the excerpt, the cover image, and the canonical URL. Leave og:site_name as a fixed value set once for the whole site.
Pages that do not fit one example
Some pages sit between two types. A recipe page reads like a blog post, so the article example fits. A pricing page is a place a visitor returns to, so the homepage example fits better. A landing page for a campaign follows the product example: a specific title, a plain description of the offer, and an image of the thing being offered. When in doubt, choose website, write values for that one page, and keep og:url on the canonical address.
What these og examples have in common
- Every value is specific to the page. No two pages share a title or image.
- og:title names the page. The brand appears in og:site_name.
- og:description stands alone in one or two sentences.
- Every URL is absolute HTTPS and publicly reachable.
- Each tag appears once, in the HTML the server returns.
The rules that keep an og tags example working on a live site are the same rules shown above: one tag each, real values, and public files. The og:description guide goes deeper on writing the summary line for each of these page types.
Check an example on a live page
- Deploy the tags in the server-rendered head, not with JavaScript.
- Open the page source and confirm each tag appears once.
- Open the og:image URL directly and confirm it loads without a login.
- Run the live URL through a checker and compare the estimated cards.
Pick the open graph meta tags example closest to the page, swap in the real values, then check the published URL in the OG Scope checker before sharing it.