Skip to content
C Codeloom
HTML & CSS

HTML Meta Tags and SEO Fundamentals

A practical tour of the meta tags every page should ship — title, description, viewport, charset, Open Graph, Twitter cards, canonical, robots, and a gentle intro to JSON-LD.

·7 min read · By Yash Kesharwani
Beginner 11 min read

What you'll learn

  • ✓What goes in <head> and why
  • ✓How <title> and meta description shape search results
  • ✓The viewport and charset tags every page needs
  • ✓Open Graph and Twitter cards for nice social previews
  • ✓When and how to use canonical URLs and robots directives
  • ✓A first look at JSON-LD structured data

Prerequisites

Meta tags are the small bits of HTML in <head> that nobody sees but everybody reads — Google, Bing, Twitter, Slack, LinkedIn, your own browser. Get them right and your page shows up cleanly in search results, social previews, and tabs. Get them wrong and you ship pages that look broken when shared.

This is the practical baseline every site should have.

The minimum head

A new HTML file should always start with this much:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title — Site name</title>
    <meta name="description" content="A short summary of this page.">
  </head>
  <body>…</body>
</html>

Every line earns its place. Let’s go through them.

<meta charset>

<meta charset="utf-8"> tells the browser how to decode the bytes of the file as text. UTF-8 supports every character in every language, including emoji, and is the only sensible choice in 2026.

Put it as the first thing inside <head>. The browser needs to know the character set before it parses anything else.

<meta viewport>

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

Without this tag, mobile browsers pretend the screen is about 980px wide and zoom out the page. Your responsive CSS never gets a chance to run. With it, the browser uses the actual device width and your media queries kick in.

This is non-negotiable for any modern site.

<title>

The <title> element does several jobs at once:

  • It is the browser tab label.
  • It is the bookmark name.
  • It is the big blue link in Google search results.
  • It is the default text when someone shares the URL.
<title>HTML Meta Tags and SEO Fundamentals — CodeLoom</title>

A good title is specific (matches the page), front-loaded (the important words come first because Google may truncate around 60 characters), and branded (often ends with the site name).

Avoid templated junk like “Home | Welcome | MySite | Best site ever”. Avoid the same title on every page — search engines treat it as a quality signal.

Meta description

<meta name="description"
      content="A practical tour of the meta tags every page should ship.">

The description does not directly affect ranking, but it usually appears under the title in the search result. A clear, specific description gets more clicks than a vague one.

Aim for roughly 120–160 characters. Match what the page is actually about. Do not stuff keywords — search engines have been ignoring that since the early 2000s.

If you do not supply a description, the search engine picks a snippet for you. Sometimes it is fine; sometimes it is the fine-print at the bottom of the page.

Try it. Open a page on your site, view source, and look at the <title> and meta description. Read them out loud. Are they specific to this page, or could you paste them onto any page on the site?

Open Graph: nice social previews

When you paste a URL into Slack, Discord, Facebook, LinkedIn, or iMessage, you get a preview card with a title, description, and image. Those previews come from Open Graph tags.

<meta property="og:title" content="HTML Meta Tags and SEO Fundamentals">
<meta property="og:description"
      content="A practical tour of the meta tags every page should ship.">
<meta property="og:image" content="https://codeloom.dev/og/meta-tags.png">
<meta property="og:url" content="https://codeloom.dev/blog/html-meta-tags-and-seo">
<meta property="og:type" content="article">

The four important ones:

  • og:title — usually the same as <title> without the site suffix.
  • og:description — can repeat the meta description, or be slightly different.
  • og:image — an absolute URL to a 1200×630 image. This is the picture that appears in the preview card.
  • og:url — the canonical URL of the page.

Use an absolute https:// URL for the image. Relative paths will not resolve when scraped by other servers.

Twitter cards

Twitter (and now X) understands Open Graph, but a single extra tag tells it to render a big-image card:

<meta name="twitter:card" content="summary_large_image">

You can override OG values with twitter:title, twitter:description, and twitter:image if you want a different preview on Twitter, but you usually do not need to.

Canonical URLs

A canonical URL tells search engines which version of a page is the real one. It matters when the same content is reachable at multiple URLs — for example with and without www, with tracking parameters, or behind A/B variants.

<link rel="canonical" href="https://codeloom.dev/blog/html-meta-tags-and-seo">

Each page should point to itself as canonical. If you have a duplicate page (a print version, a paginated archive page) you can point it at the primary version to consolidate ranking signals.

Get this wrong — for example, every page canonicalizes to your homepage — and you can make your entire site invisible to Google. It is worth double-checking after any framework upgrade.

Robots directives

The robots meta tag controls indexing and link-following on a per-page basis:

<!-- The default: index this page and follow its links -->
<meta name="robots" content="index, follow">

<!-- Keep this page out of search results -->
<meta name="robots" content="noindex, follow">

<!-- Internal admin page -->
<meta name="robots" content="noindex, nofollow">

Use noindex for thank-you pages, login pages, internal tools, draft content, and any URL you do not want appearing in search results.

For broader rules — like blocking entire directories — use robots.txt at the site root. Per-page tags are for individual pages.

A JSON-LD primer

Structured data lets you describe what a page is about in a machine-readable way, so search engines can render rich results — recipe cards, FAQs with expandable answers, breadcrumbs, article authorship.

The recommended format is JSON-LD, embedded in a <script type="application/ld+json"> tag.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Meta Tags and SEO Fundamentals",
  "datePublished": "2026-06-16",
  "author": {
    "@type": "Person",
    "name": "CodeLoom"
  },
  "image": "https://codeloom.dev/og/meta-tags.png"
}
</script>

Schema.org defines hundreds of types: Article, Recipe, Product, FAQPage, BreadcrumbList, Organization, Person. Pick the one that matches your content.

You do not need structured data on every page. Start with article markup on blog posts and breadcrumbs on hierarchical pages. Validate with Google’s Rich Results Test before assuming it works.

Try it. Paste a URL from your site into Slack or a private Twitter draft. Does the preview look right? If not, your Open Graph tags need attention — probably og:image.

A reusable head template

Put this in your layout and customize per page:

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

  <title>{title} — CodeLoom</title>
  <meta name="description" content="{description}">
  <link rel="canonical" href="{absoluteUrl}">

  <!-- Open Graph -->
  <meta property="og:title" content="{title}">
  <meta property="og:description" content="{description}">
  <meta property="og:image" content="{absoluteImageUrl}">
  <meta property="og:url" content="{absoluteUrl}">
  <meta property="og:type" content="article">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- Favicon -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

Wire up the placeholders to your CMS, frontmatter, or framework data. Then every new page ships with the basics.

What does not matter (much)

A few tags get a lot of attention but do not earn their keep:

  • <meta name="keywords"> — Google has ignored this for over fifteen years.
  • <meta name="author"> — fine to include but has minimal SEO effect.
  • <meta name="generator"> — purely informational.

Spend your time on titles, descriptions, structured data, page speed, and content quality instead.

Recap

Every page should ship with:

  • <meta charset="utf-8"> and a viewport tag.
  • A unique, specific <title> and meta description.
  • Open Graph tags for social previews — at minimum title, description, image, URL.
  • <link rel="canonical"> pointing to the page’s real URL.
  • A robots tag where you need to control indexing.
  • JSON-LD structured data where it earns rich results.

Next steps

Questions or feedback? Email codeloomdevv@gmail.com.