Meta Tags and Open Graph: SEO, Social Previews, and Rich Cards

We launched a new product page once and pasted the URL into our team Slack to celebrate. The unfurl came back with a stretched fragment of the homepage logo, the wrong description, and the title "localhost." The product itself was perfect; the share preview made it look like a phishing link. Half a day of crawler-debugger work later we shipped the meta tags we should have shipped on day one. Search engines and social platforms see your site through this same narrow keyhole — get the metadata right and the rest of your SEO works much harder.

The HTML <head> Meta You Cannot Skip

Before any social-sharing magic, every page needs a small set of base meta tags. These feed search engines, accessibility tools, and the fallback behavior of every preview generator on the internet.

<head>
  <!-- 인코딩과 뷰포트 — 모든 페이지 필수 -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- 검색 결과의 제목·설명 -->
  <title>JSON Schema Validation: Protecting Your API | BeautiCode</title>
  <meta
    name="description"
    content="A hands-on guide to JSON Schema 2020-12, Ajv, and shipping data
             contracts you can actually trust in production." />

  <!-- 정규 URL — 중복 페이지 신호 합산 -->
  <link rel="canonical" href="https://beauticode.net/blog/json-schema-validation-api-data-contracts" />

  <!-- 색인 정책 -->
  <meta name="robots" content="index, follow, max-image-preview:large" />

  <!-- 언어 -->
  <html lang="en">  <!-- &lt;html&gt; 요소에서 -->
</head>

title — keep under ~60 characters; Google truncates the rest in search results. Put the most descriptive phrase first, the brand last (Topic | Brand).
description — 150-160 characters. Not a direct ranking factor for Google, but it heavily influences click-through rate from search results.
canonical— points search engines at the "official" URL when the same content is reachable from multiple paths (?utm=… variants, mobile/desktop, http/https). Skipping this is the most common cause of duplicate-content penalties.
robots — control indexing without leaving it to defaults. Use index, follow on public content, noindex, follow on utility pages (cookie settings, internal dashboards) you do not want in results but whose links should still pass authority.

Open Graph: How Social Platforms See You

Open Graph is a metadata vocabulary Facebook published in 2010, now used by every major platform that generates link previews — Slack, Discord, Telegram, LinkedIn, Pinterest, iMessage, you name it. Every property is a <meta property="og:..." content="..." /> tag in your <head>.

<meta property="og:title"       content="JSON Schema Validation: Protecting Your API" />
<meta property="og:description" content="A hands-on guide to JSON Schema 2020-12 ..." />
<meta property="og:type"        content="article" />
<meta property="og:url"         content="https://beauticode.net/blog/json-schema-..." />
<meta property="og:image"       content="https://beauticode.net/og/json-schema.png" />
<meta property="og:image:width"  content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt"   content="A diagram of an API gateway validating ..." />
<meta property="og:site_name"   content="BeautiCode" />
<meta property="og:locale"      content="en_US" />

The Five That Matter Most

og:title, og:description — usually duplicate <title> and meta description, but you can tune them differently for social if you have shorter, punchier copy that works on Twitter.
og:type — pick the right entity: website for general pages, article for blog posts, product for e-commerce, video.movie for streaming. Wrong type produces a generic preview.
og:url — the absolute, canonical URL. Crawlers use it to dedupe and to follow back to your site.
og:image — by far the highest-leverage tag. A large, clear image is what gets your link clicked. Aim for 1200×630 pixels (the de-facto standard since 2014), under 5 MB, on an absolute HTTPS URL. Always include the matching og:image:width / og:image:height so platforms can reserve layout space before fetching.

Article-Specific OG

For blog posts and news, OG defines a small extension:

<meta property="article:published_time" content="2026-04-30T09:00:00+09:00" />
<meta property="article:modified_time"  content="2026-05-02T11:30:00+09:00" />
<meta property="article:author"         content="https://beauticode.net/about" />
<meta property="article:section"        content="Cryptography" />
<meta property="article:tag"            content="RSA" />
<meta property="article:tag"            content="Ed25519" />

Twitter Cards: Same Idea, Slightly Different Tags

Twitter (now X) historically read its own twitter:* tags but today falls back to Open Graph for everything except the card type. You only need a handful of explicit Twitter tags:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:site"        content="@beauticode" />
<meta name="twitter:creator"     content="@author_handle" />
<!-- 나머지(title/description/image)는 og:* 가 그대로 적용됨 -->

summary — small thumbnail next to title and description. Compact, good for FAQ-style pages.
summary_large_image — full-width banner above title and description. Recommended for content pages where you have a strong OG image.
player / app — for video and app install cards. Niche; most sites do not need them.

Schema.org JSON-LD: Earning Rich Results

Where Open Graph powers social previews, Schema.org JSON-LDpowers Google's rich results — those star ratings, FAQ accordions, recipe cards, and breadcrumb trails that make a search listing visually dominant. The format is a JSON object inside a <script type="application/ld+json"> tag.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "JSON Schema Validation: Protecting Your API",
  "description": "...",
  "image": "https://beauticode.net/og/json-schema.png",
  "datePublished": "2026-04-27T09:00:00+09:00",
  "dateModified":  "2026-04-27T09:00:00+09:00",
  "author":  { "@type": "Person", "name": "BeautiCode Team" },
  "publisher": {
    "@type": "Organization",
    "name": "BeautiCode",
    "logo": { "@type": "ImageObject", "url": "https://beauticode.net/icon.png" }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://beauticode.net/blog/json-schema-validation-api-data-contracts"
  }
}
</script>

The Schemas Worth Knowing

@type	Use case	Rich result
Article / BlogPosting	Blog post, news	Top stories carousel
Product	E-commerce listing	Price, availability, ratings
FAQPage	Pages with Q&A blocks	Expandable Q&A in SERP
HowTo	Step-by-step tutorials	Numbered steps preview
SoftwareApplication	Web app, tool page	App rating box
BreadcrumbList	Hierarchical navigation	Path under title
Organization / WebSite	Site root	Sitelinks search box, knowledge panel

Multiple JSON-LD blocks are fine; each can describe a different entity. A common pattern: one BlogPosting for the article body, one BreadcrumbList for navigation context, and one FAQPageif the post has a real Q&A section.

Tip: Google's Search Console flags missing recommended fields like license on Dataset/CreativeWork or datePublished on Article. None of these warnings are penalties, but they do gate eligibility for certain rich result formats.

Generating Open Graph Images

A static OG image works for the homepage, but content sites quickly outgrow a single thumbnail. Three patterns scale:

Build-time generation — Next.js opengraph-image.tsx (or ImageResponse API) renders a JSX template into a 1200×630 PNG at build or request time. Per-page images, no manual design work.
On-demand image CDN — Cloudinary, imgix, Vercel OG. Pass the title and a template ID in a URL and get back a rendered image. Cached after first hit.
Static fallback — one well-designed brand image used as the default, with per-page overrides only where it matters. Cheapest option that still looks professional.

Whatever you pick, make sure the image is reachable as an absolute HTTPS URL with no authentication and no size-content gap (the actual file should match the declared dimensions). Crawlers cache aggressively; if you change the OG image without changing the URL, the old preview can stick around for weeks.

Validation Tools You Should Bookmark

Google Rich Results Test (search.google.com/test/rich-results) — paste a URL or HTML, see exactly what Google parses out and which rich result formats the page is eligible for.
Search Console URL Inspection— "User-declared canonical" vs "Google-selected canonical," structured data validation, indexing status. Use this when you suspect a duplicate-content issue.
Twitter Card Validator / LinkedIn Post Inspector — purge stale unfurls and force a re-fetch. The first request after a content change usually returns the cached preview, not the new one.
Facebook Sharing Debugger— same purpose for Facebook/Meta. Click "Scrape Again" after deploying changes.
curl + grep — your own oldest debugging tool. curl -sL URL | grep -oE 'og:[a-z]+' to confirm the tags actually shipped.

Common Mistakes

Relative URLs in og:image

OG images must be absolute. A relative path like /og/cover.png works in your browser but breaks in every crawler that parses the HTML out of context. Always https://yourdomain.com/og/cover.png.

Conflicting canonicals across query variants

If your URL accepts query parameters (?tab=... for tabbed UIs, ?utm_source=...), make sure every variant points its canonical at the clean URL. Otherwise Google sees N near-duplicate pages and may pick one you did not intend as the authoritative one.

Missing og:image dimensions

Without og:image:width and og:image:height, some platforms (especially Slack and iMessage) refuse to render the image until they have downloaded it and measured it themselves. The first share looks broken; the second finally works. Always declare the dimensions.

Duplicate JSON-LD blocks with conflicting fields

Splitting JSON-LD across multiple template fragments can produce two BlogPosting objects on the same page with slightly different datePublished values. Google warns about it; some validators reject the page outright. Render JSON-LD from a single source of truth.

Don't: stuff keywords into a <meta name="keywords"> tag. Google has ignored the keywords meta since 2009. Some other engines and internal search use it, but it should never repeat your title or description content. Treat it as a low-stakes hint, not a ranking lever.

Try It with BeautiCode Tools

Hand-writing every meta tag from memory is a recipe for mistakes. The tools below generate the boilerplate from form input, all in your browser.

Meta Tag Generator — fill in title, description, OG image, Twitter card type and copy a ready-to-paste <head> block. Useful for static sites and CMS templates.
Schema Markup Generator — build Article/Product/FAQ/HowTo JSON-LD without memorizing the schema. Validate it in Google Rich Results Test before committing.
URL Parser — sanity-check absolute URLs you are about to put in canonical/og:url. Catches subtle issues like missing trailing slash differences across environments.
Slug Generator — produce SEO-friendly URL slugs from titles. Lowercase, hyphenated, no punctuation — exactly what canonical URLs want.

Frequently Asked Questions

Do I really need both Open Graph and Twitter Cards?

Open Graph alone gets you ~95% of the way there. Twitter falls back to OG when no Twitter-specific tags are present, but you still want twitter:card to choose between summary and large-image layout. Adding twitter:site and twitter:creator is a small cost for credit attribution.

How important is structured data really?

Not a direct ranking signal, but rich results dominate the first screen of search results when present. A FAQ-marked page with expandable answers and a star-rated product card will outperform plain blue links from competitors with the same authority. For content sites the ROI is mostly through click-through, not ranking.

Why does my OG image not update after I changed it?

Crawlers cache the rendered preview by URL, sometimes for weeks. If you replaced the file in place, the old preview persists. Two fixes: (1) bust the URL by appending a version query (?v=2), or (2) use the platform's debugger (Twitter Card Validator, Facebook Sharing Debugger) to force a re-fetch.

Can I have multiple og:image tags?

Yes. Some platforms pick the largest, others pick the first. Order them best-to-worst and include explicit dimensions on each. For most sites, one strong 1200×630 image beats three mediocre ones.

What does the meta robots tag actually do?

It controls per-page indexing. noindextells search engines "don't list this page in results," nofollowtells them "don't follow links from this page." The combination noindex, follow is what you want for utility pages — keep them out of search but let their links pass authority. This is finer-grained than robots.txt, which only blocks crawling, not indexing of URLs discovered elsewhere.

The HTML <head> Meta You Cannot Skip

Before any social-sharing magic, every page needs a small set of base meta tags. These feed search engines, accessibility tools, and the fallback behavior of every preview generator on the internet.

<head>
  <!-- 인코딩과 뷰포트 — 모든 페이지 필수 -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- 검색 결과의 제목·설명 -->
  <title>JSON Schema Validation: Protecting Your API | BeautiCode</title>
  <meta
    name="description"
    content="A hands-on guide to JSON Schema 2020-12, Ajv, and shipping data
             contracts you can actually trust in production." />

  <!-- 정규 URL — 중복 페이지 신호 합산 -->
  <link rel="canonical" href="https://beauticode.net/blog/json-schema-validation-api-data-contracts" />

  <!-- 색인 정책 -->
  <meta name="robots" content="index, follow, max-image-preview:large" />

  <!-- 언어 -->
  <html lang="en">  <!-- &lt;html&gt; 요소에서 -->
</head>

title — keep under ~60 characters; Google truncates the rest in search results. Put the most descriptive phrase first, the brand last (Topic | Brand).
description — 150-160 characters. Not a direct ranking factor for Google, but it heavily influences click-through rate from search results.
canonical— points search engines at the "official" URL when the same content is reachable from multiple paths (?utm=… variants, mobile/desktop, http/https). Skipping this is the most common cause of duplicate-content penalties.
robots — control indexing without leaving it to defaults. Use index, follow on public content, noindex, follow on utility pages (cookie settings, internal dashboards) you do not want in results but whose links should still pass authority.

Open Graph: How Social Platforms See You

<meta property="og:title"       content="JSON Schema Validation: Protecting Your API" />
<meta property="og:description" content="A hands-on guide to JSON Schema 2020-12 ..." />
<meta property="og:type"        content="article" />
<meta property="og:url"         content="https://beauticode.net/blog/json-schema-..." />
<meta property="og:image"       content="https://beauticode.net/og/json-schema.png" />
<meta property="og:image:width"  content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt"   content="A diagram of an API gateway validating ..." />
<meta property="og:site_name"   content="BeautiCode" />
<meta property="og:locale"      content="en_US" />

The Five That Matter Most

og:title, og:description — usually duplicate <title> and meta description, but you can tune them differently for social if you have shorter, punchier copy that works on Twitter.
og:type — pick the right entity: website for general pages, article for blog posts, product for e-commerce, video.movie for streaming. Wrong type produces a generic preview.
og:url — the absolute, canonical URL. Crawlers use it to dedupe and to follow back to your site.
og:image — by far the highest-leverage tag. A large, clear image is what gets your link clicked. Aim for 1200×630 pixels (the de-facto standard since 2014), under 5 MB, on an absolute HTTPS URL. Always include the matching og:image:width / og:image:height so platforms can reserve layout space before fetching.

Article-Specific OG

For blog posts and news, OG defines a small extension:

<meta property="article:published_time" content="2026-04-30T09:00:00+09:00" />
<meta property="article:modified_time"  content="2026-05-02T11:30:00+09:00" />
<meta property="article:author"         content="https://beauticode.net/about" />
<meta property="article:section"        content="Cryptography" />
<meta property="article:tag"            content="RSA" />
<meta property="article:tag"            content="Ed25519" />

Twitter Cards: Same Idea, Slightly Different Tags

Twitter (now X) historically read its own twitter:* tags but today falls back to Open Graph for everything except the card type. You only need a handful of explicit Twitter tags:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:site"        content="@beauticode" />
<meta name="twitter:creator"     content="@author_handle" />
<!-- 나머지(title/description/image)는 og:* 가 그대로 적용됨 -->

summary — small thumbnail next to title and description. Compact, good for FAQ-style pages.
summary_large_image — full-width banner above title and description. Recommended for content pages where you have a strong OG image.
player / app — for video and app install cards. Niche; most sites do not need them.

Schema.org JSON-LD: Earning Rich Results

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "JSON Schema Validation: Protecting Your API",
  "description": "...",
  "image": "https://beauticode.net/og/json-schema.png",
  "datePublished": "2026-04-27T09:00:00+09:00",
  "dateModified":  "2026-04-27T09:00:00+09:00",
  "author":  { "@type": "Person", "name": "BeautiCode Team" },
  "publisher": {
    "@type": "Organization",
    "name": "BeautiCode",
    "logo": { "@type": "ImageObject", "url": "https://beauticode.net/icon.png" }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://beauticode.net/blog/json-schema-validation-api-data-contracts"
  }
}
</script>

The Schemas Worth Knowing

@type	Use case	Rich result
Article / BlogPosting	Blog post, news	Top stories carousel
Product	E-commerce listing	Price, availability, ratings
FAQPage	Pages with Q&A blocks	Expandable Q&A in SERP
HowTo	Step-by-step tutorials	Numbered steps preview
SoftwareApplication	Web app, tool page	App rating box
BreadcrumbList	Hierarchical navigation	Path under title
Organization / WebSite	Site root	Sitelinks search box, knowledge panel

Generating Open Graph Images

A static OG image works for the homepage, but content sites quickly outgrow a single thumbnail. Three patterns scale:

Build-time generation — Next.js opengraph-image.tsx (or ImageResponse API) renders a JSX template into a 1200×630 PNG at build or request time. Per-page images, no manual design work.
On-demand image CDN — Cloudinary, imgix, Vercel OG. Pass the title and a template ID in a URL and get back a rendered image. Cached after first hit.
Static fallback — one well-designed brand image used as the default, with per-page overrides only where it matters. Cheapest option that still looks professional.

Validation Tools You Should Bookmark

Google Rich Results Test (search.google.com/test/rich-results) — paste a URL or HTML, see exactly what Google parses out and which rich result formats the page is eligible for.
Search Console URL Inspection— "User-declared canonical" vs "Google-selected canonical," structured data validation, indexing status. Use this when you suspect a duplicate-content issue.
Twitter Card Validator / LinkedIn Post Inspector — purge stale unfurls and force a re-fetch. The first request after a content change usually returns the cached preview, not the new one.
Facebook Sharing Debugger— same purpose for Facebook/Meta. Click "Scrape Again" after deploying changes.
curl + grep — your own oldest debugging tool. curl -sL URL | grep -oE 'og:[a-z]+' to confirm the tags actually shipped.

Common Mistakes

Relative URLs in og:image

OG images must be absolute. A relative path like /og/cover.png works in your browser but breaks in every crawler that parses the HTML out of context. Always https://yourdomain.com/og/cover.png.

Conflicting canonicals across query variants

Missing og:image dimensions

Duplicate JSON-LD blocks with conflicting fields

Try It with BeautiCode Tools

Hand-writing every meta tag from memory is a recipe for mistakes. The tools below generate the boilerplate from form input, all in your browser.

Meta Tag Generator — fill in title, description, OG image, Twitter card type and copy a ready-to-paste <head> block. Useful for static sites and CMS templates.
Schema Markup Generator — build Article/Product/FAQ/HowTo JSON-LD without memorizing the schema. Validate it in Google Rich Results Test before committing.
URL Parser — sanity-check absolute URLs you are about to put in canonical/og:url. Catches subtle issues like missing trailing slash differences across environments.
Slug Generator — produce SEO-friendly URL slugs from titles. Lowercase, hyphenated, no punctuation — exactly what canonical URLs want.

Frequently Asked Questions

Do I really need both Open Graph and Twitter Cards?

How important is structured data really?

Why does my OG image not update after I changed it?

Can I have multiple og:image tags?

Yes. Some platforms pick the largest, others pick the first. Order them best-to-worst and include explicit dimensions on each. For most sites, one strong 1200×630 image beats three mediocre ones.

The HTML <head> Meta You Cannot Skip

Open Graph: How Social Platforms See You

The Five That Matter Most

Article-Specific OG

Twitter Cards: Same Idea, Slightly Different Tags

Schema.org JSON-LD: Earning Rich Results

The Schemas Worth Knowing

Generating Open Graph Images

Validation Tools You Should Bookmark

Common Mistakes

Relative URLs in og:image

Conflicting canonicals across query variants

Missing og:image dimensions

Duplicate JSON-LD blocks with conflicting fields

Try It with BeautiCode Tools

Frequently Asked Questions

Do I really need both Open Graph and Twitter Cards?

How important is structured data really?

Why does my OG image not update after I changed it?

Can I have multiple og:image tags?

What does the meta robots tag actually do?

Related Tools

Meta Tag Generator

Schema Markup Generator

URL Parser

Slug Generator

Related Articles

How to Generate Secure Passwords in 2026: A Complete Guide

JSON vs YAML: When to Use What — A Developer's Guide

The HTML <head> Meta You Cannot Skip

Open Graph: How Social Platforms See You

The Five That Matter Most

Article-Specific OG

Twitter Cards: Same Idea, Slightly Different Tags

Schema.org JSON-LD: Earning Rich Results

The Schemas Worth Knowing

Generating Open Graph Images

Validation Tools You Should Bookmark

Common Mistakes

Relative URLs in og:image

Conflicting canonicals across query variants

Missing og:image dimensions

Duplicate JSON-LD blocks with conflicting fields

Try It with BeautiCode Tools

Frequently Asked Questions

Do I really need both Open Graph and Twitter Cards?

How important is structured data really?

Why does my OG image not update after I changed it?

Can I have multiple og:image tags?

What does the meta robots tag actually do?

Related Tools

Meta Tag Generator

Schema Markup Generator

URL Parser

Slug Generator

Related Articles

How to Generate Secure Passwords in 2026: A Complete Guide

JSON vs YAML: When to Use What — A Developer's Guide