Colin Steidtmann

<--- Notes

SEO

Source: NextJS tutorial on SEO

(I'm focusing on the technical stuff. See this in action in my post, on how I built my website)

SEO Pillars

  • Technical -- What the developer does
  • Creation -- The content on the website
  • Popularity -- Backlinks to your site from reputable sites

First off, fundamental knowledge

As search engine web crawlers and users visit your web pages, they may encounter one of these HTTP status code messages. Some can affect your SEO!

HTTP status codeMeaningNotes
200Ok
301/308Permanent redirect
302Temporary redirect
404Not foundHurts search rankings if you have too many
410No longer available
  • E.g. blog post removed from site
  • Tells bots not to crawl this page
500Server error
503Server down for a long period of timeMaintains search rankings

Explicit things you can do

There's a collection of obvious things developers do to improve SEO. Here they are.

HTML files and tagsMeaningNotes
robots.txtIndicates which pages/files web crawlers can access and crawlUseful robots.txt rules
sitemap.xmlTells Google the URLs in your site so it can crawl it more efficiently and crawl new pages when the sitemap changes.Best to make it dynamic and use the [object Object].
HTML Head meta tags for search engines

Directives that search engines always respect.E.g.don’t index this page, don’t follow links from this page, don’t translate it’s content, don’t show a search bar for the site on Google.

Helpful NextJS post
You can use these in lieu of robots.txt

Head canonical link tagsTells Google the page that’s the origin of truth.Critical if you have duplicate content on pages with different URLs, otherwise Google penalizes you.
Title and description tags
  • VERY important for SEO.
  • Be descriptive of the content and use keywords!

Open Graph Tags (ogp.me)

Used by companies like Twitter to show rich UI cards when people link to your site

Structured JSON-LD Data (schema.org)

Even more data to describe your content for search engines.

Implicit things you can do

These are strategies not so obvious that developers can do to improve SEO.

TopicAdvice
Rendering

Most important thing for SEO is that page metadata and content is available without running JavaScript.

  • Best for SEO → Static Site Generation / Server Side Generation
  • Worst for SEO → Client side rendering (Only makes sense for content specific to the user (e.g. a dashboard))

On Page SEO
  • Headings (h1/h2/…/h6) → Use them properly, tells search engines the important information on the website.
  • Links → Good to have internal links and external links from reputable sites.
URLs
  • Words over numbers (keywords are even better)
  • Logical and consistent patterns
Google AMPCode from Google that use to improve SEO but doesn't anymore.

Measuring Performance

Web Vitals are Google's terms referencing how they measure website performance.

The Core web vitals is a subset of web vitals that have 3 metrics that measure loading, interactivity, and visual stability performance:

  • LCP (largest contentful pain)
    • Time it takes for the largest element to load on the webpage
  • FID (first input delay)
    • Time it takes for user's input to do something on the webpage
  • CLS (cumulative layout shift)
    • Elements shifting after already being rendered

Google uses a website's core web vital scores to help rank them.

  • Scores are: Good, Needs improvement, Poor.

Tips to improve Web Vital Scores

  • Optimizes images and fonts.
    • NextJS Image <Image src={...} />
    • Helps LCP and CLS score
  • Use dynamic imports when possible await import(...)
    • Gets rid of warning to remove unused Javascript.
    • Helps FID score
  • Defer loading third-party scripts until after the webpage content loads. import Script from "next/script"