Course Outline (Part 8)

Welcome to Part 8 of the HTML5 & Semantic Web Development Course. In this final part of the course, we will cover SEO (Search Engine Optimization) & Metadata.

No matter how beautiful or accessible your website is, it won’t succeed if users can’t find it. Search engines like Google use automated bots (crawlers) to index and evaluate your website. By using correct metadata, head tags, and structured schema, you can communicate directly with search engines to improve your visibility and search rankings.

Chapter 40: Metadata and SEO

40.1 What is SEO?

Search Engine Optimization is the practice of structuring and optimizing your website’s content, layout, and HTML tags to achieve higher organic (free) rankings on search engines.

40.2 The Search Engine Workflow

  1. Crawling: Search bots (like Googlebot) visit your site and download the HTML code.
  2. Indexing: Google parses the content, structure, and metadata, adding the page details to its massive index database.
  3. Ranking: When a user enters a search query, Google runs an algorithm to decide which pages in its index are most relevant and reliable, displaying them in order.

Chapter 41: Critical SEO Head Tags

The <head> block contains tags that directly control how search engines display your site in their Search Engine Results Pages (SERPs).

41.1 Title Tag (<title>)

The title tag defines the document’s title. It is the single most important on-page SEO factor.

  • Best Practice: Keep titles between 50–60 characters. Include your primary keywords at the start, followed by your brand name.
<title>Learn HTML5 From Scratch: Beginner Tutorial | Free Tech Learner</title>

41.2 Meta Description (<meta name="description">)

Provides a short summary of the webpage. Search engines display this description below your title on search results page.

  • Best Practice: Keep descriptions between 120–160 characters. Write engaging copy that encourages users to click.
<meta name="description" content="Step-by-step HTML5 course for beginners. Master semantic tags, forms, tables, web accessibility, and SEO with practical code examples.">

If you have multiple URLs with identical content (e.g., index.html and index.html?ref=social), search engines might penalize your site for duplicate content. Use a canonical link to define the primary, official version of the page.

<link rel="canonical" href="https://freetechlearner.com/courses/html">

Chapter 42: Social Sharing Meta Tags (Open Graph & Twitter Cards)

When links to your website are shared on platforms like Slack, Facebook, LinkedIn, or Twitter, these platforms generate card previews containing an image, title, and description. This is handled using metadata protocols.

42.1 The Open Graph Protocol (og:)

Developed by Facebook, this standard is supported by almost all social networks.

<meta property="og:title" content="HTML5 & Semantic Web Development Course">
<meta property="og:description" content="Learn HTML from scratch with our step-by-step interactive course.">
<meta property="og:image" content="https://freetechlearner.com/images/course-card.png">
<meta property="og:url" content="https://freetechlearner.com/courses/html">
<meta property="og:type" content="website">

42.2 Twitter Cards

Twitter uses its own set of tags, falling back to Open Graph if they are missing.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML5 & Semantic Web Development Course">
<meta name="twitter:description" content="Learn HTML from scratch with our step-by-step interactive course.">
<meta name="twitter:image" content="https://freetechlearner.com/images/course-card.png">

Chapter 43: Sitemaps, Robots, and Discovery

You can guide search engine bots on which pages they should crawl.

43.1 Robots Meta Tag

Tells search engines whether to index a page or follow the links on it.

  • index, follow (default): Crawl and show this page.
  • noindex, nofollow: Do not index this page or follow any links. Useful for admin panels or staging sites.
<meta name="robots" content="noindex, nofollow">

43.2 Robots.txt File

A standalone text file (robots.txt) placed in your website’s root directory (public/robots.txt) that gives directives to search crawlers:

User-agent: *
Disallow: /admin/
Allow: /

Sitemap: https://freetechlearner.com/sitemap-index.xml

Chapter 44: Introduction to Structured Data (JSON-LD)

Structured Data helps search engines understand the context of your content, allowing them to display rich snippets (like star ratings, recipes, event details, or search boxes) next to your search results. We implement structured data using JSON-LD (JavaScript Object Notation for Linked Data).

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "HTML5 & Semantic Web Development Course",
  "description": "Master the building blocks of the web, semantic tags, forms, tables, accessibility, and SEO.",
  "provider": {
    "@type": "Organization",
    "name": "Free Tech Learner",
    "sameAs": "https://freetechlearner.com"
  }
}
</script>

Placing this script in your webpage provides search engines with precise, machine-readable information about your course, greatly boosting search visibility!

Discussion

Loading comments...