SEO Component

The SEO component generates essential meta tags for search engine optimization and social media sharing. It includes support for Open Graph (Facebook) and Twitter Cards.

Features

Open Graph meta tags for Facebook sharing
Twitter Card meta tags for Twitter sharing
Canonical URL for SEO
Customizable title, description, and image
Default values for all props
Robot directives for crawlers

Props

title

string

default:"RobTop Games - Geometry Dash"

The page title displayed in search results and social shares

description

string

The page description for search results and social previews

image

string

default:"https://i.imgur.com/rv3aemN.png"

The preview image URL for social media shares

canonicalURL

string

default:"Astro.url.pathname"

The canonical URL of the page for SEO

Usage

Basic Usage
Custom Values
In Layout

src/layouts/Layout.astro

---
import SEO from "../components/SEO.astro";
---

<head>
  <SEO />
</head>

src/layouts/Layout.astro

---
import SEO from "../components/SEO.astro";

const title = "Blog - RobTop Games";
const description = "Latest news and updates from RobTop Games";
---

<head>
  <SEO 
    title={title}
    description={description}
    image="https://example.com/blog-preview.png"
  />
</head>

src/layouts/Layout.astro

---
import SEO from "../components/SEO.astro";

interface Props {
  title: string;
  description: string;
  image?: string;
  canonicalURL?: string;
}

const { title, description, image, canonicalURL } = Astro.props;
---

<html>
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <SEO 
      title={title} 
      description={description} 
      image={image}
      canonicalURL={canonicalURL}
    />
  </head>
  <body>
    <slot />
  </body>
</html>

Component Code

src/components/SEO.astro

---
interface Props {
  title?: string;
  description?: string;
  image?: string;
  canonicalURL?: string;
}

const {
  title = "RobTop Games - Geometry Dash",
  description = "RobTop Games is a video game development company known for creating Geometry Dash",
  image = "https://i.imgur.com/rv3aemN.png",
  canonicalURL = Astro.url.pathname,
} = Astro.props;
---

<!-- SEO -->
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />

<!-- Other Important Meta Tags -->
<meta name="description" content={description} />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

Props Interface

interface Props {
  title?: string;
  description?: string;
  image?: string;
  canonicalURL?: string;
}

All props are optional with sensible defaults.

Meta Tags Generated

Canonical URL

<link rel="canonical" href={canonicalURL} />

Helps search engines understand the primary URL for a page, preventing duplicate content issues.

Open Graph (Facebook)

<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />

Controls how your pages appear when shared on Facebook, LinkedIn, and other platforms that support Open Graph.

Twitter Cards

<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />

Controls how your pages appear when shared on Twitter/X. Uses summary_large_image card type for prominent image display.

Search Engine Directives

<meta name="description" content={description} />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

description: Appears in search results
robots: Allows all search engines to index and follow links
googlebot: Specific directive for Google’s crawler

Default Values

const defaults = {
  title: "RobTop Games - Geometry Dash",
  description: "RobTop Games is a video game development company known for creating Geometry Dash",
  image: "https://i.imgur.com/rv3aemN.png",
  canonicalURL: Astro.url.pathname
};

Image Requirements

Open Graph Image Recommendations

Minimum size: 1200 x 630 pixels
Aspect ratio: 1.91:1
Format: JPG or PNG
Max file size: < 8 MB

Twitter Card Image Recommendations

Minimum size: 1200 x 628 pixels (summary_large_image)
Aspect ratio: 2:1
Format: JPG, PNG, WEBP, or GIF
Max file size: < 5 MB

Advanced Usage

Dynamic SEO per Page

src/pages/blog/[slug].astro

---
import Layout from "../../layouts/Layout.astro";

const { slug } = Astro.params;
const post = await getPost(slug);

const seoData = {
  title: `${post.title} - RobTop Games Blog`,
  description: post.excerpt,
  image: post.coverImage,
  canonicalURL: `https://robtopgames.com/blog/${slug}`
};
---

<Layout {...seoData}>
  <!-- Page content -->
</Layout>

Additional Meta Tags

Extend the SEO component with more tags:

src/components/SEO.astro

---
interface Props {
  title?: string;
  description?: string;
  image?: string;
  canonicalURL?: string;
  author?: string;
  publishedTime?: string;
  modifiedTime?: string;
  tags?: string[];
}

const {
  title = "RobTop Games - Geometry Dash",
  description = "RobTop Games is a video game development company known for creating Geometry Dash",
  image = "https://i.imgur.com/rv3aemN.png",
  canonicalURL = Astro.url.pathname,
  author,
  publishedTime,
  modifiedTime,
  tags = []
} = Astro.props;
---

<!-- Existing meta tags -->

{author && <meta name="author" content={author} />}
{publishedTime && <meta property="article:published_time" content={publishedTime} />}
{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
{tags.map(tag => <meta property="article:tag" content={tag} />)}

Schema.org Structured Data

Add JSON-LD structured data:

src/components/SEO.astro

---
// ... existing props

const structuredData = {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": title,
  "description": description,
  "url": canonicalURL,
  "image": image
};
---

<!-- Existing meta tags -->

<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

Test how your pages will appear on social media:

Best Practices

Unique titles: Each page should have a unique, descriptive title
Compelling descriptions: Write descriptions that encourage clicks (150-160 characters)
High-quality images: Use branded, high-resolution images for social shares
Absolute URLs: Always use absolute URLs for images and canonical URLs
Test previews: Always test social media previews before launch
Update metadata: Keep title and description current with page content

Troubleshooting

Social platforms cache meta tags. Clear the cache:

Use the platform’s debugging tool (links above)
Request a re-scrape
Wait 24-48 hours for automatic cache refresh

Image Not Showing

Check that:

Image URL is absolute (includes https://)
Image is publicly accessible (not behind authentication)
Image meets size requirements
Server allows social media crawlers

Header - Site navigation
Text - Content pages

Get Started

Components

Pages

Content

Layouts

Features

Props

Usage

Component Code

Props Interface

Meta Tags Generated

Canonical URL

Open Graph (Facebook)

Twitter Cards

Search Engine Directives

Default Values

Image Requirements

Open Graph Image Recommendations

Twitter Card Image Recommendations

Advanced Usage

Dynamic SEO per Page

Additional Meta Tags

Schema.org Structured Data

Best Practices

Troubleshooting

Image Not Showing

Build docs developers (and LLMs) love

Get Started

Components

Pages

Content

Layouts

​Features

​Props

​Usage

​Component Code

​Props Interface

​Meta Tags Generated

​Canonical URL

​Open Graph (Facebook)

​Twitter Cards

​Search Engine Directives

​Default Values

​Image Requirements

​Open Graph Image Recommendations

​Twitter Card Image Recommendations

​Advanced Usage

​Dynamic SEO per Page

​Additional Meta Tags

​Schema.org Structured Data

​Testing Social Previews

​Best Practices

​Troubleshooting

​Social Preview Not Updating

​Image Not Showing

​Related Components

Build docs developers (and LLMs) love

Features

Props

Usage

Component Code

Props Interface

Meta Tags Generated

Canonical URL

Open Graph (Facebook)

Twitter Cards

Search Engine Directives

Default Values

Image Requirements

Open Graph Image Recommendations

Twitter Card Image Recommendations

Advanced Usage

Dynamic SEO per Page

Additional Meta Tags

Schema.org Structured Data

Testing Social Previews

Best Practices

Troubleshooting

Social Preview Not Updating

Image Not Showing

Related Components