SEO – Search Engine Optimization for the Web

An overview of how to search-engine-optimize websites

Content for a webpage is its normal use. Obviously. Though content isn’t necessarily text, but text is needed for SEO. Write quality content for humans (don’t write it for search engines), and for even better SEO consider the following:

  • Target the content for a specific audience and naturally include text that relates to how they might search for it.
  • Write relevant keywords or phrases naturally into the text – the target keywords for the content in question, for that target group.
  • Write the most relevant keyword(s) into the page title.
  • Aim for 300-500 words for landing pages and category descriptions. For articles and blog posts, the more the merrier (2000 words and keep going if able). This helps the code versus content ratio per page.

Share the content page. Acquire high quality inbound links if possible.


  1. The website must be crawlable for search engines (SE). At the time of writing this, even though some SE crawlers to some extent can index client-only-loaded content – this is less optimal.

    • The page content that you want to base the site’s searchability on should be server rendered.
    • Use a non-JS based navigation and/or a sitemap.xml file at the domain root. Learn about sitemaps at Google Search Central.
    • For larger sites, be aware of crawl budget.
    • Use links with rel="nofollow" to avoid certain internal URLs to be crawled, like a login page. Be generally aware of rel’s values and their use cases, specifically for <a>.
    • A robots.txt at the domain root tells SE crawlers what to crawl. Add it even if it’s to crawl every page on the site (see example below).
    • robots.txt can help crawl budget by telling SEs not to crawl certain paths in bulk.
    • Note. Make changes to robots.txt strategically as it otherwise – ironically – can hurt SEO.
    • When you need to redirect you normally want to use a 301 redirect. 308 is also relevant, but be aware of SE support. Despite the technical description, for SEO, temporary 302/307 redirects are for very temporary redirects.
  2. Use valid, semantic and accessible HTML.

    • Use only one <h1> for each page.
    • Use accessible link labels that from itself tells what it links to and avoid repeating labels.
    • Validate HTML online with W3C’s HTML validator.
  3. Fill the <head> with correct and all relevant meta data for the site and each page to be indexed by SEs.

    • Use all meta tags relevant for SEO (see HTML skeleton below).
    • Titles and descriptions should be unique for every page to be indexed.
    • Titles should include the most relevant keywords.
    • Keep title and <h1> text as close to similar as reasonable to avoid confusing users going from a result or shared link to the page.
    • Avoid repeating phrases in titles and descriptions.
    • Many SEs have a preferred minimum and maxmimum length for titles and descriptions.
    • Add a favicon. Learn How to Favicon in 2023: Six files that fit most needs.
  4. Use readable URL paths and slugs.

    • Slugs should include the most relevant keywords in a readable way, but be kept short.
    • Words are separated with hyphens.
    • Use only lowercase letters and no special characters.
    • Create a consistent structure for URL paths that keeps content organized and makes sharing easy.
  5. Optimize weight, performance and security.

  6. Add structured data.


User-agent: *
Allow: /
HTML skeleton

Note that og and twitter meta tags are only included to support the basic link preview that other social apps also uses. Link previews, and other og and twitter properties, can be customized according to their specifications, but this setup requires only one image of dimension width 1200px and height 630px.

<!doctype html>
		<!-- META TAGS -->
		<meta charset="utf-8" />
		<!-- for device responsive styling -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- title -->
		<title>Page title</title>
		<meta property="og:title" content="Page title" />
		<meta name="twitter:title" content="Page title" />
		<!-- description -->
		<meta name="description" content="Page description." />
		<meta property="og:description" content="Page description." />
		<meta name="twitter:description" content="Page description." />
		<!-- canonical -->
		<link rel="canonical" href="https://website.dev/page/canonical-url" />
		<meta name="url" content="https://website.dev/page/canonical-url" />
		<!-- image -->
		<link rel="image_src" href="https://image-href.jpg" />
		<meta property="og:image" content="https://image-href.jpg" />
		<meta property="og:image:width" content="1200" />
		<meta property="og:image:height" content="630" />
		<!-- twitter card large image has same dimensions as facebook's recommended: 1200x630 -->
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:image" content="https://image-href.jpg" />
		<!-- image alt -->
		<meta property="og:image:alt" content="Social image alternate text" />
		<meta name="twitter:image:alt" content="Social image alternate text" />
		<!-- keywords -->
		<meta name="keywords" content="page, content, keywords" />
		<!-- author -->
		<meta name="author" content="Name Of Author, Or Authors" />
		<!-- [favicon](//evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) -->
		<link rel="icon" type="image/svg+xml" href="/favicon.svg">
		<link rel="apple-touch-icon" href="/favicon-180.png">
		<link rel="manifest" href="/manifest.webmanifest">

	"icons": [
			"src": "/favicon-192.png",
			"type": "image/png",
			"sizes": "192x192"
			"src": "/favicon-512.png",
			"type": "image/png",
			"sizes": "512x512"