### Install Astro SEO package Source: https://github.com/jonasmerlin/astro-seo/blob/main/README.md Commands to install the astro-seo package using popular JavaScript package managers. ```bash npm install astro-seo ``` ```bash yarn add astro-seo ``` -------------------------------- ### Install Astro SEO Package Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Installs the astro-seo package using npm or yarn. This is the first step to adding SEO capabilities to your Astro project. ```bash npm install astro-seo # or yarn add astro-seo ``` -------------------------------- ### Integrate SEO with Astro Layouts Source: https://github.com/jonasmerlin/astro-seo/blob/main/README.md Shows how to create a reusable Layout component that accepts SEO props, allowing individual pages to pass dynamic metadata. ```astro --- // Layout.astro import { SEO } from "astro-seo"; interface Props { title: string; description?: string; } const { title, description } = Astro.props; --- ``` ```astro --- // index.astro import Layout from "../layouts/Layout.astro"; ---

Hello!

 ``` -------------------------------- ### Basic SEO Component Usage in Astro Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Demonstrates the basic usage of the `` component within an Astro page's `` section. It accepts title, description, and canonical URL props to generate standard SEO meta tags. ```astro --- import { SEO } from "astro-seo"; ---

Welcome!

``` -------------------------------- ### Extend SEO Tags with Custom Meta and Link Elements Source: https://github.com/jonasmerlin/astro-seo/blob/main/README.md Demonstrates how to extend default SEO configurations by adding custom `` and `` tags. This is useful for including additional metadata or specific link types not covered by the default options. The `extend` prop accepts an object with `link` and `meta` arrays. ```javascript import { SEO } from 'astro-seo'; ``` -------------------------------- ### Astro Page Using Base Layout for SEO Source: https://context7.com/jonasmerlin/astro-seo/llms.txt This Astro page demonstrates how to use the BaseLayout component to set specific SEO properties for a blog post. It imports the BaseLayout and passes down the title, description, image URL, and an article flag. This allows the page content to be rendered within the layout, inheriting the defined SEO configurations. ```astro --- // src/pages/blog/my-post.astro import BaseLayout from "../../layouts/BaseLayout.astro"; ---

How to Build Fast Websites

Article content here...

 ``` -------------------------------- ### Implement Full-Featured SEO in Astro Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Demonstrates the implementation of the SEO component within an Astro page. It covers essential metadata, Open Graph tags for social sharing, Twitter card configuration, language alternates, and custom meta/link extensions. ```astro --- import { SEO } from "astro-seo"; const articleData = { title: "Complete Guide to Web Performance", description: "Master web performance optimization with this comprehensive guide covering Core Web Vitals, lazy loading, and more.", publishedDate: "2024-02-01T10:00:00Z", modifiedDate: "2024-02-15T14:30:00Z", author: "Jane Developer", image: "https://example.com/images/web-performance-guide.jpg" }; ---

{articleData.title}

By {articleData.author}

{articleData.description}

``` -------------------------------- ### Astro SEO Open Graph Basic Tags Configuration Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Configures basic Open Graph meta tags for social media previews in Astro SEO. Requires `title`, `type`, and `image` in the `basic` object. The `url` defaults to the current page URL. ```astro --- import { SEO } from "astro-seo"; ---
Blog content
``` -------------------------------- ### Astro SEO Open Graph Optional Properties Configuration Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Enhances social sharing with optional Open Graph properties in Astro SEO, including description, locale, site name, and media URLs for audio and video. The `basic` object must still be defined. ```astro --- import { SEO } from "astro-seo"; ---
Product details
``` -------------------------------- ### Implement SEO component in Astro pages Source: https://github.com/jonasmerlin/astro-seo/blob/main/README.md Demonstrates how to import and configure the SEO component within an Astro page's head section, including Open Graph and Twitter metadata. ```astro --- import { SEO } from "astro-seo"; --- ``` -------------------------------- ### Astro SEO Robots Meta Directives Configuration Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Illustrates how to control search engine crawling behavior using `noindex`, `nofollow`, `noarchive`, `nocache`, and custom directives via `robotsExtras` in Astro SEO. Defaults to index and follow. ```astro --- import { SEO } from "astro-seo"; ---

Private content

``` -------------------------------- ### Astro SEO Title Template and Default Title Configuration Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Shows how to configure a `titleTemplate` for consistent title formatting and `titleDefault` as a fallback title in Astro SEO. The `%s` placeholder is replaced by the page title. ```astro --- import { SEO } from "astro-seo"; ---
Content here
``` -------------------------------- ### Extend Meta and Link Tags in Astro Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Use the extend property to inject custom and tags into the document head. This is useful for favicons, manifest files, and site verification tags. ```astro --- import { SEO } from "astro-seo"; ---
Content
``` -------------------------------- ### Configure Open Graph Image Metadata in Astro Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Defines detailed image metadata for social previews, including dimensions, MIME type, and alt text. This ensures that shared links display images with the correct aspect ratio and descriptive context. ```astro --- import { SEO } from "astro-seo"; ---
Images
``` -------------------------------- ### Configure Open Graph Article Metadata in Astro Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Sets up article-specific metadata such as publication timestamps, authors, sections, and tags. This is essential for proper content attribution and categorization on social platforms. ```astro --- import { SEO } from "astro-seo"; ---
Article content
``` -------------------------------- ### Open Graph Configuration Interface Source: https://github.com/jonasmerlin/astro-seo/blob/main/README.md TypeScript interface defining the structure for the `openGraph` prop in Astro SEO. It outlines the required `basic` properties (title, type, image, url) and optional properties for richer metadata. This interface helps ensure correct data types and structure when configuring Open Graph tags. ```typescript // TypeScript interface of openGraph prop openGraph?: { basic: { title: string; type: string; image: string; url: string; }, optional?: { audio?: string; description?: string; determiner?: string; locale?: string; localeAlternate?: Array; siteName?: string; video?: string; } } ``` -------------------------------- ### Astro Base Layout with SEO Props Source: https://context7.com/jonasmerlin/astro-seo/llms.txt This Astro component serves as a reusable layout for pages, accepting SEO-related props such as title, description, image, and article type. It utilizes the 'astro-seo' package to generate meta tags for SEO, including Open Graph and Twitter Card data. The component expects these props to be passed down from individual page components. ```astro --- // src/layouts/BaseLayout.astro import { SEO } from "astro-seo"; interface Props { title: string; description?: string; image?: string; article?: boolean; } const { title, description, image, article = false } = Astro.props; const canonicalURL = new URL(Astro.url.pathname, Astro.site); --- ``` -------------------------------- ### Configure Language Alternates for International SEO Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Utilize the languageAlternates property to define hreflang tags. This helps search engines associate different language versions of a page for better international indexing. ```astro --- import { SEO } from "astro-seo"; ---
Content
``` -------------------------------- ### Manage Canonical URLs Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Explicitly set the canonical URL for a page. The removeTrailingSlashForRoot property allows for fine-tuned control over trailing slashes to match specific site configurations. ```astro --- import { SEO } from "astro-seo"; ---
Homepage content
``` -------------------------------- ### Configure Twitter Card Metadata in Astro Source: https://context7.com/jonasmerlin/astro-seo/llms.txt Configures Twitter-specific meta tags to control how content appears when shared on Twitter. Supports various card types like summary_large_image to optimize engagement for different content formats. ```astro --- import { SEO } from "astro-seo"; ---
Announcement content
``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.