Open Graph and Structured Data
Introduction
Search snippets are not the only place your HTML metadata matters. When someone shares a link on Slack, Discord, WeChat, or X, platforms read Open Graph and Twitter Card tags to build a rich preview. Structured data (often JSON-LD) helps search engines understand articles, FAQs, and breadcrumbs. This chapter covers social meta tags and a practical introduction to Schema.org markup.
Prerequisites
- HTML SEO basics
- HTML document structure
- Comfort editing
<head>metadata
Open Graph Basics
Open Graph (OG) is a convention for describing a page in <meta> tags. Platforms use it for link previews.
Minimal set:
<head>
<meta charset="UTF-8">
<title>HTML SEO Basics — hello_code</title>
<meta property="og:title" content="HTML SEO Basics">
<meta property="og:description" content="Title tags, headings, and semantic HTML for search and sharing.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/docs/html/23_html_seo_basics">
<meta property="og:image" content="https://example.com/images/og/html-seo.png">
</head>| Property | Purpose |
|---|---|
og:title | Preview title |
og:description | Preview summary |
og:type | Content type (website, article, etc.) |
og:url | Canonical URL of the page |
og:image | Preview image URL (absolute HTTPS recommended) |
OG tags use property, not name:
<meta property="og:title" content="My Page">Align OG with Page Content
Keep OG values consistent with your page, but they can differ slightly from <title> and meta description:
<title>— browser tab and search (often longer branding)og:title— social card (can be shorter)og:image— visual hook for shares (1200×630 px is a common target)
Example:
<title>Chapter 24: Open Graph and Structured Data — hello_code HTML</title>
<meta name="description" content="Social preview tags and JSON-LD structured data for articles and FAQs.">
<meta property="og:title" content="Open Graph and Structured Data">
<meta property="og:description" content="Make link previews and rich search results work with HTML metadata.">
<meta property="og:image" content="https://example.com/og/html-chapter-24.png">
<meta property="og:url" content="https://example.com/docs/html/24_open_graph_and_structured_data">Tip
Use Absolute URLs for Images
og:image should be a full https:// URL. Relative paths often break on social crawlers.
Twitter Cards
Twitter/X supports its own tags (many platforms also read OG):
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Open Graph and Structured Data">
<meta name="twitter:description" content="Social preview tags and JSON-LD for rich results.">
<meta name="twitter:image" content="https://example.com/og/html-chapter-24.png">twitter:card | Layout |
|---|---|
summary | Small square image |
summary_large_image | Large image on top (common for articles) |
If you only maintain OG tags, many platforms still work—but adding Twitter tags gives explicit control on X.
Locale and Site Name (Optional)
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="hello_code">Useful for multi-language sites and brand recognition in previews.
Testing Share Previews
Before launching, validate tags with:
- Facebook Sharing Debugger (also used by some OG consumers)
- Twitter Card Validator (if available for your account)
- LinkedIn Post Inspector
Steps:
- Deploy or expose a public URL (localhost often fails for crawlers).
- Paste the URL into a debugger.
- Fix missing
og:image, wrong URL, or cached old previews. - Re-scrape after changes.
Caches can stick for hours—debuggers usually offer a refresh/scrape again button.
Structured Data Overview
Structured data is machine-readable information about the page. Search engines may use it for rich results (FAQ dropdowns, article dates, breadcrumbs).
Common format on the web: JSON-LD inside a <script> tag:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Open Graph and Structured Data",
"author": {
"@type": "Organization",
"name": "hello_code"
},
"datePublished": "2026-05-25"
}
</script>JSON-LD does not replace visible HTML. It describes content that should already appear on the page.
Schema.org Types
Schema.org defines vocabulary types. Common ones:
| Type | Use for |
|---|---|
Article | Blog posts, tutorials, news |
WebPage | Generic pages |
FAQPage | FAQ with questions and answers |
BreadcrumbList | Navigation trail |
Organization | Site or company info |
Article Example
FAQPage Example
If your page has real FAQ content in HTML:
The visible FAQ and JSON-LD must match. Do not mark up content that users cannot see.
BreadcrumbList Example
When You Need Structured Data
Add JSON-LD when:
- you want rich FAQ or how-to results (and content qualifies)
- you publish articles with clear author/date
- breadcrumbs help users in search results
Skip it when:
- the page is a simple internal tool with no search goal
- you cannot keep JSON-LD in sync with visible content
- you are only learning HTML basics (OG + title/description are enough)
Warning
No Guarantee of Rich Results
Valid structured data is a prerequisite, not a promise. Search engines decide whether to show enhanced snippets.
Validate Structured Data
Use Google's Rich Results Test or Schema Markup Validator tools:
- Paste URL or code snippet.
- Fix errors (invalid JSON, wrong type, missing fields).
- Re-test after deploy.
Invalid JSON breaks the entire block—validate carefully.
Complete Head Example
FAQ
Are Open Graph tags required?
No, but without them share previews look plain or pull random page text/images.
Can I use only Twitter tags?
Many apps read OG first. Supporting both is safest for major platforms.
Is JSON-LD visible on the page?
No. It lives in <script type="application/ld+json">. Users still need normal HTML content.
Will FAQ schema always show in Google?
No. Google must trust the page and choose to display FAQ rich results.
What comes next?
Linking CSS and JavaScript — how HTML connects to stylesheets and scripts.