Developers & Technical · Guide · Developer Utilities

How to write meta tags

Validate your HTML title, description, OG, and Twitter meta tags for errors instantly. Use this free online guide to understand canonical and robots directives with no sign-up.

By FreeToolArena Staff · Updated June 2026 · 6 min read

Meta tags are the instructions you give a browser, search engine, or crawler in the<head> of an HTML document. Most of them are small, but collectively they control how the page is indexed, how it renders on mobile, what character set the browser uses, which URL is canonical, which languages the page has alternates in, and how it appears when shared. Some meta tags that were once critical are now dead (meta keywords has been ignored by major search engines for over a decade). Others that are easy to forget (viewport, charset) break the page outright if missing. This guide covers the tags that actually matter in 2026, the ones that are dead weight, and how they interact with each other and with structured data.

Charset and viewport: the non-negotiables

The very first meta tag in <head> should be<meta charset="UTF-8">. It must appear within the first 1024 bytes of the document or browsers may fall back to an incorrect default encoding.<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to render at the device’s actual width rather than a zoomed-out desktop simulation. Without it, your site looks tiny on phones and fails Google’s mobile-friendly test, which directly affects mobile ranking.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Title and description

The <title> tag and <meta name="description">are the two highest-impact head elements. Title is a ranking signal and the SERP headline; description influences click-through rate. Title target is 50-60 characters. Description target is 150-160 characters. Both need to be unique per page. Covered separately in dedicated guides but mentioned here because they belong in every meta-tag checklist.

Robots directives

<meta name="robots" content="..."> controls crawler behavior for the page. Common values: index, follow (default, can be omitted), noindex (do not include in search results),nofollow (do not pass link equity), noindex, nofollow(exclude entirely). More specific directives include noarchive (do not cache a copy), nosnippet (do not show a description), max-snippet,max-image-preview, and max-video-preview for fine-grained snippet control. A page with noindex still gets crawled but not listed; a page with noindex, nofollow gets crawled and neither listed nor passing any link equity.

Canonical link

Technically a <link> rather than a <meta>, the canonical tag belongs in any meta-tags checklist.<link rel="canonical" href="https://example.com/page">tells search engines which URL is the primary version when multiple URLs serve the same content. Use absolute URLs, self-reference canonicals on primary pages, and make sure thecanonical URL actually exists and returns 200 status. A canonical pointing to a non-existent or redirecting URL confuses crawlers.

Language and hreflang alternates

<html lang="en"> on the root element declares the page’s primary language for screen readers and search engines. For multilingual sites,<link rel="alternate" hreflang="fr" href="https://example.com/fr/page"> lists alternate language versions. Hreflang is complex: every variant must reference every other variant and itself; x-default specifies the fallback; invalid combinations can deindex alternates. Google Search Console flags hreflang errors in the International Targeting report.

<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
<link rel="alternate" hreflang="es" href="https://example.com/es/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Theme color and application metadata

<meta name="theme-color" content="#0066cc">controls the color of the mobile browser chrome (URL bar) on Android Chrome and iOS Safari Technology Preview. <meta name="application-name">provides the short name when the site is saved to a device home screen without a proper PWA manifest. For full PWA support, link to a separate manifest.jsoninstead—the manifest subsumes most of the old Apple-specific meta tags.

The dead keyword tag

<meta name="keywords"> is dead. Google has ignored it since at least 2009, Bing stopped using it as a ranking signal around 2014, and most SEO tools now flag its presence as clutter. Including it does no direct harm, but if your content team is spending time curating keyword meta tags, that time is wasted. Remove it during the next template audit.

Open Graph and Twitter Cards

Open Graph tags (og:title, og:description, og:image,og:url, og:type) control how the page previews when shared on Facebook, LinkedIn, Slack, iMessage, and most chat apps. Twitter Card tags (twitter:card, twitter:site, twitter:creator) control Twitter/X shares. Covered in depth in a dedicated guide. Include the core four og tags on every indexable page.

Referrer policy and security headers

<meta name="referrer" content="strict-origin-when-cross-origin">controls how much referrer information is sent when users click outbound links. Common values: no-referrer, same-origin,strict-origin-when-cross-origin (modern default),unsafe-url. For most sites, HTTP response headers are the right place for this policy, but meta tag fallbacks help when a CDN strips headers. Content-Security-Policy can also be set via meta, though HTTP headers are preferred.

Verification and ownership tags

Google Search Console, Bing Webmaster Tools, Pinterest, Facebook Domain Verification, and others offer meta-tag-based ownership verification:<meta name="google-site-verification" content="...">. Many sites accumulate half a dozen of these over the years. They are harmless if current but clutter the head if stale. Periodically audit and remove verification tags for services you no longer use.

Legacy tags you can skip

meta http-equiv="Content-Type" is redundant withmeta charset. meta name="author" is not used by search engines—use structured data if you need authorship. meta name="generator" leaks your CMS version and has no user-facing value. Apple-specific meta tags (apple-mobile-web-app-capable,apple-mobile-web-app-title) are replaced by a PWA manifest.meta name="revisit-after" was never supported by any major search engine. Remove all of these during template cleanup.

Common mistakes

Missing viewport. Without the viewport meta, mobile renders at desktop width and zooms out. Fails Google’s mobile-friendly check and tanks mobile rankings. Always present.

Charset below byte 1024. Browsers parse the first kilobyte to detect encoding. If the charset tag sits below that boundary, the browser may guess wrong and render special characters as mojibake.

Noindex left on production. Accidentally shipping a staging template with noindex is one of the most common SEO disasters. Always audit robots directives before launch.

Canonical pointing to wrong URL. Self-referencing canonicals on primary pages; canonicals to the preferred version on duplicates. A canonical to a redirecting or non-existent URL confuses crawlers and can deindex the page.

Keeping the keyword meta tag. Zero impact, ongoing waste of editorial time. Remove it from templates.

Hreflang typos. Region codes are ISO 3166-1 (like GB, notUK). Language codes are ISO 639-1 (like he for Hebrew, notiw). Typos silently ignore the alternate.

Accumulating verification tags. Old Pinterest, Bing, and Yandex verifications pile up over years. Audit and remove the ones no longer needed.

Run the numbers

Build a complete, modern meta tag block in one shot with the meta tag generator. Pair with the Open Graph generator for the social-sharing half of the head, and the schema markup generator for the JSON-LDstructured data that unlocks rich snippet features in search results.

Use these while you read

Tools that pair with this guide

Found this useful?Email Buy Me a Coffee

Continue reading

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →