Meta Tags for SEO and Sharing

Meta tags live in <head> and describe the page to browsers, search engines, and social platforms. None of them are visible on the page itself.

The essentials every page needs

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Page Title</title>
</head>
  • <meta charset="utf-8" /> sets the character encoding. Put it first inside <head>, so the browser reads the rest of the page correctly, including any special characters. Without it, accented letters and symbols can render as garbage.
  • <meta name="viewport" ...> tells mobile browsers to use the device’s actual width instead of pretending to be a wide desktop screen and zooming out. Without it, your page looks tiny and zoomed out on phones no matter how responsive your CSS is.
  • <title> sets the browser tab text and the clickable headline in search results. Every page needs a unique, descriptive one, don’t reuse the same title across a whole site.

Meta description

<meta name="description" content="A practical HTML guide covering document structure, semantic elements, forms, and accessibility." />

Search engines often show this as the snippet under your page’s title in results. It doesn’t affect ranking directly, but a clear, specific description makes people more likely to click. Keep it around 150-160 characters, longer text usually gets cut off.

Open Graph tags for social sharing

Open Graph tags control how a link looks when it’s shared on platforms like Facebook, LinkedIn, or Slack: the title, description, and preview image.

<meta property="og:title" content="HTML Basics - Dev Handbook" />
<meta property="og:description" content="A practical HTML guide covering document structure, semantic elements, forms, and accessibility." />
<meta property="og:image" content="https://example.com/images/html-basics-preview.png" />
<meta property="og:url" content="https://example.com/html/basics" />
<meta property="og:type" content="website" />
  • og:title and og:description can repeat or slightly rephrase your <title> and meta description.
  • og:image should point to a full URL (not a relative path), ideally at least 1200x630 pixels, so it renders sharply in preview cards.
  • og:url should be the canonical URL of the page, useful if the same content is reachable at more than one address.

Without Open Graph tags, most platforms fall back to guessing from your page content, which often produces a poor or blank preview.

Favicon

The small icon shown in browser tabs and bookmarks:

<link rel="icon" type="image/png" href="/favicon.png" />

Common mistakes

  • Missing <meta charset="utf-8" />, which can cause special characters to render incorrectly.
  • Missing the viewport tag, making pages unusable on mobile even with responsive CSS.
  • Reusing the exact same <title> and description on every page of a site.
  • Using a relative path for og:image. Social platforms fetch it separately and need a full URL.

FAQ

Do meta tags affect Google ranking directly?

The title and description influence click-through rate more than ranking itself. Ranking depends much more on your actual content, page structure, and links. Still worth getting right, since a good snippet is often the difference between someone clicking your result or a competitor’s.

Where should meta tags go in <head>?

charset should come first. After that, order doesn’t strictly matter, but keeping viewport, title, and description near the top makes the file easier to scan.

  • Semantic HTML : structuring the content these tags describe
  • Responsive Images : serving the right og:image size isn’t the same problem, but both are about serving the right asset for the context