SEO — Search Engine Optimisation

SEO is the process of getting your website to show up earlier in Google searches (other searches on other engines). It’s essential to rank highly in order to get organic traffic and therefore regular visitors/customers. Working towards SEO will naturally require you to build a better website.

<aside> ℹ️ “Content is king.” — a common saying in marketing, which applies to SEO as well.

</aside>

The most important part of SEO is the actual content in the webpage. But there are a plethora of other metrics, UI design considerations, deployment considerations, etc. to consider when you’re actually developing the webpage to hold that content.

Development

Always use semantic HTML. It’s also essential for accessibility.
Follow accessibility standards.
- Use aria attributes where possible.
Always supply a meaningful <title> to each page. Don’t just leave it constant across all your webpages.
- It’s better if the title hits more keywords in the user’s search query.
- Incorporating numbers into the title happens to work well. Eg. prefer “Learn These 5 React Hooks” over “Learn React Hooks”
Always supply the following important tags in the <head> element.
```
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>My Website</title>
		<meta name="description" content="Description of your website">
		<link rel="canonical" href="<https://www.example.com/>">
</head>
```
- Always supply a <meta name="description" content="..."> tag with a unique description. Google shows this in the search results. Keep this under 160 characters long otherwise it’ll be truncated.
  
  Google claims this does not directly impact SEO, however having this will improve your click-rate on search results.
Supply a lang attribute to <html>
Animations are nice, but it’ll possible impact first input delay, a metric used in SEO.
Avoid layout shift. For loading images, use a placeholder that predicts the size of the image before it loads.
- JS frameworks sometimes provide components with these sorts of optimisations, eg. Next’s Image.
Always have SSL (ie. HTTPS traffic) enabled.
Supply a robots.txt file to tell crawlers what should be crawled or not.

Performance

Performance is a huge factor in SEO. Use Page Speed Insights to check that your page load times are reasonable. Google additionally measures ‘rebound rate’, which is how often someone clicks into your website then leaves quickly.

Images can be massive and bottleneck your page load speeds. There are lots of strategies for optimising them, including leveraging CDNs.
Static site generation and/or server-side rendering are fantastic for crawlers who only look at the contents returned by a web server. If your website is a client-side rendered single-page application, then crawlers won’t be able to derive much information from it.