Complete Metadata Management for SvelteKit 5+ – SvelteKit SEO Component

SvelteKit SEO Component is a lightweight metadata management solution for SvelteKit 5+ applications. It helps you manage page metadata for search engine optimization (SEO) and social media previews.

You can control titles, descriptions, keywords, canonical URLs, Open Graph data for platforms like Facebook, and Twitter/X Card information through a single configuration object. This can be useful for projects requiring precise control over how content appears in search results and social feeds.

Features

Use Cases

• Blog Posts: Assign unique titles, descriptions, keywords, and social media images for each article to improve SEO and shareability.
• E-commerce Product Pages: Define specific Open Graph details (price, availability, image) and Twitter Card information for individual products.
• Marketing Landing Pages: Control exactly how promotional pages appear when shared on social platforms, optimizing images and text for engagement.
• Portfolio Project Pages: Showcase individual projects with distinct metadata, including custom images and descriptions for social previews.

Usage

Import the component into your SvelteKit page or layout and pass the configuration object metatag as a prop.

<script lang="ts">
  import Seo from '$lib/components/Seo.svelte'; // Adjust path if necessary
  const metatag = {
    title: 'Your Page Title Here',
    description: 'A concise description for search engines and social previews.',
    keywords: ['relevant', 'keywords', 'for', 'page'],
    author: 'Author Name',
    follow: true, // Allows search engine bots to follow links
    language: 'en', // Specifies page language
    // Open Graph Configuration
    og: {
      siteName: 'Your Website Name',
      type: 'article', // e.g., 'website', 'article'
      fbAppId: 'YourFacebookAppId', // Optional Facebook App ID
      image: {
        url: 'https://yourdomain.com/og-image.jpg',
        width: '1200',
        height: '630',
        alt: 'Descriptive text for the image',
        type: 'image/jpeg',
        secureUrl: 'https://yourdomain.com/og-image.jpg' // Use HTTPS
      },
      // Add video or audio objects if needed
    },
    // Twitter/X Card Configuration
    x: {
      site: '@YourSiteHandle', // Your site's Twitter/X handle
      creator: '@YourPersonalHandle', // Content creator's handle
      card: 'summary_large_image', // e.g., 'summary', 'summary_large_image'
      image: {
        url: 'https://yourdomain.com/twitter-image.jpg',
        alt: 'Alt text for the Twitter image'
      },
      // Add player object if needed
    },
    // Basic JSON-LD Structured Data
    jsonLd: {
      image: {
        url: 'https://yourdomain.com/structured-data-image.jpg'
      },
      author: {
        name: 'Author Name'
      },
      publisher: {
        name: 'Publisher Name',
        logo: {
          url: 'https://yourdomain.com/logo.png'
        }
      }
    }
    // Add more properties as needed based on component structure
  };
</script>
<svelte:head>
  <Seo {metatag} />
</svelte:head>
<!-- Your page content -->

Adjust the values within the metatag object according to the specific requirements of each page.

Refer to the component’s type definitions for all available options:

type OgProps = {
  url?: string;
  secureUrl?: string;
  type?: string;
  width?: string;
  height?: string;
};

type Metatag = {
  metatag: {
    title: string;
    description: string;
    keywords?: string[];
    author?: string;
    follow?: boolean;
    language?: string;
    jsonLd?: {
      image?: Omit<OgProps, 'secureUrl' | 'type'>;
      author?: {
        name?: string;
      };
      publisher?: {
        name?: string;
        logo?: Omit<OgProps, 'secureUrl' | 'type'>;
      };
    };
    og: {
      fbAppId?: string;
      siteName: string;
      type: string;
      image: {
        alt?: string;
      } & OgProps;
      video?: OgProps;
      audio?: Omit<OgProps, 'width' | 'height'>;
    };
    x?: {
      siteId?: string;
      creator?: string;
      creatorId?: string;
      card?: string;
      site?: string;
      image?: {
        url?: string;
        alt?: string;
      };
      player?: {
        url?: string;
        width?: string;
        height?: string;
        stream?: string;
      };
    };
  };
};

Related Resources

• Open Graph Protocol: https://ogp.me/ – The official documentation for the Open Graph protocol.
• Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/ – Tool to test and preview Open Graph tags.
• Twitter/X Card Validator: https://cards-dev.x.com/validator – Tool to validate and preview Twitter/X Cards.
• SvelteKit Documentation: https://kit.svelte.dev/docs – Official SvelteKit documentation for general framework usage.

FAQs

Q: Does this component require external JavaScript libraries?
A: No, the SvelteKit SEO component is self-contained and has no external dependencies. You just need to copy the component file into your project.

Q: How do I configure different metadata for different pages?
A: You pass a unique metatag object containing the specific metadata for each page as a prop to the Seo component on that page.

Q: Can I control search engine crawling behavior?
A: Yes, you can use the follow property within the metatag object to specify true (follow) or false (nofollow) directives for search engine robots.

Q: Does it support JSON-LD structured data?
A: The component includes basic support for generating some JSON-LD structured data elements like image, author, and publisher information.