Open Graph tags are HTML meta tags that tell social networks, messaging apps, and collaboration tools how to display a shared webpage link. They define details such as the preview title, description, image, page type, and canonical URL. They improve sharing consistency but do not directly determine search rankings.
Open Graph Tags
What Are Open Graph Tags?
Open Graph tags are HTML meta tags that tell social networks, messaging apps, and collaboration tools how to display a shared webpage link. They sit in a page’s HTML head and provide a preview title, description, image, page type, and preferred URL.
How Open Graph Tags Work When a Link Is Shared
Link previews are usually created before someone opens the page.
- A platform crawler requests the shared URL.
- It reads accessible, server-rendered meta tags in the HTML head.
- It creates a preview card from the title, image, and description.
- It may cache the result, so changes are not always immediate.
Tags added only after JavaScript runs, or hidden by login requirements or robots rules, may not be detected.
Essential Open Graph Meta Tags and Examples
Use one consistent set of properties for each public URL.
| Property | Purpose | Example value |
|---|---|---|
| og:title | Preview headline | Project planning made simple |
| og:description | Short page summary | Plan, assign, and track work in one place. |
| og:image | Preview image URL | https://example.com/images/planning.png |
| og:url | Preferred page URL | https://example.com/planning |
| og:type | Content category | website or article |
| og:site_name, og:locale | Brand and language context | Acme, en_US |
| og:image:width, og:image:height | Image dimensions | 1200, 630 |
Open Graph Tags vs. Standard Meta Tags, Twitter Cards, and Schema Markup
These formats work together but serve different systems.
| Format | Main use |
|---|---|
| Open Graph | Shared-link preview cards |
| HTML title and meta description | Browser tabs and search-result candidates |
| Twitter Cards | X-specific preview preferences |
| Schema markup | Machine-readable search understanding |
Benefits of Open Graph Tags
Good metadata gives shared links a predictable presentation.
- Creates consistent, branded previews.
- Lets teams choose the featured image.
- Clarifies what a link contains before someone opens it.
- Works across articles, product pages, and application routes.
Practical Limits and Common Open Graph Problems
Open Graph improves control, but platforms make the final decision.
- Platforms can crop, omit, or interpret properties differently.
- Cached previews can show outdated content.
- Blocked, redirected, private, or non-absolute image URLs may fail.
- Duplicate tags can produce unpredictable results.
- Tags do not guarantee rankings, clicks, or a specific preview.
How to Create and Check Open Graph Tags
Validate the live page, not only a local development version.
- Set the page’s canonical URL.
- Create a dedicated, publicly reachable OG image.
- Add one authoritative tag set to the HTML head.
- Inspect the live page source to confirm rendered values.
- Test the URL with a sharing debugger or preview tool.
- Refresh the platform cache after changing metadata.
Open Graph Images: Size, Accessibility, and Content Rules
An OG image is the main visual in a link preview. Platforms commonly favor wide landscape images, but dimensions and cropping differ. Use high contrast, large readable text, a public absolute URL, and og:image:alt where supported for useful alternative text.
Open Graph Tags in Emergent Projects
Plan metadata for every public route, landing page, and dynamically generated page. When building with an AI website builder or AI web app builder, Emergent can help teams make page-level metadata part of the delivery workflow.
Start Building
on Emergent today
on Emergent today
Start Building
