HTML Course 15. On-page SEO with HTML

In this lesson we explore how to optimize your HTML markup for on-page SEO. We’ll cover essential elements like the title tag, meta descriptions, heading structure, semantic markup, image alt attributes, canonical URLs, schema.org structured data, internal linking, and Open Graph tags. Properly implementing these items improves search engine crawlers’ understanding of your content and boosts rankings.

1. Title Tag Optimization

The <title> tag is one of the most important on-page signals. Search engines display it as the clickable headline.

Keep titles under ~60 characters.
Place primary keyword near the beginning.
Avoid duplicate titles across pages.


On-page SEO Techniques – HTML Course 15

2. Meta Description

The <meta name='description'> tag provides a summary. While not a ranking factor, it influences click-through rate.

Length: 150–160 characters.
Include target keyword and call-to-action.
Unique description per page.

3. Heading Structure (H2, H3, H4…)

A logical heading hierarchy makes content scannable for both users and search engines.

Use a single H1 per page (often automated by templates).
Subheadings: H2 for main sections, H3 for subsections, etc.
Include keywords naturally in headings.


What Is On-page SEO?
Benefits of Proper HTML Markup
Improved Crawlability

4. Semantic HTML

Using semantic elements helps search engines understand page context.

<article> for standalone content.
<section> for thematic grouping.
<nav> for navigation menus.
<aside> for sidebars or related content.
<footer> for page footers.



  
    Understanding Semantic HTML
    Semantic tags describe their meaning to browsers and crawlers.
  
  
    Related Topics
    
      Accessibility
      Structured Data

5. Image Optimization with Alt Text

Search engines can’t read images directly; alt attributes provide context.

Write descriptive, concise alt text (under 125 characters).
Include keywords where relevant, but avoid stuffing.
Use <figure> and <figcaption> for captions.



  
  Key on-page SEO elements: title, meta, headings, structured data.

6. Canonical Tags

Prevent duplicate content issues by specifying the preferred URL.

Place in the <head> of duplicate or similar pages.
Point to the canonical (main) version.

7. Internal Linking

Strategic internal links help distribute link equity and guide crawlers.

Use descriptive anchor text.
Link to related topics or deeper articles.
Avoid orphan pages (pages with no inbound links).

To learn about JSON-LD, see our Structured Data with JSON-LD tutorial.

8. Structured Data with schema.org

Add JSON-LD or Microdata to provide rich results in SERPs (reviews, FAQs, breadcrumbs).

Choose appropriate schema type (Article, BreadcrumbList, FAQPage, etc.).
Validate with Google’s Rich Results Test.

9. Robots Meta Tags

Control indexing and crawling:

index vs noindex
follow vs nofollow
Use max-snippet, max-image-preview, max-video-preview for advanced control.

10. Open Graph and Twitter Cards

Improve social media sharing with proper tags:

og:title, og:description, og:image.
Twitter-specific tags: twitter:card, twitter:title, twitter:image.

Summary

By meticulously crafting your HTML—titles, metas, headings, semantics, alt text, structured data, internal links, and social tags—you ensure search engines accurately interpret and rank your content. Implement these on-page SEO techniques to maximize visibility and improve user experience.

HTML Course 15. On-page SEO with HTML