Help us fix this page
If you found a broken link, missing page, or incorrect redirect, please let us know. Your report helps us improve the website for everyone.
A Comprehensive Guide to Metadata: Open Graph, X Cards, and Dublin Core
Metadata is the foundation of how we share, categorise, and discover content online. Though often overlooked, proper metadata implementation ensures that digital assets are well-represented across platforms, search engines, and databases.
This guide explores three widely-used metadata formats-Open Graph, X Cards (formerly Twitter Cards), and Dublin Core-detailing their purpose, implementation, and current best practices for 2026.
TL;DR
- Open Graph is the de facto standard for social sharing, supported by Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and most platforms that generate link previews.
- X (formerly Twitter) Cards still use
twitter:*tags, but X’s crawler falls back to Open Graph tags when Twitter-specific tags are absent. Onlytwitter:cardis strictly required. - Dublin Core remains the standard for library, museum, and academic resource description, with 15 core elements and an active maintenance agency (DCMI Usage Board) for ISO 15836.
- Duplicate
og:*andtwitter:*tags are unnecessary-Twitter has supported Open Graph fallback since 2021. Useog:*for all platforms and add onlytwitter:cardfor X. - Absolute HTTPS URLs are mandatory for
og:imageandtwitter:image-relative paths fail because social crawlers request images directly without a base URL context.
What Is Metadata?
Metadata is “data about data”-descriptive information that helps both machines and users understand what a piece of digital content represents.
| Type | Description | Example |
|---|---|---|
| Descriptive metadata | Basic information about a resource | Title, author, publication date |
| Structural metadata | How a resource is organised | Chapters in a book, page hierarchy |
| Administrative metadata | Resource management information | File format, access rights, creation date |
On the web, metadata serves three critical functions:
- How content is shared across social platforms (Open Graph, X Cards)
- How search engines understand and rank web pages (SEO)
- How digital resources are archived and retrieved (Dublin Core)
Open Graph: The Universal Social Sharing Standard
The Open Graph protocol was introduced by Facebook in 2010 to allow web pages to become “rich objects” within a social graph. It standardises how URLs shared on platforms like Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and Telegram are displayed.
Why Open Graph Matters
According to a 2024 study, pages with fully implemented Open Graph tags experience a 40% higher engagement rate on social shares compared to those without. A/B tests by HubSpot in 2025 showed that a link with an optimised Open Graph image and description achieved a 2.3× higher click-through rate than the same link with a generic auto-generated preview.
Key Open Graph Tags
| Tag | Purpose | Character Limit |
|---|---|---|
og:title | The title of your content | ~60–70 characters (Facebook truncates at ~88, LinkedIn at ~70) |
og:description | A short description of the page | 120–160 characters (Facebook ~200, LinkedIn ~120) |
og:image | URL to an image representing the content | Must be absolute HTTPS URL |
og:url | The canonical URL of the page | Full absolute URL |
og:type | The type of object (e.g., “article”, “website”, “video”) | One of the defined Open Graph types |
og:site_name | The name of the website | Optional |
og:image:width | Width of the image in pixels | Improves preload performance |
og:image:height | Height of the image in pixels | Improves preload performance |
Minimum Implementation
Every public page should declare at least four properties: og:title, og:description, og:image, and og:url.
<head>
<meta property="og:title" content="Complete Guide to Metadata" />
<meta property="og:description" content="Learn about Open Graph, X Cards, and Dublin Core." />
<meta property="og:image" content="https://example.com/images/metadata.png" />
<meta property="og:url" content="https://example.com/metadata-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</head>Open Graph Image Best Practices
- Recommended size: 1200×630 pixels (1.91:1 aspect ratio)-this is the common optimum for Facebook, LinkedIn, and WhatsApp
- Use HTTPS absolute URLs: Relative paths and protocol-relative URLs fail in Slack, Discord, and other platforms
- Use PNG or JPG: Avoid WebP (some platforms still lack support) and SVG (not rendered)
- Specify width and height:
og:image:widthandog:image:heightimprove preload performance
X Cards: The Platform-Specific Format
X (formerly Twitter) Cards are metadata tags that control how links appear when shared on X. The tags still use the twitter:* naming convention-calling them “X Cards” would make the settings less recognisable.
Current Status (2026)
The platform is now called X, but the protocol names remain twitter:card, twitter:title, twitter:description, and twitter:image.
Important: X removed much of its Twitter Card documentation, but the metadata system still works. Open Graph is the de facto standard, and Twitter Cards have become a compatibility patch.
Key X Card Tags
| Tag | Purpose | Notes |
|---|---|---|
twitter:card | Declares the embed layout | summary or summary_large_image (recommended) |
twitter:title | Embed title | Optional-X falls back to og:title |
twitter:description | Embed summary | Optional-falls back to og:description |
twitter:image | Image URL | Optional-falls back to og:image |
twitter:site | Website’s X handle | Only useful with verified accounts |
twitter:image:alt | Alt text for the image | Up to 420 characters |
Minimum Implementation
Since X falls back to Open Graph tags, you only need to add the card type:
<head>
<!-- Open Graph tags provide the base -->
<meta property="og:title" content="Complete Guide to Metadata" />
<meta property="og:description" content="Learn about Open Graph, X Cards, and Dublin Core." />
<meta property="og:image" content="https://example.com/images/metadata.png" />
<meta property="og:url" content="https://example.com/metadata-guide" />
<!-- X-specific tag (only required one) -->
<meta name="twitter:card" content="summary_large_image" />
</head>Duplicating og:* and twitter:* tags is unnecessary and can cause parser priority conflicts. Twitter has supported Open Graph fallback since 2021.
X Card Image Specifications
| Card Type | Best For | Image Requirements |
|---|---|---|
summary | Pages where the image should appear as a smaller thumbnail | Square image, minimum 144×144 pixels |
summary_large_image | Posts, products, and landing pages where the image should be prominent | Landscape image near 2:1 ratio, minimum 300×157 pixels |
Recommended default: 1200×630 pixels-works well for Open Graph previews and the large X Card format.
File limits: Maximum 4096×4096 pixels, under 5MB, supported formats JPG, PNG, WEBP, GIF (animated uses only the first frame). SVG is not supported.
X Card Validator
X has deprecated its Card Validator tool. To test X Cards:
- Paste the URL into the X composer to see a live preview
- Use Facebook’s Sharing Debugger for Open Graph validation
- Use third-party preview tools
Dublin Core: The Resource Description Standard
The Dublin Core Metadata Initiative (DCMI) developed a standardised set of metadata elements for organising digital resources, particularly in libraries, museums, and academic institutions. Unlike Open Graph and X Cards, which focus on social sharing, Dublin Core is designed for resource description and discovery.
Current Status (2026)
The DCMI Usage Board currently serves as the maintenance agency for ISO 15836. A new Chinese national standard (GB/T 25100.1-2025) for Dublin Core was published on 31 October 2025 and took effect on 1 May 2026.
The 15 Core Dublin Core Elements
Dublin Core evolved from the original 13 elements to a stabilised 15-element set:
| Element | Description |
|---|---|
title | The name of the resource |
creator | The entity responsible for the content |
subject | The topic or subject of the resource |
description | A summary of the resource |
publisher | The organisation that published the resource |
contributor | An entity that contributed to the resource |
date | The date of publication or creation |
type | The nature or genre of the resource |
format | The file format, physical medium, or dimensions |
identifier | An unambiguous reference to the resource (e.g., URL, DOI) |
source | A related resource from which the described resource is derived |
language | The language of the content |
relation | A related resource |
coverage | The spatial or temporal topic of the resource |
rights | Information about rights and usage |
Implementation Example
<head>
<meta name="DC.title" content="Complete Guide to Metadata" />
<meta name="DC.creator" content="John Doe" />
<meta name="DC.subject" content="Metadata" />
<meta name="DC.description" content="A guide to Open Graph, X Cards, and Dublin Core." />
<meta name="DC.publisher" content="Example Publisher" />
<meta name="DC.date" content="2026-08-01" />
<meta name="DC.type" content="Text" />
<meta name="DC.format" content="text/html" />
<meta name="DC.identifier" content="https://example.com/metadata-guide" />
<meta name="DC.language" content="en" />
<meta name="DC.rights" content="© 2026 Example Publisher" />
</head>When to Use Dublin Core
Dublin Core is essential for:
- Libraries and archives: Resource cataloguing and discovery
- Academic institutions: Research publication metadata
- Museums and cultural heritage: Object description
- Digital repositories: Long-term preservation and retrieval
- Government publications: Official document metadata
Fallback Hierarchy
Social platforms and search engines handle metadata in a specific order of precedence:
- Platform-specific tags (e.g.,
twitter:card) - Open Graph tags (
og:title,og:description,og:image) - Standard HTML tags (title, meta description)
- Body content (first heading, first image, etc.)
X (formerly Twitter) will fall back to Open Graph tags when Twitter-specific tags are absent. This means you can implement only og:* tags plus twitter:card and have consistent previews across all platforms.
Testing and Validation
Testing Tools
| Tool | Purpose |
|---|---|
| Facebook Sharing Debugger | Test Open Graph tags and force re-scrape |
| LinkedIn Post Inspector | Test LinkedIn previews |
| X Composer | Test X Cards (Card Validator deprecated) |
| Open Graph Image Preview | Preview tags across platforms |
Common Issues and Fixes
| Issue | Cause | Fix |
|---|---|---|
| Preview shows wrong image | Missing or incorrect og:image | Add absolute HTTPS URL and correct dimensions |
| Preview won’t update | Platform caches first scrape | Force re-scrape with debugger tools |
| No preview at all | Missing required og:* tags | Add minimum four properties |
| Image shows as broken | Relative path used | Use absolute HTTPS URL |
| Title truncated | Too long | Keep under 60–70 characters |
| Description cut off | Too long | Keep at 120–160 characters |
Best Practices for Metadata Implementation
General Principles
| Practice | Why It Matters |
|---|---|
| Use absolute HTTPS URLs | Social crawlers request images directly without base URL context |
| Don’t duplicate Open Graph and X tags | Twitter supports Open Graph fallback since 2021; duplication can cause parser conflicts |
Use summary_large_image as default | Gives shared links more visual weight |
| Use page-specific images | Avoid reusing the same logo or generic fallback everywhere |
Place metadata early in the <head> | Bots that shorten fetching need to read tags early |
| Validate before shipping | Test with debuggers before going live |
Platform-Specific Considerations
| Platform | Notes |
|---|---|
| Truncates title at ~88 characters, description at ~200 | |
| Truncates title at ~70 characters, description at ~120 | |
| X | Falls back to Open Graph; only twitter:card is required |
| Slack/Discord | Use og:* tags; relative paths break previews |
Dynamic Content
For dynamically generated pages (SPAs, CMS-driven sites):
- Server-side rendering (SSR) or static generation (SSG) is required-clientside JavaScript-injected meta tags are not read by crawlers
- Next.js: Use
next/headorgenerateMetadatain App Router - Nuxt 3: Use
useSeoMeta+useOpenGraphcomposables - Static sites: Ensure templates map front matter to meta tags
Key Takeaways
- Open Graph is the universal standard for social sharing. It is supported by Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and most other platforms.
- X Cards are now a compatibility layer. Use only
twitter:card; the platform falls back to Open Graph for title, description, and image. - Pages with full Open Graph implementation see 40% higher engagement on social shares. Optimised images and descriptions achieve 2.3× higher CTR.
- Use the 1.91:1 ratio for social images. 1200×630 pixels works for Facebook, LinkedIn, WhatsApp, and X Cards.
- Dublin Core is maintained and active. The DCMI Usage Board serves as the maintenance agency for ISO 15836, and a new Chinese national standard took effect in May 2026.
- Place metadata early in the
<head>-bots that shorten fetching need to read tags within the first 5–10 KB. - Test before deployment. Use debugger tools-a single malformed URL or missing required field can break previews.
Conclusion
Metadata is the backbone of content sharing and discovery in the digital space. Open Graph has become the de facto standard for social sharing, supported across virtually every platform that generates link previews. X Cards remain relevant but have effectively become a compatibility layer-only twitter:card is strictly required, as X falls back to Open Graph for all other properties.
Dublin Core continues to serve its specialised role in libraries, museums, and academic institutions, with active maintenance and recent standard updates.
For most websites, the practical implementation is straightforward: use og:* tags for all platforms, add twitter:card summary_large_image for X, and use absolute HTTPS URLs for all image references. Test with debuggers before deployment, and ensure metadata is placed early in the for optimal crawler performance.
Resources
- OpenGraph Protocol Official Site
- Twitter Cards Documentation
- Dublin Core Metadata Terms
- Facebook Sharing Debugger
- Twitter Card Validator
- Schema.org – Structured Data
- Moz – Meta Tags Guide
- Google Structured Data Overview
- W3C Metadata Resources
- Copyright Office – Metadata Guidelines
Need help implementing metadata for your website? Playful Sparkle has been engineering digital products since 2004, offering SEO & Digital Marketing, Web Development, and Branding & Strategy services. Our team can help you implement Open Graph, X Cards, and Dublin Core metadata to maximise your content’s visibility across all platforms. Contact us to discuss how we can help you improve your digital presence.
Zsolt Oroszlány
More Insights
Which Price Comparison Website Accepts Your Products?
Category-by-category guide to price comparison websites: which platforms accept erotic products, weapons, tobacco, supplements, alcohol, fashion, and home goods. Heureka, Árukereső, Najnakup, Glami, and Favi policies compared.
Price Comparison Websites: A Complete Guide for E‑Commerce Merchants
Complete guide to price comparison websites for e‑commerce merchants: Heureka.sk, Árukereső.hu, CPC models, XML product feeds, registration steps, and best practices for driving high‑intent traffic.
The New EU Packaging Regulation: What Your Business Needs to Know
EU Packaging Regulation (PPWR) 2026: complete compliance guide covering PFAS bans, heavy metal limits, mandatory Declaration of Conformity, Extended Producer Responsibility, and 2030 recyclability targets. Practical roadmap for businesses.