Modern SEO for HTML5 Websites: Step-by-Step Guide

1. Semantic HTML5 Structure

What to Do: Use semantic HTML5 tags like <header>, <nav>, <main>, <section>, <article>, <footer>.

Why: Helps search engines understand content structure, improves accessibility, and supports better indexing.

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <section>...</section>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

2. Meta Tags for SEO

What to Do: Include these tags in your <head>:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title Here</title>
<meta name="description" content="Brief and keyword-rich summary of your page.">
<meta name="robots" content="index, follow">

Why: Boosts search appearance, helps mobile-first indexing, and clarifies your content’s topic.

3. Use H1–H6 Headings Properly

What to Do: Use one <h1> per page, and nest subsequent headings appropriately:

<h1>Main Topic</h1>
<h2>Subsection</h2>
<h3>Detail under Subsection</h3>

Why: Reinforces content structure and keywords for search engines.

4. Optimize URLs

What to Do: Use clean, readable URLs with keywords:

❌ /page?id=123
✅ /best-wireless-headphones-2025

Why: Improves CTR, helps with ranking relevance, and makes links more shareable.

5. Internal Linking Strategy

What to Do: Use descriptive anchor text to link to internal pages:

<a href="/seo-tips" title="Read modern SEO tips">modern SEO tips</a>

Why: Improves crawlability and distributes link equity across your site.

6. Image Optimization

What to Do:

Use descriptive alt attributes.
Use compressed modern formats like .webp.
Use loading="lazy" on non-critical images.

<img src="jeff-doyle-photo.webp" alt="Jeff Doyle speaking at a tech conference" loading="lazy">

Why: Helps image SEO, accessibility, and page speed (a ranking factor).

7. Mobile-First and Core Web Vitals

What to Do: Ensure your site is responsive and optimized for speed. Focus on these metrics:

LCP – Largest Contentful Paint
FID – First Input Delay
CLS – Cumulative Layout Shift

Use Google Lighthouse or PageSpeed Insights to test and improve.

Why: Google uses mobile-first indexing and Core Web Vitals as direct ranking signals.

8. Schema.org Structured Data

What to Do: Use JSON-LD in the <head> or <body>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Jeff M Doyle",
  "url": "https://www.jeffmdoyle.com"
}
</script>

Why: Enables rich search features (stars, FAQs) and helps Google understand your site.

9. Sitemap and robots.txt

What to Do: Create a sitemap.xml and a robots.txt file:

# robots.txt
User-agent: *
Disallow: /private/
Allow: /
Sitemap: https://www.jeffmdoyle.com/sitemap.xml

Why: Directs bots to crawl your content efficiently and avoids unnecessary indexing.

10. Submit to Google Search Console & Bing Webmaster

What to Do:

Verify domain ownership
Submit sitemap.xml
Monitor coverage, keyword performance, and mobile usability

Why: Gives you direct insights into your site’s indexing status and performance.