Barkeeperウェブサイトの多言語機能

Barkeeperのウェブサイトは、どの言語でも表示することが可能です。ここでは、内蔵の最適化されたテンプレートを使用する際の仕組みと、訪問者が簡単に利用できる方法について説明します。

Barkeeperウェブサイトの多言語機能
Photo by Romain Tordo / Unsplash

Barkeeperの主なデザイン目標の一つは、最初から多言語対応と多地域対応のツールにすることでした。そのため、サイトジェネレーターとバックエンドツールをこの機能を念頭に置いて構築しました。

デモサイト「Bear Osaka」を例に取ると、この機能がエンドユーザーにとっていかに簡単に利用できるかがわかります。

💡
This blog post is also available in English.

ホームページ上で

ホームページでは、ページの左上に言語切替ボタンがすぐに表示されます。これは、モバイルビューとデスクトップビューの両方でアクセス可能です。

ホームページの言語切替メニュー

切替ボタンをクリックまたはタップすると、言語選択ドロップダウンが表示されます。サポートされているすべての言語がエンドユーザーに表示され、選択できるようになります。

サポートされている言語を表示するために展開された言語切替メニュー

言語検出についてはどうでしょうか?

訪問者のウェブブラウザは、彼らが読みたい言語のリストを送信します。この情報を使用して、表示しているコンテンツが訪問者の好む言語であるかどうかを判断できます。

強制的にリダイレクトしたり、自動的に言語を決定したりすることは、ユーザーエクスペリエンスを損ないますが、Barkeeperのウェブサイトでは、訪問者が希望する場合に、好みの言語に誘導するための措置を講じています。

ホームページの言語選択メニューの隣には、利用可能な場合にユーザーが好みの言語を選択できるようにするための目立つボタンを表示します。

ホームページの「ロケールヒント」ボタンは、訪問者が簡単に切り替えられるように設置されています。

すべてのページで

すべてのページのフッターの右下には、セカンダリー言語切替メニューがあります。このメニューには、現在選択されている言語も表示されます。

すべてのページのフッターにある言語切替メニュー

フッターの切替ボタンをクリックまたはタップすると、言語選択ドロップダウンが表示されます。ホームページとは異なり、すべてのロケールで常に利用可能なわけではなく、このメニューにはコンテンツとローカリゼーション設定に依存して、言語オプションが少ない場合があります。

フッターの言語ドロップダウンに表示される利用可能な言語

ウェブサイトがオプションのAI翻訳機能を使用するように設定されている場合、すべての言語が利用可能になります。ただし、もちろんすべてのコンテンツを人間によってローカライズすることをお勧めします。

他のすべてのページでも言語検出が使用されています。

すべてのページの下部には、ブラウザ設定に基づいてユーザーが好むと思われる言語を選択できるリンクも表示されます。

日本語コンテンツに表示された「英語に切り替える」オプションのスクリーンショット

このリンクは、ページのコンテンツが検出されたブラウザの優先言語と一致しない場合に常に表示されます。

SEOに関する考慮事項

ウェブサイトの多言語コンテンツを生成する際には、SEOを考慮することが重要です。これを容易にするために、Barkeeperは煩雑な部分を自動化しているため、ユーザーはこれを意識する必要がありません。

Canonical URL

Canonical URLは、検索エンジンに指定されたURLをそのページの「真の」ソースとして扱うように知らせる特別なタグです。私たちは、ウェブサイトのデフォルト言語バージョンに自動的にCanonical URLを設定します。

ただし、いくつかのコンテンツについては、検索結果を改善するために、ロケールごとにCanonicalリンクを設定することも可能です。

HREFLANGおよびその他のMETAタグ

ページ上のコンテンツが他の言語で利用可能であることを検索エンジンに知らせるために使用できる特別なリンクタグがあります。これにより、検索エンジンがコンテンツを理解し、ローカライズされたバージョンを正しくインデックスするのに役立ちます。

また、Twitter(現在X)やFacebook/Instagramのソーシャルメディアタグもサポートしています。これらも、言語ごとにローカライズされたURLを送信するオプションがあります。

検索エンジンは、どのコンテンツをインデックスするか、ユーザーにどのコンテンツを表示するかを決定する際に、これらすべてのタグを組み合わせて使用できます。そのため、これらのタグを設定することが非常に重要です。

SEOを支援するためのHreflangおよびCanonical URLタグの例

要約すると、

強力な多言語機能により、どの言語でも訪問者にリーチできます。訪問者にとって可能な限り簡単にするために、Barkeeperウェブサイトのすべてのページで言語選択が簡単かつ一貫して行えるようにしています。

また、ローカライズされたコンテンツが検索エンジンに正しくハイライトされるようにし、将来の潜在的な訪問者にもさらにリーチできるようにしています。