Meta Tags & SEO

Meta tags are snippets of text that describe a page's content; they don't appear on the page itself, but only in the page's code. They are essential for search engine optimization (SEO) and for ensuring your site displays correctly on all devices. ⚙️

Basic Meta Tag Syntax

<head>
  
  <meta charset="UTF-8">

  
  <meta name="description" content="A brief summary of the page content.">

  
  <meta name="author" content="John Doe">
</head>
→
[These tags are invisible on the page but are read by browsers and search engines]

Key points about <meta> tags:

  • They are always placed inside the <head> element.
  • They are "empty" elements, meaning they don't need a closing tag.
  • They provide metadata using attributes like charset or name and content pairs.

SEO: Description & Keywords


<meta name="description" content="Learn the basics of HTML meta tags to improve your website's SEO and display on different devices.">


<meta name="keywords" content="HTML, meta tags, SEO, web development, viewport">
→
[Search engines like Google may use the description for the search result snippet]

SEO best practices:

  • Description: Write a compelling summary (around 150-160 characters) to encourage clicks from search results.
  • Keywords: List relevant, comma-separated keywords. While major search engines deprioritized them, they can still provide context to some crawlers.
  • Each page on your site should have a unique description and set of keywords.

The Viewport for Responsive Design


<meta name="viewport" content="width=device-width, initial-scale=1.0">
→
[Tells the browser to match the screen width and not to zoom out]

Why the viewport tag is essential:

  • width=device-width sets the width of the page to the screen width of the device.
  • initial-scale=1.0 sets the initial zoom level when the page is first loaded.
  • Without it, mobile browsers render pages at desktop screen widths and then scale them down, making them unreadable without zooming.

Practical Use: Social Media Sharing


<meta property="og:title" content="Meta Tags & SEO Lesson">
<meta property="og:description" content="Learn how to optimize pages with meta tags.">
<meta property="og:image" content="https://example.com/images/seo-lesson.jpg">
<meta property="og:url" content="https://example.com/lessons/html-meta-tags">


<meta name="twitter:card" content="summary_large_image">
→
[Controls how your page looks when shared on social media, creating a rich preview]

Using social media meta tags (like Facebook's Open Graph protocol) ensures that when your page is shared, it displays with a rich preview containing a title, description, and image you specify.

Your Task: Optimize with Meta Tags

Edit the starter code to properly optimize the page. Inside the <head> tag, you need to add:

  1. The UTF-8 character set meta tag to ensure text displays correctly.
  2. A description meta tag with a brief, clear summary of the page's content.
  3. A keywords meta tag with at least three relevant, comma-separated keywords.
  4. The standard viewport meta tag to ensure the page is mobile-friendly.
Section 1/5Basic Meta Tag Syntax

Basic Meta Tag Syntax

Key points about <meta> tags:They are always placed inside the <head> element.They are "empty" elements, meaning they don't need a closing tag.They provide metadata using attributes like charset or name and content pairs.

Meta Tags & SEO

Meta tags are snippets of text that describe a page's content; they don't appear on the page itself, but only in the page's code. They are essential for search engine optimization (SEO) and for ensuring your site displays correctly on all devices. ⚙️

Basic Meta Tag Syntax

<head>
  
  <meta charset="UTF-8">

  
  <meta name="description" content="A brief summary of the page content.">

  
  <meta name="author" content="John Doe">
</head>
→
[These tags are invisible on the page but are read by browsers and search engines]

Key points about <meta> tags:

  • They are always placed inside the <head> element.
  • They are "empty" elements, meaning they don't need a closing tag.
  • They provide metadata using attributes like charset or name and content pairs.

HTML Editor

Preview