⚡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

📦 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