HTML SEO Essentials

Optimize your code to rank higher in search results and look professional on social media.

`Content Structure & Indexing`

Search engines act like readers. They look for clear headings and instructions on how to treat your page.

Proper heading structure : Using <h1> through <h6> in a logical order to create a content hierarchy.
Canonical URLs : The <link rel='canonical'> tag tells search engines which URL is the original source to avoid duplicate content penalties.
Robots meta tag : Used to tell crawlers if they should index the page ('index') or follow the links on it ('follow').
Sitemap basics : An XML file that lists all the important pages of your website to ensure search engines find them.

SEO Meta Tags

Essential head elements that tell search engines what the page is about and how to index it.

<head>
  <title>Master HTML SEO | Web Dev Docs</title>
  <meta name="description" content="Learn essential HTML SEO techniques including meta tags, Open Graph, and JSON-LD.">
  <link rel="canonical" href="https://example.com/html-seo">
  <meta name="robots" content="index, follow">
</head>
<body>
  <h1>Master HTML SEO</h1>
  <p>This Page contains meta tags, title, and other essential SEO elements.</p>
</body>

`Social Media Optimization`

When someone shares your link, you want it to look inviting. Meta tags control the preview image, title, and description.

Open Graph tags : Developed by Facebook to allow any web page to become a rich object in social graphs.
Twitter cards : Specific meta tags that allow Twitter to attach rich photos and videos to Tweets.
Meta description : A short summary of the page (approx. 155 characters) that often appears in search result snippets.

Social Media Optimization

Using Open Graph and Twitter Cards to control how links look when shared on social platforms.

<head>
        <meta property="og:title" content="HTML SEO Essentials">
        <meta property="og:image" content="https://picsum.photos/seed/picsum/200/300">

        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="HTML SEO Essentials">
        </head>
        <body>
        <h1>HTML SEO Essentials</h1>
        <p>When shared on social media, this page will have a custom title and image.</p>
        </body>

`Rich Results & Schema`

Structured data helps search engines understand the 'type' of content you have, like a recipe, a review, or a product.

Schema.org : A collaborative effort to create a universal vocabulary for structured data on the web.
Structured data (JSON-LD) : A script-based format (recommended by Google) that provides explicit data to search engines.
Microdata : An older way of nesting metadata within existing HTML content using attributes like 'itemprop'.
Rich Snippets : The enhanced search results (stars, prices, images) that appear when you use structured data correctly.

JSON-LD Structured Data

Providing explicit information to search engines about the type of content on the page.

<head>
  <title>HTML SEO Essentials</title>

  <!-- JSON-LD Structured Data (place inside <head>) -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML SEO Essentials",
    "author": {
      "@type": "Person",
      "name": "Gemini"
    }
  }
  </script>
</head>
<body>
  <article>
    <h1>HTML SEO Essentials</h1>
    <p>This article includes structured data to help search engines understand the content.</p>
  </article>
</body>

Knowledge Check

1. Which tag is used to prevent duplicate content issues by telling Google which version of a URL is the 'main' one?

2. Which protocol is used to control how a webpage looks when shared on Facebook or LinkedIn?

3. What is the primary purpose of the 'robots' meta tag?

4. Which format is currently recommended by Google for adding Structured Data (Schema.org)?

5. Why is proper heading structure (H1 through H6) important for SEO?

6. Which element provides the clickable headline in Google search results?

Previous Next