Best SEO plugin for astro.js - Astro SEO Plugin.
By SW HabitationIf you’ve just started creating your website with Astro and have no clue how to improve your SEO, you’re not alone here.
In this blog, we’ll walk you through a beginner-friendly way to add SEO to your Astro project using a powerful tool called astro-seo-plugin. We’ll explain what Astro is, why SEO matters, and give you a copy-paste setup to make your website ready for Google, social media, and more.
What is Astro?
Astro is a fast and modern web framework that helps you build websites with minimal javaScript. It's great for blogs, portfolios, and content-heavy sites.
Why developers love Astro:
- You can write components in your favorite framework
- Perfect for SEO and static sites
- It delivers lightning-fast page loads
- Supports React, Vue, Svelte, Solid, and more
But even though Astro is SEO-friendly it still needs help with meta tags, Open Graph, Twitter Cards, and structured data, and that’s where astro-seo-plugin comes in.
What is astro-seo-plugin?
The astro-seo-plugin is a helpful plugin for adding all the important SEO meta tags to your Astro pages.
Instead of writing a dozen <meta> tags by hand, you use a single component: <AstroSEO />. It handles things like:
- Page titles & descriptions
- Open Graph tags (for Facebook, LinkedIn)
- Twitter card tags
- JSON-LD structured data
- Robots settings (to tell Google what to do)
- Extra meta and link tags
Installation & Setup
Step 1: Install the Plugin
Open your terminal and run,
1
npm install astro-seo-pluginIn your .astro layout or any page, import and use it like this below,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
---
import { AstroSEO } from 'astro-seo-plugin';
---
<AstroSEO
title="My Page Title"
description="A short and catchy description for your page"
openGraph={{
title: "Social Title",
description: "Shown on Facebook & LinkedIn",
image: "https://example.com/image.jpg",
type: "website"
}}
twitter={{
card: "summary_large_image",
site: "@yourhandle",
creator: "@yourhandle"
}}
jsonLd={{
"@type": "WebPage",
name: "Page Name",
description: "A brief description of your page"
}}
robots={{
index: true,
follow: true,
noarchive: false,
nosnippet: false,
maxSnippet: 150,
}}
additionalLinkTags={[
{ rel: "canonical", href: "#" },
{ rel: "prev", href: Astro.url },
{ rel: "next", href: Astro.url },
{ rel: "alternate", href: Astro.url }
]}
additionalMetaTags={[
{
name: "keywords",
content: "astro, seo, astro-seo-plugin, meta tags, beginner guide"
}
]}
/>Advantages of using astro-seo-plugin
- Works with Any Astro Page: Use it globally or per page as needed.
- Google-Friendly Structured Data: Helps Google understand your site better using JSON-LD.
- SEO Made Easy: Add all your SEO tags with one simple component.
- Social Media Ready: Your content looks great when shared on Twitter, Facebook, and LinkedIn.
- Saves Time: Forget manually writing meta tags for every page.
FAQ's
What is SEO, and why should I care?
SEO helps your website appear in search engines like Google. More SEO = more visitors = more success.
Do I need to use astro-seo-plugin on every page?
Nope! You can put it in your main layout to apply it site-wide or use it on individual pages for custom SEO.
What’s the difference between title and openGraph.title?
title is for Google search & openGraph.title is for social sharing (like Facebook)
What is JSON-LD?
JSON-LD is structured data that tells search engines what your page is about in a clear way.
Can I add custom meta tags too?
Yes, use additionalMetaTags and additionalLinkTags for full flexibility.
Conclusion
SEO doesn’t have to be confusing. With Astro and astro-seo-plugin, you can add all the important tags to your pages in a clean, easy, and beginner-friendly way. Just install the plugin, use the <AstroSEO /> component, and customize it for each page or layout.
Whether you're building a blog, portfolio, or full website this plugin helps your site stand out on Google and social media.
So go ahead, give your site the SEO boost it deserves and let the search engines do the rest.