Meta Tags for SEO — Complete Guide to HTML Meta Tags
HTML Meta Tags — The Invisible Code That Controls How Your Site Appears Everywhere
Meta tags sit in the <head> section of your HTML — invisible to visitors viewing the page but read by every search engine, social media platform, browser, and web service that encounters your site. They control how your pages appear in Google search results, how they look when shared on Facebook and Twitter, how browsers handle viewport scaling on mobile devices, and how web crawlers categorize and index your content.
The Essential Meta Tags Every Page Needs
Title tag: Not technically a meta tag, but the most important element in <head>. The title appears in search results, browser tabs, social shares, and bookmarks. Keep it under 60 characters — Google truncates longer titles with an ellipsis. Include your primary keyword naturally, and make it compelling enough that someone scrolling through search results clicks on your page instead of the nine others.
Meta description: A 150-160 character summary that appears below the title in search results. Google does not use it as a direct ranking factor, but it directly affects click-through rate — which indirectly affects rankings. Write it as a concise pitch for why someone should click: what will they learn, get, or accomplish on your page?
Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> — this tells mobile browsers how to scale the page. Without it, mobile browsers render the page at desktop width and then scale it down, resulting in tiny, unreadable text. This is a mobile usability requirement, not optional.
Charset declaration: <meta charset="UTF-8"> — tells the browser which character encoding to use. UTF-8 supports every language and special character. Without this declaration, browsers may guess incorrectly, causing characters to display as garbled symbols.
Open Graph Tags — Controlling Social Media Previews
When someone shares your URL on Facebook, LinkedIn, WhatsApp, or Slack, these platforms fetch your page and look for Open Graph (OG) meta tags to generate the preview card. The essential OG tags:
og:title — the title shown in the share card (can differ from your HTML title tag).
og:description — the description shown in the share card.
og:image — the image shown in the share card. This is the single most impactful social media optimization: posts with images get 2-3x more engagement than text-only posts. Use a 1200×630 pixel image for optimal display across platforms.
og:url — the canonical URL of the page.
og:type — usually "website" for most pages, "article" for blog posts.
Twitter Card Tags
Twitter uses its own set of meta tags in addition to OG tags. The key tag is twitter:card, which determines the card type — "summary" shows a small square image with text, while "summary_large_image" shows a prominent image above the text. For most content, "summary_large_image" generates more engagement because the larger image catches attention in the Twitter feed.
SEO-Related Meta Tags
robots — controls search engine crawler behavior. <meta name="robots" content="index, follow"> is the default (crawl and index this page). Use noindex for pages you don't want in search results (thank you pages, internal tools, duplicate content) and nofollow for pages whose links you don't want to pass authority.
canonical — technically a link tag, not a meta tag, but critical for SEO. It tells search engines which URL is the "official" version when the same content is accessible at multiple URLs. This prevents duplicate content issues that dilute your page's ranking authority.
Common Meta Tag Mistakes
Missing viewport tag on mobile-responsive sites — the CSS is responsive but the browser does not know to use mobile width, so it renders the desktop view anyway. Missing OG image — social shares look empty, drastically reducing click-through rates. Duplicate title tags across multiple pages — each page should have a unique title describing its specific content. Keyword-stuffed meta descriptions — Google may replace your description with a snippet it generates from the page content if it detects spam.
Generate properly formatted meta tags for your pages with our Meta Tag Generator — fill in your details and copy the complete <head> code.