Meta Tags and SEO Basics

Analogy categoryAnalogies

Introduction

Meta tags are elements placed inside the <head> of an HTML document that provide metadata about the page — information not displayed directly to users but read by browsers, search engines, and social media platforms. They influence how a page is indexed, how it renders on different devices, and how it appears when shared as a link.

🏏

Cricket analogy: Meta tags are like the team sheet handed to the umpires before a match — fans in the stands never see it, but it tells officials and broadcasters everything about lineup and conditions that shapes how the match is presented.

Syntax

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Guide | SkillVeris</title>
  <meta name="description" content="Learn semantic HTML elements and best practices for accessible, SEO-friendly markup.">
  <meta name="robots" content="index, follow">
</head>

Explanation

The charset meta tag declares the document's character encoding (UTF-8 is standard). The viewport meta tag controls layout on mobile devices, telling the browser to match the screen's width and set an initial zoom level, which is essential for responsive design. The description meta tag summarizes the page for search engine result snippets — Google often displays it directly under the title link. The robots tag tells crawlers whether to index the page and follow its links. The <title> element, while not technically a <meta> tag, is one of the most important on-page SEO signals.

🏏

Cricket analogy: The charset tag is like ensuring the scorecard is written in a language every stadium screen can display correctly; the viewport tag is like adjusting the stadium's big screen zoom for fans watching on a smaller handheld radio-style device; the description meta is the one-line match summary shown in the newspaper listings, and the title is the headline itself — the single most important signal for grabbing a reader's attention.

Example

html

<!-- Open Graph tags for social sharing -->
<meta property="og:title" content="Semantic HTML Guide">
<meta property="og:description" content="Learn semantic HTML for better accessibility and SEO.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:type" content="article">

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

Output

None of these tags render visible content on the page itself. Instead, their effects appear elsewhere: the title and description show up in a Google search result snippet, the Open Graph and Twitter Card tags control the preview card image, title, and description shown when the URL is shared on platforms like Facebook, LinkedIn, or X, and the viewport tag changes how the layout scales on a phone versus a desktop.

🏏

Cricket analogy: None of these tags appear on the stadium screen itself; instead, the title and description are like what's printed in the match preview column, the Open Graph tags control how the match photo and score appear when shared on a fan's social feed, and the viewport tag is like adjusting the broadcast layout differently for a phone stream versus a stadium jumbotron.

Key Takeaways

Meta tags live in <head> and provide metadata, not visible content.
<meta charset="UTF-8"> and the viewport meta tag are essential on virtually every page.
The description meta tag often becomes the search result snippet text.
Open Graph and Twitter Card tags control how links preview on social media.
A unique, descriptive <title> per page is one of the strongest on-page SEO signals.