Destiner's Notes

Astro + SEO

7 February 2022

If you’re working on a blog or publication, it’s important to make sure that all pages are indexed and ranking well. Here are a few “set it and forget it” tips to enhance your site’s search engine presence.

Sitemap

Adding a sitemap can help Google and other search engines understand your site better. This is especially useful for more complex sites.

As Google itself puts it:

Using a sitemap doesn’t guarantee that all the items in your sitemap will be crawled and indexed, as Google processes rely on complex algorithms to schedule crawling. However, in most cases, your site will benefit from having a sitemap, and you’ll never be penalized for having one.

Astro generates a sitemap by default. However, Astro would need to know your site domain to generate canonical links. Update your astro.config.mjs by adding a buildOptions.site setting:

import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.org',
  integrations: [sitemap()], // Optional
});

Robots.txt

It might be also useful to check your public/robots.txt file to make sure Google Bot and other search engine crawlers can access your site. Here’s an example:

User-agent: *
Allow: /

If you have something like this, it would disable crawlers to access your site:

User-agent: *
Disallow: /

This will disable Google crawler but enable all other crawlers:

User-agent: Google
Disallow: /

Metatags

To help search engines and potential visitors understand what your site is all about, you can provide title and description meta tags:

<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

Title and description are usually provided on a per-page basis, that’s why we’re using template expression here. You’d usually put that template in your post layout, and then specify the title and description of each post in the frontmatter:

---
title: My post title
description: A detailed explanation of what this post is about.
---

You might also want to provide a canonical URL on your pages:

---
const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
const url = canonicalUrl.href;
---

<link rel="canonical" href={url} />

Speaking of meta tags, there’s a neat package called astro-seo that provides a rich set of options to manage your SEO and social related <head> content.