Meta Tags, SEO and Page Performance

Learn the HTML head tags that matter for SEO and sharing: title, meta description, canonical, Open Graph and structured data, plus Core Web Vitals basics.

• Intermediate
• 16 min read
• 4 objectives

Before this lessonLesson 3: Images, Media and Accessibility

Everything inside <head> is invisible on the page, yet it decides how your site appears in Google, how a link preview looks in Slack or LinkedIn, and how fast the page feels. Search engines reward pages that are clear about what they contain and load quickly, so these few lines have an outsized effect on traffic.

This lesson builds a production-quality head step by step, then covers the performance habits that search engines measure as Core Web Vitals.

The essentials every page needs

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Learn CSS Grid in 20 Minutes | stackcone</title>
  <meta name="description" content="A hands-on CSS Grid tutorial: rows, columns, named areas and responsive layouts without media queries. Free, with exercises.">
  <link rel="canonical" href="https://stackcone.com/learn/css-grid/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>

• lang on <html> tells screen readers and search engines the language.
• charset must come first so the browser decodes text correctly.
• viewport is required for the page to render properly on phones (without it, mobile browsers zoom out to a fake 980px desktop width).
• <title> is the clickable blue headline in search results and the browser tab text. Keep it unique per page and around 50-60 characters, most important words first.

Meta description and canonical URLs

The meta description is not a ranking factor by itself, but Google often shows it as the snippet under your title. A clear, specific description (roughly 120-155 characters) earns more clicks. Write it for humans, and include the phrase people actually search for.

The canonical link solves duplicate content. The same page is often reachable at several URLs: with and without a trailing slash, with tracking parameters like ?utm_source=newsletter, or on both www and the bare domain. The canonical tells search engines which one is the real address, so ranking signals are not split.

Robots and indexing

Some pages should not appear in search: login screens, thank-you pages, internal search results. Use the robots meta tag:

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

Site-wide rules live in /robots.txt, and a /sitemap.xml lists the URLs you want crawled. Note the difference: robots.txt blocks crawling, while noindex blocks indexing. If robots.txt blocks a page, Google can never see its noindex tag.

Social previews: Open Graph

When someone pastes your link into LinkedIn, Slack, WhatsApp or X, those apps read Open Graph tags to build the preview card. Without them, you get a bare URL or a random image.

<meta property="og:type" content="article">
<meta property="og:title" content="Learn CSS Grid in 20 Minutes">
<meta property="og:description" content="Rows, columns, named areas and responsive layouts, with exercises.">
<meta property="og:url" content="https://stackcone.com/learn/css-grid/">
<meta property="og:image" content="https://stackcone.com/og/css-grid.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

1200 by 630 pixels is the standard preview image size. X falls back to Open Graph for title, description and image, so the single twitter:card line is usually all you need for it.

Structured data with JSON-LD

Structured data describes your content in a machine-readable vocabulary (schema.org). It can make you eligible for rich results such as breadcrumbs, FAQ answers, product ratings or course listings. Google recommends the JSON-LD format, which sits in a script tag and does not touch your visible markup.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn CSS Grid in 20 Minutes",
  "author": { "@type": "Person", "name": "Ada Lovelace" },
  "datePublished": "2026-03-10",
  "dateModified": "2026-09-01",
  "image": "https://stackcone.com/og/css-grid.png"
}
</script>

Only mark up what is actually visible on the page, then check it with Google's Rich Results Test. Structured data that does not match the page can be ignored or penalised.

Core Web Vitals

Google measures real-user performance with three metrics and uses them as a ranking signal:

• LCP (Largest Contentful Paint): how quickly the main content (often the hero image or headline) appears. Aim for under 2.5 seconds.
• INP (Interaction to Next Paint): how quickly the page responds to clicks and taps. Aim for under 200 milliseconds. It replaced FID in 2024.
• CLS (Cumulative Layout Shift): how much content jumps around while loading. Aim for under 0.1.

HTML tricks that make pages faster

Many performance wins are just attributes in your HTML:

<head>
  <!-- Open the connection to a third-party origin early -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Critical CSS first; it blocks rendering, so keep it lean -->
  <link rel="stylesheet" href="/css/site.css">

  <!-- Scripts: defer runs after HTML is parsed, in order -->
  <script src="/js/app.js" defer></script>
  <!-- async runs as soon as it downloads; fine for independent analytics -->
  <script src="/js/analytics.js" async></script>
</head>
<body>
  <!-- The LCP image: load eagerly and at high priority -->
  <img src="/img/hero.webp" alt="stackcone course dashboard" width="1600" height="900" fetchpriority="high">

  <!-- Images further down: lazy -->
  <img src="/img/team.webp" alt="The stackcone team" width="800" height="500" loading="lazy">
</body>

• A plain <script> in the head stops HTML parsing until it downloads and runs. Use defer for your own scripts.
• fetchpriority="high" on the hero image improves LCP. Never lazy-load it.
• width and height on every image and video prevent CLS.
• Compress images, serve WebP or AVIF, and keep fonts to a few weights.

Recap

• Every page needs lang, charset, viewport, a unique <title> and a specific meta description.
• Use an absolute canonical URL to consolidate duplicates; use noindex for pages that should stay out of search.
• Open Graph tags (with a 1200x630 image) control link previews on social and chat apps.
• JSON-LD structured data can unlock rich results; only describe visible content.
• Protect Core Web Vitals: defer scripts, prioritise the hero image, lazy-load the rest, and always set image dimensions.

// Write your solution here