HTML Meta Tags: My Reference Notes
I keep re-looking these up every time I start a new project, so this is where I'm dumping them all in one place — with a short note on why each one matters, so future-me doesn't have to re-derive it from scratch. Jump to: Document Core & Responsive Setup Basic SEO & Indexing Social Cards (OG + X) GEO / AI Crawlers Security Headers PWA / Browser Quick Table What I Actually Use Document Core &…
HTML meta tags are essential for defining various aspects of a web page. The following are some commonly used meta tags and their purposes:
Document core and responsive setup:
- meta charset="UTF-8": Specifies the character encoding for the document.
- meta name="viewport" content="width=device-width, initial-scale=1.0": Ensures proper rendering on mobile devices.
Basic SEO and indexing:
- meta name="description" content="...": Provides a brief summary of the page, influencing click-through rates.
- meta name="robots" content="index, follow": Instructs search engines to index the page and follow its links.
Social cards (Open Graph and Twitter):
- Open Graph meta tags (e.g., meta property="og:type" content="website"): Generate previews for social media shares, especially on Facebook and LinkedIn.
- Twitter meta tags (e.g., meta name="twitter:image" content="..."): Similarly, create previews for Twitter shares.
GEO and AI crawlers:
- meta name="robots" content="noai, noimageai": Instructs AI crawlers to ignore the page.
- robots.txt: Controls access for specific agents like GPTBot and ClaudeBot.
JSON-LD for structured data:
- script type="application/ld+json": Defines structured data about the page's content, such as the author's name, job title, and expertise. This helps search engines better understand the page's context.
Security headers:
- Content Security Policy (CSP) meta tag: Controls the sources from which content can be loaded, reducing the risk of cross-site scripting (XSS) attacks.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
