RemixにおけるSEOのためのローカライズされたリンクタグ

多言語にローカライズされたコンテンツを持つサイトを構築するには、多くの側面があります。SEOを最適化するためには、ページには別のローカライズされたバージョンを指すリンク要素が必要です。

Remixにはリンク関数がありますが、この関数にはローダーからのデータが含まれていません。ブログの記事などの動的なルートがある場合、スラッグ /blog/some-article に基づいたURLを使用する場合、リンク関数を使用すると、ルートの動的な部分にアクセスできないため、ローカライズされたリンクタグを生成することができません。

解決策は、代わりにRemixのメタ関数を使用することです。メタ関数にはローダーからデータが渡され、tagName プロパティを使用して <link> タグをレンダリングできます。Googleのガイドラインでは、各言語バージョンは自身だけでなく、他のすべての言語バージョンもリストする必要があるため、すべての言語のすべてのリンクを含める必要があります。

以下がその方法です：

import type {LoaderFunctionArgs, MetaFunction} from '@remix-run/node';
 
export const loader = async ({params}: LoaderFunctionArgs) => {
  const response = await fetch(`/api/blog/${params.slug}`);
  
  return await response.json();
};
 
export const meta: MetaFunction<typeof loader> = ({data}) => [
  {title: data?.title},
  {content: data?.description, name: 'description'},
  {
    href: `https://domain.com/blog/${data?.slug}`,
    hreflang: 'en',
    rel: 'alternate',
    tagName: 'link',
  },
  {
    href: `https://domain.com/ja/blog/${data?.slug}`,
    hreflang: 'ja',
    rel: 'alternate',
    tagName: 'link',
  },
  {
    href: `https://domain.com/fr/blog/${data?.slug}`,
    hreflang: 'fr',
    rel: 'alternate',
    tagName: 'link',
  },
];

ユーティリティ関数

すべてのローカライズされたページにこれらのリンクを含める必要があるため、これらのリンクタグを返すユーティリティ関数を作成するべきです。

// utils.ts
 
export const getLocalizedLinks = (path: string) => [
  {
    href: `https://domain.com${path}`,
    hreflang: 'en',
    rel: 'alternate',
    tagName: 'link',
  },
  {
    href: `https://domain.com/ja${path}`,
    hreflang: 'ja',
    rel: 'alternate',
    tagName: 'link',
  },
  {
    href: `https://domain.com/fr${path}`,
    hreflang: 'fr',
    rel: 'alternate',
    tagName: 'link',
  },
];

そして、それをルートのメタ関数にインポートします。

import {getLocalizedLinks} from '~/utils';
 
export const meta: MetaFunction<typeof loader> = ({data}) => [
  {title: data?.title},
  {content: data?.description, name: 'description'},
  ...getLocalizedLinks(`/blog/${data?.slug}`),
];

以上です！