Svelte/SapperでOGP設定をする

はじめに

SSRを選択する理由にOGP設定ができることが挙げられます。
最近、注目されているSvelte/SapperではどのようにOGP設定をするのか調査しました。

2021/02/17:追記
svelte-meta-tagsを使うのが便利です
https://github.com/oekazuma/svelte-meta-tags

OGP設定

OGP設定ではページごとに内容が変わることが求められます。
そうでなければ、異なる商品なのに静的なOGP設定しかできません。

OGP設定のog:urlにはリクエストURLを設定することにします。
sapper ではPRELOADINGを提供していて、簡単に言うと、実際に画面を開く前に、事前に読み込めるものは読み込んで高速化する技術です。このPRELOADING処理内でリクエストURLも取得することができます。

これを使うには、以下のようにscriptタグをcontext="module"で宣言します。
この中の処理はserverでのみ実行され、clientでは実行されません。
(Next.jsのgetInitialPropsやNuxt.jsのasyncDataだと公式サイトで言っています。)

index.svelte

<script context="module">
  export function preload({ host, path, params, query }) {
    // 処理
  }
</script>

この中でogp設定に必要な情報を作成し、必要であればDBなどから取得してください。
ここでは簡単に以下のように設定します。

index.svelte

<script context="module">
  export function preload({ host, path, params, query }) {
    // 必要ならここでDB取得処理を書いてください。

    let ogp = {}
    ogp.url = 'https://' + host + path
    ogp.type = 'article'
    ogp.title = '記事編集タイトル'
    ogp.description = '記事詳細'
    ogp.site_name = 'サイト名'
    ogp.image = 'https://sample/ogp_image.png'

    return { ogp }
  }
</script>

しかし、このままでは同じindex.svelteファイルからは読み取れないので、このscriptタグとは別にcontext="module"のないscriptタグの中でogp変数を外部から読み取れるようにexportで宣言します。※この変数名と<script context="module">内の戻り値の変数は同じにする必要があります。

index.svelte

<script context="module">
  ...
</script>

<script>
  export let ogp
</script>

<svelte:head>
  <title>Sapper project template</title>
  <meta property="og:url" content={ogp.url} />
  <meta property="og:type" content={ogp.type} />
  <meta property="og:title" content={ogp.title} />
  <meta property="og:description" content={ogp.description} />
  <meta property="og:site_name" content={ogp.site_name} />
  <meta property="og:image" content={ogp.image} />
</svelte:head>

参考サイト

Sapper公式 PRELOADING