Implement SEO in an Astro Website with astro-seo
Every site that is serious about increasing traffic needs to consider how it is handling SEO.
In Astro, you can set your meta tags manually but Astro gives you a easy-to-use <SEO /> component that will set meta tags for you as you give it properties.
In this lesson we'll add the astro-seo package and set titles and descriptions on our different landing pages as well as set a default if we forget to do that.
Lazar Nikolov: [0:00] A solid SEO is crucial for a blog website. You want people to find your content on search engines like Google. Implementing an SEO mechanism in Astro is very straightforward.
[0:11] Back in Lesson 5, we implemented a shared layout that every page used. Aside from the visual layout, the layout file also defined the structure of the HTML document, including the head tag and all the metadata.
[0:24] SEO properties mainly live in the head tag. If we place them here, then every page will inherit those SEO properties. We can approach defining the SEO properties in two ways, manually, by just keep adding the metadata for those specific SEO properties, or by using a package like astro-seo.
[0:44] Let's take the second route. Let's run npm install astro-seo. To use this package, we're going to import the SEO component from it.
[0:55] Let's go back to the head tag and add the SEO component below the title, for example. This component accepts a number of properties, like the title, for example. We already have the title, so we can set the title to title, and since we have it defined here, we can just remove the previous one.
[1:13] We can also define the description. Let's define it to something like Lazar's personal website. If we run, now, refresh and check out the head tag, we're going to see that we have the Lazar's personal website set as the description and that's cool, but it would be the same description for all of the pages and also the same title.
[1:37] What if we wanted to define the description and, potentially, other properties individually for all the pages? Since we're using the layout component only in pages, we can accept page-specific SEO as props and pass them down to the SEO component. Let's do that now.
[1:53] Let's also import the props type from the astro-seo package and also alias it as SEO props, so it doesn't collide with our own props. Now we're going to modify our own props. We're going to remove the title, and we're going to add an optional SEO prop that inherits the SEO props type we just imported. Now below, we can import the SEO instead of title. Good.
[2:20] Now, we have an error to the title. In order to use it, we're going to access the title from the title. Since we defined it as an optional, it's also a good idea to provide a default, a fallback value. In this case, we can type our name into it. We can do the same for the description. We can access the SEO.description, but if the doesn't exist, we're going to use the previous description. Great.
[2:47] Now, since we're accepting the same prop structure as the SEO component, what we can do is, above the title and description, spread out all of the SEO props that we pass to the page, if they exist, at least the ones that we defined.
[3:03] Now, let's check out our pages. The index page throws an error because we're defining the title directly. What we need to do now is, instead, provide the SEO object and pass the title through the SEO prop.
[3:16] If we refresh, we're going to see, "Welcome to Astro." Let's change this to "Hello, Astro." There we go. The title is changed. If we omit it completely, we're going to see the fallback value of our name as a title. Great. Let's bring it back to "Welcome to Astro."
[3:34] Let's check out the about page now. Same thing. We need to define the SEO prop and pass the title as a property within that prop. There we go. Additionally, we can also define the description. We can do something like Lazar Nikolov is a developer advocate from Toronto, Canada. Let's proceed.
[3:59] Now, let's open the blog index page. Again, the same thing, so we can pass the title as a property within the SEO prop.
[4:08] Lastly, we should fix the blog post page. Again, we can convert the title to be as a property of the SEO prop. Now, let's check to make sure that it's being set. There we go, Astro rocks, Astro's content collection API, creating Astro components, etc.
[4:27] That's how we can define the SEO of our website. Let's do a recap now.
[4:31] We learned that the best place to define the SEO for our website is the layout component. We can take the manual route and add all of the meta tags by hand, or we can use a package like astro-seo to make it simpler.
[4:45] The astro-seo package comes with a props type, which we use to define the SEO props of our layout component. We use the SEO prop to provide a way for our pages to define their own SEO data while also providing fallback values like we did for the title and description.