Metadata and Sharing

Control page identity, icons, canonical URLs, and social previews from the document head.

Updated Aug 13, 2026Tested with HTML Living Standard

Metadata tells browsers, search engines, and social apps how to identify a page. It belongs in head and should describe the specific URL rather than the whole site generically.

Essential page metadata

index.html

01<title>HTML metadata · Arcbyte</title>
02<meta name="description" content="Learn the metadata every production page needs." />
03<meta name="theme-color" content="#4c1c62" />
04<link rel="canonical" href="https://example.com/html/metadata" />
05<link rel="icon" href="/icon.png" type="image/png" />

Keep titles descriptive and concise. A canonical link identifies the preferred URL when query strings or alternate routes expose equivalent content.

index.html

01<meta property="og:title" content="HTML metadata · Arcbyte" />
02<meta property="og:description" content="Build accurate page and sharing metadata." />
03<meta property="og:image" content="https://example.com/preview.png" />
04<meta name="twitter:card" content="summary_large_image" />
05<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/html/metadata" />

Keep this

Give every public page a unique identity, a canonical URL, accurate language alternates, and a preview image designed for sharing.

Your place is saved on this device.

Essential page metadata

Social previews and language versions

Keep this