SEO Checklist: Favicons, Performance, Accessibility, and Semantic HTML (Part 2)

Why this matters

This is part two of the SEO checklist series and it focuses on the often overlooked, but high-impact, technical details that influence click-through rate, search visibility, and user experience. Small things like a missing favicon or an unoptimized hero image can slow momentum after launch. This post explains what to fix before you go live and how to validate those fixes. Part one of this series is accessible here: SEO Checklist Part 1: Content and Entity Optimization.

Favicons: small asset, big impact

A favicon is more than a tiny branding asset in a browser tab. It can influence click-through rate from search engine results pages and contributes to the perceived professionalism of your site. Google may cache your favicon for a long time, so if your site doesn’t have a favicon when Google first crawls it, it can take weeks for their cache to update after you add one. Plan to set a favicon prelaunch to avoid a slow update cycle.

Implementation tips:

Use a standard favicon filename and include it in the site root and via a link tag in the head.
Provide multiple sizes and formats (ICO for legacy, PNG or SVG for modern browsers).
Test how your favicon appears in SERPs and on mobile.

Example link tags to include in your HTML head:

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

For guidance on how Google uses favicons, see the Google Search Central documentation in References.

Image optimization and loading strategies

Images are often the biggest contributors to slow pages. Make image optimization part of your development workflow:

Compress images so none exceed a practical limit; we aim to avoid serving images over 500 KB where possible.
Serve modern formats like WebP or AVIF for browsers that support them, falling back to PNG/JPEG as needed.
Preload critical above-the-fold images so the browser fetches them early.
Lazy load offscreen images to reduce initial payload and improve Time to Interactive.

Example preload and lazy load patterns:

<link rel="preload" as="image" href="/images/hero.jpg">
<img src="/images/hero.jpg" loading="eager" alt="Hero image">

<img src="/images/feature.jpg" loading="lazy" alt="Feature image">

See the image optimization guide linked in References for more techniques and tools.

Core Web Vitals and performance testing

Before launch, run tests that target Core Web Vitals metrics: Largest Contentful Paint (LCP), First Input Delay (FID) or Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). These metrics are central to how Google evaluates page experience and can directly affect rankings.

Actionable steps:

Measure locally and in field data using tools like PageSpeed Insights and Lighthouse.
Fix slow server response times, reduce JavaScript blocking, and optimize critical rendering paths.
Prioritize LCP optimizations, such as preloading fonts or hero images.

Use the performance testing and Core Web Vitals resources in References to validate improvements.

Accessibility and visual legibility

Search engines and modern language models increasingly consider accessibility and content clarity. Ensure your pages are readable and navigable for all users:

Verify color contrast ratios meet WCAG guidelines so text is legible against its background.
Provide meaningful alt attributes for images.
Ensure keyboard navigability and focus states are visible.

Accessibility improvements help SEO indirectly by improving user engagement and reducing bounce rates, and they are required for many enterprise and public-sector projects.

Semantic HTML: structure for machines and humans

Using native HTML elements correctly helps search engines and assistive technologies interpret your content. Semantic markup is faster for browsers to parse and provides clear hierarchies for crawlers.

Best practices:

Use <header> for page or section headers, and <nav> for navigation blocks.
Wrap footer content in <footer> and group related content with <section> or <article>.
Prefer <ul>/<ol> for lists and avoid building lists out of generic <div>s.
Use heading tags in logical order (h1 then h2, h3 etc.) to reflect document structure.

Example structure:

<header>
  <nav> <!-- primary navigation --> </nav>
</header>
<main>
  <section>
    <h1>Page title</h1>
    <p>Intro copy</p>
  </section>
</main>
<footer>Site footer content</footer>

For reference on semantic elements and best practices, consult the MDN documentation linked below.

Prelaunch checklist (summary)

[ ] Add and test a favicon before the first crawl
[ ] Compress and modernize images; preload above-the-fold assets
[ ] Lazy load noncritical images and defer nonessential scripts
[ ] Run Core Web Vitals tests and address LCP, CLS, and INP issues
[ ] Verify color contrast, alt text, and keyboard accessibility
[ ] Use semantic HTML elements to structure content clearly

Completing these items will improve how your site appears to users, search engines, and AI-driven systems that analyze web content.

References

Implementing these technical items before launch will help your site get indexed correctly, perform well in real-world conditions, and present professionally in search results. This concludes part two of the SEO checklist series. Keep an eye out for the next installment where we dive deeper into content structure and entity optimization.