Astro SEO Checklist

It's a good practice in Astro to have a root layout that will be shared between your pages. This layout will contain the Head section of your website, where SEO-relevant tags should be customized for all of your main pages. Here is a pattern to implement this concept.

Astro has a frontend architecture called "islands". It allows you to only ship JavaScript to the client where it's needed. To benefit from this, add the client directives to your components only when interactivity is needed. Learn more

When you need an interactive component, you'll need to use the client directive. There are multiple directives to choose from, and each has its own use case. Choosing the correct one will improve the performance of your website. Learn more

By default, Astro will pre-render all your pages at build time. This will generate static pages, which are already good for SEO. If your website is very dynamic, you probably configured server-side rendering to be the default strategy. If that's the case, you should add export const prerender = true to all of your pages that aren't dynamic. Learn more

Title and meta description tags should be added on all relevant pages of your website. You can add them directly in the head tag of your layout component.

Include Open Graph & Twitter Cards to improve link previews when shared on social media. This is done by adding the appropriate meta tags in the head sections of pages. Learn more about these tags here

A canonical URL helps prevent duplicate content issues by telling search engines which page is the main version. This is also done as a metadata tag in the Head section.

By using the Image component found in the astro:assets package, you avoid some common pitfalls of images on the web, which results in better SEO. Learn more

Optimizing your fonts can improve performance and avoid layout shifts. You can optimize fonts yourself or check the experimental Astro fonts API. Learn more about the API

Lazy loading images, videos, and iframes can significantly improve page speed. This technique defers loading of resources until they're needed. Implement it by adding the loading="lazy" attribute to images, videos, and iframes. Astro already handles this property if you're using the Image component.

Preloading tells the browser to prioritize loading specific resources that are critical for initial page rendering. Use <link rel="preload"> for critical assets. You can also set loading = eager for important above-the-fold images.

A sitemap is a file that lists all the pages on your website, allowing search engines to crawl your site more efficiently. You can do this manually or use Astro's official integration.

Favicon can improve SEO by providing a visual representation of your brand. Add a favicon.ico file to your project and add the tag to your Head section.

Add a robots.txt file to your public folder to inform search engines which pages are allowed to be crawled and which are not. You can also add <meta name="robots" content="noindex" /> to your Head section to prevent search engines from indexing certain pages.

JSON-LD is a format for providing structured data that can be used by search engines to understand your content. It should be included inside a <script type="application/ld+json"> tag in your page. This is particularly useful for pages that need rich results, like blog posts, product pages, or local business pages. You can use Astro's set:html directive to simplify the process. Example.

When a user navigates to a page that doesn't exist, they'll see a generic 404 page by default. Create a custom 404.astro page to improve the user experience.

If you're only building for one language, just check this item and move on. But if your website is multilingual, you'll have to optimize your metadata, sitemap, and pages with that in mind. This is a complicated process but Astro simplifies some parts of it. Learn more.

User experience metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) are used as ranking factors for search engines. You can use Lighthouse to check these metrics and look for improvement points.

This is not directly related to Astro, but we included this item here so you don't forget one of the most important parts: the content. Helpful content, appropriate HTML structure, the right keywords, internal linking, and an overall good user experience are key to good SEO. Here is a guide to get you started on this part.