Every webpage you visit has a hidden layer of information that browsers, search engines, and social platforms read before rendering a single pixel of visible content. That layer lives inside the <head> element, and most of it consists of HTML meta tags.
Meta tags do not appear on the page itself, but their impact is everywhere: the title in a Google result, the image preview when you share a link on LinkedIn, whether a crawler is allowed to index the page at all. Getting them right is one of the highest-leverage, lowest-effort SEO tasks you can do.
This guide covers every meta tag worth knowing — what it does, the correct syntax, recommended values, and a real code example — plus a free tool at the end to inspect any live URL in seconds.
What Are HTML Meta Tags?
Meta tags are short HTML elements placed inside the <head> block of a webpage. They carry metadata — data about data — describing the page to external consumers: search engine crawlers, social media scrapers, browsers, and RSS readers.
Most meta tags use either a name/content attribute pair or a property/content pair (for Open Graph). The <title> and <link> elements are not strictly meta tags, but they live in the same <head> context and serve a similar metadata role, so they are covered here too.
A minimal, well-formed <head> block looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title — Site Name</title>
<meta name="description" content="A clear, compelling description under 160 characters.">
<link rel="canonical" href="https://example.com/page-slug">
<meta name="robots" content="index, follow">
</head>Everything else — Open Graph, Twitter Card, author, theme-color — builds on this foundation.
Essential SEO Meta Tags
These four elements have the greatest direct impact on how your page is discovered and displayed in search results.
1. <title>
The page title is the single most important on-page SEO signal. It appears as the clickable blue link in Google results and as the browser tab label.
| Attribute | Value |
|---|---|
| Recommended length | 50–60 characters (Google truncates around 600px display width) |
| Best practice | Place primary keyword near the front; append brand name at the end |
| Unique per page | Yes — duplicate titles confuse crawlers and users |
<title>HTML Meta Tags Guide: Every Tag Explained — URL Summary</title>2. Meta Description
The meta description is the snippet shown below the title in search results. Google does not use it as a direct ranking factor, but a compelling description improves click-through rate (CTR), which influences rankings indirectly.
| Attribute | Value |
|---|---|
| Recommended length | 120–160 characters |
| Best practice | Summarize the page benefit; include a natural mention of the target keyword |
| Unique per page | Yes |
<meta name="description" content="A complete guide to HTML meta tags — from title
and description to Open Graph, Twitter Card, robots, and canonical.
With code examples and a free checker.">3. Meta Robots
The robots meta tag tells crawlers whether they can index the page and follow its links. If you omit it, the default behavior is index, follow — explicitly including it is considered best practice for critical pages.
| Directive | Meaning |
|---|---|
index |
Allow the page to appear in search results |
noindex |
Exclude the page from search results |
follow |
Allow crawlers to follow links on this page |
nofollow |
Tell crawlers not to follow links on this page |
nosnippet |
Prevent Google from showing a description snippet |
max-snippet:N |
Limit snippet length to N characters |
<!-- Standard page — visible to search engines -->
<meta name="robots" content="index, follow">
<!-- Thank-you page, admin area, or duplicate content -->
<meta name="robots" content="noindex, nofollow">4. Canonical Link
The canonical tag tells search engines which version of a URL is the "official" one when the same (or very similar) content is accessible at multiple addresses — for example https://example.com/page, https://example.com/page?ref=newsletter, and http://www.example.com/page all rendering the same content.
| Attribute | Value |
|---|---|
| Best practice | Use the full absolute URL including protocol and domain |
| Self-referencing | Include a canonical on every page, even when it points to itself |
| HTTPS | Always canonicalize to the HTTPS version |
<link rel="canonical" href="https://urlsummary.echovalue.dev/blog/meta-tags-guide">Social Media Meta Tags
When someone shares a link on a social platform, the platform's scraper fetches the page and reads special meta tags to build a rich preview card — an image, title, and description. Without these tags, the platform either shows a blank card or improvises, usually with poor results.
Open Graph Tags
Open Graph (OG) was created by Facebook in 2010 and has since become the universal standard. LinkedIn, Slack, WhatsApp, Pinterest, Discord, and most other platforms read OG tags first.
<!-- Core Open Graph tags -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://urlsummary.echovalue.dev/blog/meta-tags-guide">
<meta property="og:title" content="HTML Meta Tags Guide: Every Tag Explained With Examples">
<meta property="og:description" content="A complete guide to HTML meta tags — from title
and description to Open Graph, Twitter Card, robots, and canonical.">
<meta property="og:image" content="https://urlsummary.echovalue.dev/og-image.png">
<!-- Recommended image size: 1200×630px, under 8 MB -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A visual summary of the meta tags guide">
<!-- For articles specifically -->
<meta property="article:published_time" content="2026-03-30">
<meta property="article:author" content="URL Summary">
The most common og:type values are website (for homepages and general pages) and article (for blog posts and news). Other types include product, video.movie, and music.album.
Twitter Card Tags
Twitter Card tags control how links appear on X (Twitter). If Twitter Card tags are absent, X will fall back to Open Graph — but the fallback is not always reliable, and you lose access to Twitter-specific card formats.
<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://urlsummary.echovalue.dev/blog/meta-tags-guide">
<meta name="twitter:title" content="HTML Meta Tags Guide: Every Tag Explained With Examples">
<meta name="twitter:description" content="A complete guide to HTML meta tags — Open Graph,
Twitter Card, robots, canonical, and more.">
<meta name="twitter:image" content="https://urlsummary.echovalue.dev/og-image.png">
<meta name="twitter:image:alt" content="A visual summary of the meta tags guide">The four Twitter card types are:
- summary — small square image + title + description (default)
- summary_large_image — full-width image card, the most commonly used
- app — for linking to a mobile app
- player — embeds audio or video directly in the card
Recommendation: always implement both OG and Twitter Card tag sets. The overhead is minimal — roughly 10 extra lines of HTML — and the coverage gain is complete.
Technical Meta Tags
These tags influence browser rendering, accessibility, and appearance, rather than search ranking directly.
charset
Declares the character encoding for the document. Always use UTF-8 — it covers every language and symbol set.
<meta charset="UTF-8">viewport
Controls how the page scales on mobile devices. This tag is required for Google's mobile-first indexing; without it, your page will fail the mobile-friendly test.
<meta name="viewport" content="width=device-width, initial-scale=1.0">author
Identifies the page's author. Used by some aggregators and content management systems; has no known SEO effect but is considered good practice for content-heavy sites.
<meta name="author" content="URL Summary">theme-color
Sets the browser chrome color on mobile browsers (Chrome on Android, Safari on iOS in some modes). Reinforces brand identity for PWAs and mobile users.
<meta name="theme-color" content="#0f1117">Meta Tags That No Longer Matter
Several meta tags were widely used in the early 2000s but are now ignored, deprecated, or actively counterproductive. Knowing which ones to skip saves time and avoids confusion.
meta keywords IGNORED
Google officially stated in 2009 that it does not use the keywords meta tag in web ranking. Bing also ignores it. The tag was abused for keyword stuffing so badly that all major engines deprecated it. Do not use it.
<!-- Useless — Google and Bing ignore this entirely -->
<meta name="keywords" content="meta tags, seo, html">revisit-after IGNORED
This tag was intended to tell crawlers how frequently to revisit the page. No major search engine honors it. Crawl frequency is managed through your sitemap, server response codes, and content update signals — not this tag.
<!-- Ignored by all search engines -->
<meta name="revisit-after" content="7 days">Other deprecated tags
- generator — identifies the CMS that built the page (WordPress, Drupal, etc.); no SEO value and potentially a security disclosure
- rating — attempted to signal adult content; replaced by specialized protocols
- cache-control via meta — HTTP response headers should be used instead; meta equivalents are unreliable
- expires via meta — same as above; use HTTP headers
How to Check All Meta Tags on a Page
Manually reading meta tags in browser DevTools works for a single tag, but it quickly becomes tedious when you need to audit a full page — especially one with Open Graph, Twitter Card, structured data, and a dozen other fields to verify.
Free Meta Tag Checker
URL Summary extracts every meta tag from any live URL in seconds. Paste a URL and instantly see:
- All SEO tags — title, description, canonical, robots
- Complete Open Graph data with image preview
- Twitter Card tags and card type
- Technical tags — viewport, charset, theme-color
- JSON-LD structured data (parsed and readable)
- Social media links, favicon, and media assets
The tool is completely free for individual URL analysis, requires no sign-up, and returns results in a structured, color-coded layout that makes it easy to spot missing or malformed tags at a glance.
Meta Tags Checklist
Use this checklist before publishing or auditing any page:
-
<meta charset="UTF-8">is the first element inside<head> -
<meta name="viewport" content="width=device-width, initial-scale=1.0">is present -
<title>is unique, 50–60 characters, keyword-first -
<meta name="description">is unique, 120–160 characters, includes target keyword -
<link rel="canonical">points to the correct absolute HTTPS URL -
<meta name="robots">is set correctly (index, followfor public pages) -
og:type,og:url,og:title,og:description,og:imageare all present - OG image is 1200×630px and under 8 MB
-
twitter:card,twitter:title,twitter:description,twitter:imageare all present - No duplicate title or description tags on the same page
- Meta keywords tag is not included (it's noise, not signal)
- JSON-LD structured data is valid and appropriate for the page type
Frequently Asked Questions
There is no fixed number, but a well-optimized page should at minimum include: charset, viewport, title, meta description, canonical, robots, and a full set of Open Graph and Twitter Card tags. That adds up to roughly 12–16 tags for a solid baseline. More complex pages (articles, products, events) benefit from additional JSON-LD structured data on top of that.
No. Google officially ignores the meta keywords tag and has done so since 2009. Including it has no positive effect on rankings and may signal outdated SEO practices. You can safely omit it from your pages.
Open Graph (og:) tags were created by Facebook and are now the standard used by most social platforms — LinkedIn, Pinterest, Slack, WhatsApp, and others. Twitter Card tags (twitter:) are specific to X (Twitter) and offer additional card formats like summary_large_image and player. Twitter will fall back to Open Graph if its own tags are missing, so you need both sets for full cross-platform control.
The easiest way is to use URL Summary. Enter any URL and the tool instantly extracts and displays every meta tag — SEO tags, Open Graph, Twitter Card, canonical, robots, structured data, and more — all organized in a readable format. No sign-up required.
Conclusion
Meta tags are the foundation of how search engines and social platforms understand your content. Most of the work — charset, viewport, title, description, canonical, robots, OG, and Twitter Card — can be templated once and then customized per page. The investment is small; the payoff in visibility, click-through rate, and social sharing quality is significant.
The most common mistake is not getting tags wrong, but simply omitting them. A page with no meta description, no canonical, and no OG image is leaving real discoverability on the table.
Use the checklist above before every publish, and run any live URL through URL Summary whenever you want a complete, instant audit of what's actually being served — not just what you think is in the template.
Ready to audit your meta tags?
Paste any URL into URL Summary and get a full meta tag report in seconds — free, no sign-up required.
Analyze a URL Now