svelte-meta-tags

Svelte Meta Tags is a library providing a set of Svelte components designed to manage SEO meta tags and structured data effortlessly.

Key features include:

• Effortless SEO Management: A simple interface for managing meta tags.
• JSON-LD Support: Built-in support for structured data essential for SEO.
• Deep Merge Functionality: Allows for managing meta tags effectively even in complex Svelte applications by merging tag properties.
• TypeScript Friendly: Full TypeScript support for type-safe meta tag management.

The JsonLd component renders JSON-LD structured data.

• Output Location: The output prop defaults to 'head'. Setting it to 'body' renders the script at the component's location instead of inside <svelte:head>.
• Schema Handling:
  • If schema is an array, it renders each element.
  • If schema is a single object (including {'@graph': [...]} formats), it automatically adds '@context': 'https://schema.org'.
• Safety: The <script> tag is rendered using string concatenation ('<scri' + 'pt ...>') to prevent HTML parsers from misidentifying it during build/processing.

You can render multiple schemas using two methods:

1. Array of objects: Pass an array to the schema prop. This renders multiple <script> blocks or multiple objects within one block.
2. Linked Graph (Recommended): Wrap your objects in { '@graph': [...] }. This represents them as a single linked graph. This is the recommended approach because some tools (like Safari) may log console errors when encountering the plain array form, even if it functions correctly.

The MetaTag type is a union type that represents the different categories of meta tags supported by the library. It encompasses standard HTML5 meta tags, RDFa meta tags, and HTTP-equivalent meta tags. When working with the library's APIs, you will likely be providing objects that conform to one of these three specific subtypes.

type MetaTag = HTML5MetaTag | RDFaMetaTag | HTTPEquivMetaTag;

When using additionalMetaTags, be aware of how tags are rendered and merged:

1. No Internal Deduplication: The library does not deduplicate entries within a single additionalMetaTags array. If you provide multiple entries with the same name, property, or httpEquiv, both will be rendered in the HTML.
2. Array Replacement during deepMerge: If you are combining base (layout-level) and page-level meta tags using deepMerge, the additionalMetaTags array is replaced rather than concatenated. A page-level additionalMetaTags array will completely overwrite the layout-level array. This behavior prevents duplicate tags across different layers but requires you to define all necessary additional tags at the page level if you want to override the layout.

Blume uses the file system to automatically generate the sidebar. To control the organization and order of your documentation:

1. File Structure: Place content in content/ (for English) and ja/ (for Japanese). Use meta.ts files within folders to manage group-level metadata.
2. Page Order: Set the order of individual pages using the sidebar.order field in the page's frontmatter.
3. Group Order: To order groups (folders) in the sidebar, use the order field within the defineMeta function in the folder's meta.ts file.
4. Localization: For shared groups (like Open Graph or JSON-LD) where labels are identical across languages, use meta.$.ts to share metadata across all locales and avoid duplication in the ja/ directory.

In blume, sidebar organization is handled via meta.ts or meta.$.ts files within content folders.

• meta.$.ts (Shared Groups): Use this file for groups that share the same label across all locales (e.g., Open Graph, JSON-LD). It is placed in the folder and automatically applied to all language subdirectories.
• meta.ts (Locale-specific Groups): Use this file when a group needs a translated label for a specific language (e.g., 'Types' vs '型定義').
• Ordering: Use the order property within defineMeta to control the sequence of groups and pages.
• Page Ordering: For individual pages, use the sidebar.order property in the page's frontmatter.

// docs/content/meta-tags-properties/meta.ts
import { defineMeta } from 'blume';

export default defineMeta({
  title: 'MetaTags Properties',
  order: 1
});

The <MetaTags> and <JsonLd> components are not tied to SvelteKit internals. They work in any Svelte project by writing directly into <svelte:head> (or inlining when using <JsonLd output="body">).

While the library provides SvelteKit-specific patterns using load-based files (+layout.ts, +page.ts) and deepMerge, in a plain Svelte application, you should simply pass your data directly to the <MetaTags> props from your own data-fetching logic.