New format
Open Graph: how to style a link from social to your site
Open Graph controls how a link to your site looks in a preview: title, text, image, object type. Without markup, a network often grabs a random fragment or a tiny image — clicks and trust drop.
Below: why OG matters, base tags, how to check, and common mistakes. Treat related Open Graph posts in the queue as pointing to this as the canon.
Why you need Open Graph
When someone pastes a URL into a post or message, the platform builds a card. OG says which image to take, which title and text to show, and which canonical URL is the object.
The protocol started in the Facebook* ecosystem, but other networks and services adopted the tags. For business it’s control of the first impression of a site link — not “traffic from thin air.”
What you control:
- preview title and description
- image
- object URL
- type (article, product, website)
Base tags and example
In the page head place meta with `property` and `content`. Set `og:url` to the page’s canonical address. `og:type` for articles is often `article`, for the homepage `website`, for a product `product` (if you support extensions).
Image — absolute URL. Description — 1–2 sentences without stuffing; title readable, not a keyword sheet.
Minimum set:
- `og:title` — card headline
- `og:description` — short text
- `og:image` — preview
- `og:url` — page canon
- `og:type` — object type
- `og:locale` — e.g. `en_US`
Images and video
Bad previews often come from a tiny, vertical, or auth-gated image file. Keep a horizontal frame, enough resolution/weight, and a stable URL (not a one-time token).
For video OG allows extra properties (`og:video` and related) — useful if you actually serve a clip, not only a poster. Otherwise a strong `og:image` is enough.
Image check:
- opens via a direct link
- https without mixed content
- logo/face not cropped at edges
- one current version at the URL (no CDN surprises)
How to verify the markup
View Source / DevTools: are og tags on the right page. Then — official preview debuggers for the platforms you use (where available). Confirm your title/image loaded, not a random fragment.
After changing the image, clear the preview cache. Make sure the server doesn’t serve different HTML to the social bot (cloaking isn’t allowed).
Verification checklist:
- tags in head, not body
- one sensible set per URL
- `og:url` = canon
- preview matches the intent
- mobile share stays readable
Typical mistakes
Relative path in `og:image`, broken image, one default for every article (“one cover for the whole site”), title from a stuffed meta title, `og:url` pointing home from inner pages.
Conflict with canonical: preview shows one URL, canon another — confusing for people and UTM analytics. Align them.
Often kills CTR:
- text cut mid-word
- watermark across the frame
- clickbait that doesn’t match the page
- stale preview from cache
Rollout practice
In CMS templates set fields: title/description/image for OG separately or inherited from SEO fields. Product cards need their own previews. Add a check to the content release checklist.
OG doesn’t replace content and ads: it makes the jump from social cleaner. Measure post CTR and landing bounce — not “tags present” as a KPI.
For the week:
- OG on home and 5 key URLs
- preview check
- rule for new articles
- align with canon and UTM
FAQ
Is Open Graph a search ranking factor?
It barely participates directly in search rankings. It’s about CTR and recognition on share — and sometimes in messengers.
Where should you put the tags?
In the page `<head>`: `meta property="og:…"`. On a CMS — SEO plugin or template; on static — in the layout.
Which tags are required?
Minimum: `og:title`, `og:type`, `og:image`, `og:url`. Useful to add `og:description` and `og:locale`.
How does OG differ from Twitter Card?
Same preview idea, different meta names. Many networks read OG; for X/Twitter you sometimes also add card tags.
Why doesn’t the preview update?
Social cache. After edits — debugger / preview cache clear for the URL. Confirm you serve current HTML without old CDN cache.
What image size should you use?
Roughly ~1200×630 px, absolute https URL, file reachable without auth. Don’t crop important text at the edges.
Do you need OG on every page?
On pages people share: articles, products, landings. On utility pages — optional.
Does OG replace title and description?
No. Title/description are for search and the tab; OG is for share previews. They can share meaning, but they’re different layers.
Shared link shows a random crop — and the preview won’t refresh?
We’ll set og:title/image/url to the canon and clear preview cache — CTR from shares, not ranking magic.
Discuss the task
