HTML Meta Tags Table
| Tag | Purpose |
|---|---|
| <meta charset="UTF-8"> | Character encoding declaration - first thing in <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | Responsive viewport - without it mobile renders at desktop width |
| <title>Page Title</title> | Browser tab text, search engine result title, bookmark default |
| <meta name="description" content="..."> | Search engine snippet text (~155 chars displayed) |
| <meta name="robots" content="noindex, nofollow"> | Controls search engine crawling and indexing |
| <meta property="og:title" content="..."> | Open Graph title - shown when shared on social media |
| <meta property="og:description" content="..."> | Open Graph description for social media previews |
| <meta property="og:image" content="https://..."> | Open Graph image (1200\u00d7630 recommended) for social shares |
| <meta property="og:url" content="https://..."> | Canonical URL for social media share |
| <meta name="twitter:card" content="summary_large_image"> | Twitter card type (summary, summary_large_image, player) |
| <link rel="canonical" href="https://..."> | Tells search engines the authoritative URL for duplicate content |
| <link rel="icon" href="favicon.ico"> | Favicon shown in browser tabs and bookmarks |
| <meta name="theme-color" content="#4285f4"> | Browser UI accent color on mobile |
| <meta http-equiv="refresh" content="5"> | Auto-refresh page after N seconds (use sparingly) |
Meta tags are invisible to readers but essential for machines: search engines read meta description and robots, social media platforms read Open Graph (og:) and Twitter Card tags, and the viewport meta determines whether mobile users see a readable page or a shrunken desktop.
The most visible meta tag is og:image - every link shared on social media renders it as a preview card, and its absence produces a blank grey rectangle that reduces click-through by half.
How to use
- Filter by tag or purpose - SEO, Open Graph, viewport, robots - to find what you need.
- Click any tag to copy the full HTML for pasting into your head element.
- Check the chips for the four functional groups: SEO, Open Graph, Twitter Cards and viewport.
Frequently asked questions
What is the ideal meta description length?
Google displays up to about 155-160 characters on desktop and 120 on mobile. There is no penalty for longer descriptions - Google simply truncates them. Write a compelling 150-character summary rather than padding to a limit.
What is the difference between og:title and title?
title controls the browser tab and is the primary search result heading. og:title controls what appears when the page is shared on social media. They can be different: the title should target search keywords, while og:title should be written for humans clicking a link in their feed.
Why is the viewport meta tag essential for mobile?
Without it, mobile browsers render the page at 980px width (a desktop simulation) and zoom out to fit the screen - making all text unreadably small. With width=device-width, the page renders at the device’s actual CSS pixel width, enabling responsive design media queries to work.
What does the canonical tag prevent?
When the same content is reachable at multiple URLs (with and without trailing slash, with query parameters, via http and https), search engines may index duplicates and split ranking signals. The canonical tag tells them which URL is authoritative, consolidating all ranking signals to one address.