SEO Meta Tags

SEO Meta Tags

All Bufferthemes use astro-seo to manage SEO meta tags in a structured way. The SEO component is implemented in the layout’s head slot, making it easy to customize per page.

Basic Usage

The most basic usage involves setting a title and description for your page:

<Layout>
  <Fragment slot="head">
    <SEO
      title="My Page Title"
      description="A concise description of my page content"
    />
  </Fragment>
  <!-- Page content -->
</Layout>

Advanced Configuration

The SEO component supports many additional options for optimizing your pages:

Title Templates

You can maintain consistent titles across your site using a template:

<SEO
  title="Homepage"
  titleTemplate="%s | My Website"  // Results in "Homepage | My Website"
  description="Welcome to my website"
/>

Open Graph Tags

Add rich social media previews with Open Graph tags:

<SEO
  title="My Product"
  description="An amazing product"
  openGraph={{
    basic: {
      title: "My Product",
      type: "website",
      image: "https://mysite.com/og-image.jpg",
      url: "https://mysite.com/product",
    },
    optional: {
      description: "The best product ever",
      siteName: "My Store"
    }
  }}
/>

Twitter Cards

Customize how your pages appear when shared on Twitter:

<SEO
  title="My Article"
  description="An interesting article"
  twitter={{
    card: "summary_large_image",
    site: "@yourusername",
    creator: "@yourusername",
    image: "https://mysite.com/article-image.jpg",
    imageAlt: "Article featured image"
  }}
/>

Canonical URLs

Prevent duplicate content issues by specifying canonical URLs:

<SEO
  title="My Page"
  description="Page description"
  canonical="https://mysite.com/preferred-url"
/>

Additional Meta Tags

Extend the default meta tags with custom ones:

<SEO
  title="My Page"
  description="Page description"
  extend={{
    meta: [
      {
        name: "keywords",
        content: "astro, seo, meta tags"
      },
      {
        name: "author",
        content: "Your Name"
      }
    ]
  }}
/>

Best Practices

1. Always provide unique titles and descriptions for each page
2. Keep titles under 60 characters
3. Write descriptions between 150-160 characters
4. Use relevant keywords naturally in both titles and descriptions
5. Include OpenGraph tags for better social media sharing
6. Add Twitter Cards for better Twitter previews
7. Use canonical URLs when you have multiple URLs for the same content

For more detailed configuration options, refer to the astro-seo documentation.