Core Document Metadata
Metadata every production page commonly needs to describe itself and render correctly.
| Term / Syntax | Name | Description | Example |
|---|---|---|---|
<title> |
Document title | Sets the browser-tab title and is commonly used as the search-result title. | <title>CSS Grid Reference | Web Dev Reference</title> |
meta[name="description"] |
Page description | Provides a concise page summary used by search/social systems in some contexts. | <meta name="description" content="A practical CSS Grid reference."> |
meta[name="viewport"] |
Viewport configuration | Tells mobile browsers how to size the layout viewport. | <meta name="viewport" content="width=device-width, initial-scale=1"> |
html[lang] |
Document language | Identifies the primary language for browsers, search systems, and assistive technology. | <html lang="en"> |
meta[name="robots"] |
Crawler directives | Supplies indexing/following directives to compliant crawlers. | <meta name="robots" content="index, follow"> |
Canonical & Social Metadata
Metadata used to identify preferred URLs and social-preview content.
| Term / Syntax | Name | Description | Example |
|---|---|---|---|
rel="canonical" |
Canonical URL | Identifies the preferred URL for substantially duplicate pages. | <link rel="canonical" href="https://example.com/css-grid"> |
og:title |
Open Graph title | Sets the title used by many social preview systems. | <meta property="og:title" content="CSS Grid Reference"> |
og:description |
Open Graph description | Sets the social-preview summary. | <meta property="og:description" content="A practical CSS Grid reference."> |
og:image |
Open Graph image | Specifies the image used in supported social previews. | <meta property="og:image" content="https://example.com/share.png"> |
twitter:card |
Twitter/X card type | Selects the general card layout supported by Twitter/X metadata. | <meta name="twitter:card" content="summary_large_image"> |
Structured Data
Machine-readable schema markup for describing page entities and relationships.
| Term / Syntax | Name | Description | Example |
|---|---|---|---|
JSON-LD |
Linked-data script | Embeds structured data in a script block without changing visible content. | <script type="application/ld+json">{ ... }</script> |
WebSite |
Website schema | Describes the overall website entity. | "@type": "WebSite" |
TechArticle |
Technical article schema | Describes technical/reference article content. | "@type": "TechArticle" |
author |
Author entity | Associates the content with a Person or Organization. | "author": { "@type": "Person", "name": "Jennifer Curtis" } |
Icons & Web App Metadata
Files and links that provide browser icons and installable-web-app information.
| Term / Syntax | Name | Description | Example |
|---|---|---|---|
rel="icon" |
Favicon | Provides an icon for browser tabs, bookmarks, and other UI. | <link rel="icon" href="/favicon.png"> |
rel="apple-touch-icon" |
Apple touch icon | Provides an icon used for Apple home-screen shortcuts. | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
rel="manifest" |
Web app manifest | Links metadata for an installable web experience. | <link rel="manifest" href="/site.webmanifest"> |
theme-color |
Browser UI color | Suggests a color for supported browser/window UI. | <meta name="theme-color" content="#3c88a3"> |