<meta> Tags
Charset, viewport, description, keywords, robots — all the SEO metadata.
1Essential Meta Tags
Meta tags describe the document to browsers, search engines, and social media. Charset and viewport are required for any modern page.
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Buy quality sneakers with free shipping." />
<meta name="keywords" content="sneakers, shoes, free shipping" />
<meta name="author" content="Acme Inc" />
<meta name="robots" content="index, follow" />2Open Graph for Social
Open Graph and Twitter meta tags control how your link looks when shared on Facebook, X, LinkedIn, Slack, etc.
<meta property="og:title" content="Buy Sneakers — Acme" />
<meta property="og:description" content="Free shipping on every pair." />
<meta property="og:image" content="https://acme.com/og.png" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />3Put the element in context
Metadata describes the document or provides browser instructions. A viewport declaration helps a responsive page use the device width, while a description summarizes the page for contexts that may use it. Metadata should match the actual page and is not a substitute for useful visible content.
4Practice with a small page
Add encoding, viewport, and description metadata to a small page. Resize the layout and inspect the document head. Check that the description explains the specific page rather than repeating the same generic text across every page of a website.
Finished reading?
Mark this topic as complete to track progress.