astro-seo-plugin

⚡Astro SEO Plugin

A powerful and well-tested Astro SEO optimization plugin designed for Astro-based websites improves productivity, helps search engines find sites more , and assists developers in getting their sites to rank better. It achieves this through clever analytics and by handling metadata. This plugin provides developers with the necessary tools, and it supports both Astro 4 and Astro 5 making sure it works with the newest versions and stays compatible with up-to-date Astro features.

• ✨ Meta tags management
• 🔍 JSON-LD structured data
• 🤖 robots.txt generation
• 🗺️ Sitemap support
• 🎯 OpenGraph and Twitter card optimization

📥 Installation

npm install astro-seo-plugin

💻 Usage

To add valuable SEO tags to your Astro pages, import the <AstroSEO> component from astro-seo-plugin, and use it in the area of your layout or page. Set options for metadata, structured data, and robot settings to increase the visibility of your site in search engine results.

---
import { AstroSEO } from 'astro-seo-plugin';
---

<AstroSEO
  title="Your Page Title"
  description="Your page description"
  openGraph={{
    title: "OG Title",
    description: "OG Description",
    image: "https://example.com/og-image.jpg",
    type: "website"
  }}
  twitter={{
    card: "summary_large_image",
    site: "@yourusername",
    creator: "@yourusername"
  }}
  jsonLd={{
    "@type": "WebPage",
    name: "Your Page Name",
    description: "Your page description"
  }}
  robots={{
    index: false,
    follow: true,
    noarchive: true,
    nosnippet: true,
    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: "your, keywords, here, separated, by, commas"
    }
  ]}
/>

📝 Supported Props

Prop Path	Type	Description	Possible Values/Structure
Basic SEO Properties
title	string	Main page title	Any text
titleTemplate	string	Template for title	Format with %s (e.g., "%s | My Site")
description	string	Meta description	Any text
canonical	string	Canonical URL	Full URL
noindex	boolean	Prevents search engine indexing	true/false
nofollow	boolean	Prevents search engine link following	true/false
Open Graph Properties
openGraph.title	string	OG title	Any text
openGraph.description	string	OG description	Any text
openGraph.type	string	OG content type	website, article, product, etc.
openGraph.image	string	OG image URL	Full URL
openGraph.url	string	OG URL	Full URL
openGraph.siteName	string	OG site name	Any text
openGraph.locale	string	OG locale	e.g., en_US, es_ES
Twitter Card Properties
twitter.card	string	Twitter card type	summary, summary_large_image, app, player
twitter.site	string	Website's Twitter handle	@username
twitter.creator	string	Content creator's Twitter	@username
twitter.title	string	Twitter card title	Any text
twitter.description	string	Twitter card description	Any text
twitter.image	string	Twitter card image URL	Full URL
Robots Properties
robots.index	boolean	Whether to index the page	true/false
robots.follow	boolean	Whether to follow links	true/false
robots.noarchive	boolean	Prevents page caching	true/false
robots.nosnippet	boolean	Prevents snippet generation	true/false
robots.maxSnippet	number	Maximum snippet length	Number of characters
robots.maxImagePreview	string	Maximum image preview size	none, standard, large
robots.maxVideoPreview	number	Maximum video preview length	Number of seconds
Additional Meta Tags Structure
additionalMetaTags	array	Array of meta tag objects	Array of objects with following properties:
additionalMetaTags[].name	string	Meta tag name	Common examples: - viewport - theme-color - format-detection - apple-mobile-web-app-capable - application-name - author - keywords
additionalMetaTags[].content	string	Meta tag content	Corresponding values
additionalMetaTags[].property	string	Meta tag property (alternative to name)	Custom properties
additionalMetaTags[].httpEquiv	string	HTTP-equiv attribute	content-type, default-style, refresh
Additional Link Tags Structure
additionalLinkTags	array	Array of link tag objects	Array of objects with following properties:
additionalLinkTags[].rel	string	Link relationship	Common values: - icon - apple-touch-icon - manifest - preload - preconnect - dns-prefetch - alternate
additionalLinkTags[].href	string	Link URL	Full URL or path
additionalLinkTags[].sizes	string	Icon sizes	e.g., 16x16, 32x32, 180x180
additionalLinkTags[].type	string	MIME type	e.g., image/png, image/x-icon
additionalLinkTags[].media	string	Media query	e.g., (prefers-color-scheme: dark)
additionalLinkTags[].hreflang	string	Language of linked resource	e.g., en-US, es
additionalLinkTags[].crossOrigin	string	CORS setting	anonymous, use-credentials
JSON-LD
jsonLd	object	Structured data object	Valid JSON-LD object

📦 Quick Start & Development

npm create astro@latest -- --template minimal

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

💼 Explore my personal work and projects:

Visit my portfolio at Bhargav Patel to explore my work, projects, and what I’ve been building lately.

🪪 License

MIT