Svelte Meta Tags v4をリリースしました！

Svelte Meta Tagsとは

Svelte Meta Tagsとは、Svelteアプリケーションでメタタグを管理および更新するためのライブラリです。

SEO（検索エンジン最適化）やソーシャルメディアでのシェア時に重要となるメタ情報（タイトル、説明、OGPタグなど）を動的に設定するのに役立ちます。

2021年頃から開発を続け、最近v4をリリースしましたのでどういう点がアップデートされたか紹介していきます。

Svelte5に対応しました！

2024年10月22日にSvelte5が正式にリリースされました！これに伴い、Svelte Meta Tagsが提供する<MetaTags/>コンポーネント,<JsonLd/>コンポーネントをSvelte5の構文に書き直しました。

Svelte5ではリアクティビティが改善されており、Svelte4以前では少しハック的な書き方をしないと動的にメタ情報が更新されない問題を抱えていましたが、Svelte5では修正されています。

Svelte Meta Tags v3はSvelte3, Svelte4に対応していましたが、今回の変更で対応しなくなりましたのでご注意ください。

deepMerge関数を提供するようになりました！

SvelteKitを使って開発していると親のレイアウトコンポーネントでデフォルトのメタ情報を設定し、子のページでtitleやdescriptionを変更したい場合があります。

Svelte Meta Tags v3まではlodash.mergeやdeepmerge、just-extendなど2つ以上のオブジェクトのプロパティを深くマージする関数をユーザーそれぞれで使ってもらうという仕様にしていましたが、今回のアップデートでSvelte Meta TagsがdeepMerge関数を提供するようにしました。

以下、使用例です。

src/routes/+layout.svelte

<script>
  import { page } from '$app/state';
  import { MetaTags, deepMerge } from 'svelte-meta-tags';

  let { data, children } = $props();

  let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
</script>

<MetaTags {...metaTags} />

{@render children()}

src/routes/+layout.ts

import type { MetaTagsProps } from 'svelte-meta-tags';

export const load = ({ url }) => {
  const baseMetaTags = Object.freeze({
    title: 'Default',
    titleTemplate: '%s | Svelte Meta Tags',
    description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
    canonical: new URL(url.pathname, url.origin).href,
    openGraph: {
      type: 'website',
      url: new URL(url.pathname, url.origin).href,
      locale: 'en_IE',
      title: 'Open Graph Title',
      description: 'Open Graph Description',
      siteName: 'SiteName',
      images: [
        {
          url: 'https://www.example.ie/og-image.jpg',
          alt: 'Og Image Alt',
          width: 800,
          height: 600,
          secureUrl: 'https://www.example.ie/og-image.jpg',
          type: 'image/jpeg'
        }
      ]
    }
  }) satisfies MetaTagsProps;

  return {
    baseMetaTags
  };
};

src/routes/about/+page.ts

import type { MetaTagsProps } from 'svelte-meta-tags';

export const load = () => {
  const pageMetaTags = Object.freeze({
    title: 'about',
    description: 'hogehoge',
    openGraph: {
      title: 'Open Graph Title about',
      description: 'Open Graph Description about'
    }
  }) satisfies MetaTagsProps;

  return {
    pageMetaTags
  };
};

twitter.handleはtwitter.creatorに名前を変更しました！

今まではtwitter.handleにハンドルネームを入力していましたが、twitter.creatorに名前を変更しました。
<meta name="twitter:creator" content="@handle">
というメタタグがレンダリングされるので実際のプロパティ名と合わせることでわかりやすくしました。

v3

<MetaTags
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Twitter',
    description: 'Twitter',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
/>

v4

<MetaTags
  twitter={{
    creator: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
    title: 'Twitter',
    description: 'Twitter',
    image: 'https://www.example.ie/twitter-image.jpg',
    imageAlt: 'Twitter image alt'
  }}
/>

ドキュメントサイトが完成しました！

今まで、Svelte Meta TagsのドキュメントはREADME.mdに書いていましたが、情報量も増えて読みづらくなっていましたし、検索性も悪いので欲しい情報に辿り着きづらい問題がありましたのでドキュメントサイトを作成することにしました。

• 英語と日本語対応
• 検索ができる
• ダークモードとライトモード対応

主にこれらの機能をAstroコミュニティが開発しているStarlightというドキュメントサイト作成フレームワークを使うことで簡単に作ることができました。

さいごに

Svelte Meta Tags v4のリリース内容をお伝えしました。
現在、Svelte Meta TagsはGitHubのスター数500を超えていて、たくさんの方々に利用していただいています。
これからも改善を続けていきますので応援していただけると助かります！