SEO Optimization Checklist for Coding Your Website

Published at

1/11/2025

Is your website structure simple and flat?

When building your website, it is ideal to have a clear picture of how your website structures. Using a flat structure is beneficial to SEO and user experience in many folds.

It is easier to crawl by the search engines, provides stronger link equity and user can find the web pages faster because they are closer to the homepage.

Planning ahead can also avoid orphan page which is not linked by any other page.

Have you use the correct meta tag?

What is meta tag?
Meta tag is a piece of code place in the <head></head> that provide search engine informations about your web page

Some common meta tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- Specifies the character encoding for the document -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures responsive design on mobile -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Improves compatibility with Internet Explorer -->

    <!-- SEO Meta Tags -->
    <meta name="description" content="A detailed guide on the best travel destinations and tips."> <!-- Page description -->
    <meta name="keywords" content="travel, destinations, tips, blog"> <!-- Keywords for search engines (less relevant now) -->
    <meta name="author" content="Your Name"> <!-- Author of the webpage -->

    <!-- Social Media Meta Tags (Open Graph Protocol) -->
    <meta property="og:title" content="Best Travel Blog - Explore Destinations">
    <meta property="og:description" content="Discover the best travel tips and top destinations.">
    <meta property="og:image" content="https://example.com/image.jpg"> <!-- Thumbnail image for sharing -->
    <meta property="og:url" content="https://example.com/travel-blog">
    <meta property="og:type" content="website">
    <title>Best Travel Blog</title>
</head>
<body>
    <h1>Welcome to the Best Travel Blog</h1>
</body>
</html>

Did you create a XML sitemap?

Sitemap can be defferentiate into 2 types, one is in XML format which allows search engine to crawl your website more easily.

Example XML Sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://example.com/</loc>
        <lastmod>2025-01-10</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://example.com/about</loc>
        <lastmod>2025-01-08</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>
</urlset>

Another is in human readable form that users can understand and navigate your website more fast and easy. Normally footer can serve the same function

Example:

Did you create a the robot.txt file?

Robots.txt is a plain text file that is placed on the root directory of your website. It provides instructions to the search engine on how to crawl your website.

It specifies which part of your website/ resources should or should not be crawled.

Example of robot.txt

# Block all crawlers from accessing the admin area
User-agent: *
Disallow: /admin/

# Allow Googlebot to access the entire site
User-agent: Googlebot
Disallow:

# Prevent all crawlers from accessing specific files
User-agent: *
Disallow: /private-info.html
Disallow: /temp/

# Provide a link to the sitemap
Sitemap: https://example.com/sitemap.xml

Did you add hreflang and canonical information ?

If your site is multilingual, it is best to add hreflang and canonical tags, so that search engine would know these pages with similar content are variants.

Example:

<link rel="canonical" href="https://example.com/" />
<link rel="alternate" hreflang="en-us" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-ca" href="https://example.com/ca/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Did you create schema markup?

Schema markup, also known as structured data, is a piece of code that you added to your HTML files to help search engine understand your content.

Remeber the recipes or product carousel on the top or right of Google search result you see when you’re searching? This is generated from the schema markup.

There are various type of markup, like product markup, article markup or orgnisation markup.

Here is an example of product markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Smartphone XYZ",
  "image": "https://example.com/product-image.jpg",
  "description": "A high-performance smartphone with 128GB storage.",
  "brand": {
    "@type": "Brand",
    "name": "TechBrand"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "499.99",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/smartphone-xyz/"
  }
}
</script>

Did you code your image tag properly?

When it comes to the image, there is a lot to talk about. We focus the performance aspect in the next section. Here we look at the tag itself.

Here is the most basic img tag should look like

# include alt, width and height
<img src="example.jpg" alt="An example image" width="600" height="400">

You should use proper rel attribute if necessary

rel values	usage
noopener	used when linking to external sites to improve security and privacy
noreferrer	sed when linking to external sites to improve security and privacy
nofollow	tell search engines not to follow the link for SEO purposes, preventing the passing of link equity
sponsored	indicates that a link is paid or sponsored

How is your core web vitals?

Website performance is one of the core metrics for ranking. Google search engine uses Core Web Vitals (CWV) to measure how fast and how good your website user experience are. It consists of 3 metrics LCP, INP and CLS

Here is the standard suggested by Google

To measure your Core Web Vitals score, you can use Lighthouse built in the Chrom Devtools and PageSpeed Insight provided by Google.

To improve your score, here are some techniques you can consider:

Minify CSS, Javascript
Rendering image with the correct size
Use webp format for image
Preloading critique assets
Lazyloading when possible
Use CDN, cache

Above are some of the things to consider when building a SEO optimised. If there is anything missed, comment down belows!

dev-resources.site