Meta Tags Guide: Every Important Tag Explained
Meta tags are HTML elements that live in your page's <head> and communicate instructions and metadata to search engines, social platforms, and browsers. Some directly influence rankings; others control how your page is indexed or displayed. Understanding which tags do what — and setting each one correctly — is foundational to technical SEO and avoids a class of errors that silently prevent pages from ranking.
Title tag
The clickable headline shown in search results. Write your primary keyword near the start, keep it under 60 characters, and make it compelling enough to earn a click. Every page must have a unique title tag. In Next.js: set the title in the metadata object. In WordPress: your SEO plugin sets this in the title field on each post. Google rewrites title tags it considers too long, too short, or keyword-stuffed - so write for users first.
Meta description
The snippet shown under the title in search results. Not a direct ranking factor but strongly influences click-through rate. Write 120-155 characters that summarize what the user gets from the page and include a reason to click. Include the primary keyword naturally. Google rewrites meta descriptions about 70% of the time, so think of it as a default suggestion rather than a guarantee.
Meta robots
Controls indexing and crawling behavior. Common values: index, follow (default - index and follow links), noindex, follow (exclude from index but follow links), index, nofollow (index but do not follow links), noindex, nofollow (exclude entirely). Add noindex to pages you do not want in Google's index: checkout pages, login pages, internal search results, duplicate content pages. Do not add noindex to pages you want to rank.
Canonical tag
Specifies the preferred URL when multiple URLs have the same or very similar content. Every page should have a self-referencing canonical (pointing to itself) by default. Override the canonical on duplicate or near-duplicate pages to point to the preferred version. In Next.js: set alternates.canonical in the metadata object. This is the single most important tag for managing duplicate content.
Open Graph tags
Control how your page appears when shared on social media - specifically title, description, and image. The og:image tag determines the preview image shown when someone shares a link on Facebook, LinkedIn, Twitter, and Slack. Use a high-quality image at least 1200x630 pixels. Without OG tags, social platforms pick random content from your page, often producing poor-looking previews that reduce social sharing engagement.
Meta viewport tag
The viewport meta tag is required for mobile-friendly rendering: <meta name='viewport' content='width=device-width, initial-scale=1'>. Without it, mobile browsers render the page at desktop width and scale it down — creating a terrible UX and triggering Google's mobile usability warnings. This is not optional for any site built after 2015. Google uses mobile-first indexing, meaning the mobile version of your page is what gets crawled and indexed. A missing viewport tag is a direct indexing quality issue.
Meta charset tag
The <meta charset='UTF-8'> declaration belongs in the very first line of your <head> element, before any other tags. It tells the browser how to decode your page's characters. Without it, special characters — accented letters, em dashes, quotation marks, currency symbols — can render as garbled text or question marks. In Next.js and most modern frameworks this is set automatically, but on static or legacy HTML pages it is often missing. It has no direct ranking effect but prevents rendering errors that damage user experience and trust.
Twitter Card meta tags
Twitter (X) uses its own meta tag set (twitter:card, twitter:title, twitter:description, twitter:image) separate from Open Graph tags. If you only set OG tags, Twitter falls back to them but sometimes renders poorly. Setting explicit Twitter Card tags gives you precise control over how your link looks in the Twitter feed — particularly important for publisher sites and content marketing. The twitter:card type 'summary_large_image' displays a large image above the title and gets significantly more engagement than the default small-card format.
hreflang for multilingual sites
For sites serving content in multiple languages or targeting multiple regions, hreflang meta tags (or HTTP headers) tell Google which page version to serve to users in each locale. The format: <link rel='alternate' hreflang='en-gb' href='https://example.com/en-gb/page'>. Missing hreflang tags cause Google to serve the wrong language version to international users, reducing relevance and CTR. Common mistakes: missing the x-default hreflang, hreflang tags that do not reciprocate (page A points to page B but page B does not point back to page A), and incorrect locale codes.