On-Page SEO: Metadata & Meta Tags

Overview of On-Page SEO Focus for This Lesson

  • Objective: Introduce core on-page SEO concepts you must grasp before tackling advanced material.
  • Post-lesson capabilities you should gain:
    • Define the terms “metadata” and “meta tags.”
    • Visually dissect any search-engine results page (SERP) listing and pinpoint each metadata element.

Anatomy of a Search Result (SERP Listing)

  • Every search in a search engine returns a page composed of multiple individual results.
  • Each result contains several distinct regions that are all touchpoints for on-page SEO.
  • Collectively, these regions are known as a site’s metadata; individually, each region has its own label and SEO function.

Key Metadata Concepts & Definitions

  • Metadata

    • Literal meaning: “data that describes other data.”
    • Purpose in SEO: conveys critical, machine-readable information about a page’s content or crawling instructions.
    • Location: lives in a special area of the HTML source code; not directly visible on the rendered webpage.

  • Meta Tags

    • Tiny pieces of code that live inside the metadata section.
    • Examples include the title tag, meta description, robots tag, canonical tag, etc.
    • Function: tell search engines what the page is about, whether to index it, and other behavior guidelines.

  • Head Element

    • Part of the HTML structure: … .
    • Serves as a container for all metadata on that page.
    • Always located near the top of the page’s source code, prior to the visible content.

Breakdown of Individual Metadata Elements in a SERP

  • Title Tag

    • Appears as the blue, clickable headline in a Google result.
    • Defined by the page author inside the
    • Critical for conveying the page’s primary topic to both users and search engines.

  • URL / Web Address

    • Rendered below the title (often in green).
    • Pulled automatically by search engines; not something you manually specify as “metadata,” but it is still part of the visible listing.
    • Can influence user perception and CTR (click-through rate) through readability and keyword inclusion.

  • Meta Description

    • Short block of text shown under the URL.
    • Defined in HTML as .
    • Summarizes the page content and encourages clicks.
    • Search engines frequently highlight (bold) segments that match the user’s search terms.

  • Keywords Highlighting Behavior

    • Search engines bold any words in the title or description matching the query.
    • Includes pluralization, synonyms, or semantically related words.
    • Example: searching for “online winemaking course” causes “courses,” “online,” “winemaking,” and even “class” to appear bold, because Google detects plural and semantic relationships.

Practical Example: UC Davis Winemaking Certificate Program Result

  • Query used: “online winemaking course.”
  • Elements identified in the example listing:
    • Blue headline → Title Tag: announces the page’s official name given by the webmaster.
    • Green URL → Pulled directly from the page; shows the path to the resource.
    • Gray paragraph → Meta Description: descriptive teaser text with keyword bolding.
  • Demonstrated SEO insights:
    • Keyword variations (course/courses, class) still trigger bolding and relevance.
    • Good meta descriptions anticipate likely search phrases to maximize visibility.

Key Takeaways & Skills Check

  • You can now define:
    • Metadata: holistic set of SERP-display components.
    • Meta tags: individual snippets of code inside the head.
  • You can visually parse a search result and label:
    • Title Tag
    • URL
    • Meta Description
  • Recognized that the element is the technical home for all metadata.
  • Understood search engines’ treatment of synonyms, plurals, and semantically related words for bolding and relevance assessment.