Barkeeperウェブサイトの多言語機能
Barkeeperのウェブサイトは、どの言語でも表示することが可能です。ここでは、内蔵の最適化されたテンプレートを使用する際の仕組みと、訪問者が簡単に利用できる方法について説明します。
Barkeeperの主なデザイン目標の一つは、最初から多言語対応と多地域対応のツールにすることでした。そのため、サイトジェネレーターとバックエンドツールをこの機能を念頭に置いて構築しました。
デモサイト「Bear Osaka」を例に取ると、この機能がエンドユーザーにとっていかに簡単に利用できるかがわかります。
ホームページ上で
ホームページでは、ページの左上に言語切替ボタンがすぐに表示されます。これは、モバイルビューとデスクトップビューの両方でアクセス可能です。

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

言語検出についてはどうでしょうか?
訪問者のウェブブラウザは、彼らが読みたい言語のリストを送信します。この情報を使用して、表示しているコンテンツが訪問者の好む言語であるかどうかを判断できます。
強制的にリダイレクトしたり、自動的に言語を決定したりすることは、ユーザーエクスペリエンスを損ないますが、Barkeeperのウェブサイトでは、訪問者が希望する場合に、好みの言語に誘導するための措置を講じています。
ホームページの言語選択メニューの隣には、利用可能な場合にユーザーが好みの言語を選択できるようにするための目立つボタンを表示します。

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

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

ウェブサイトがオプションのAI翻訳機能を使用するように設定されている場合、すべての言語が利用可能になります。ただし、もちろんすべてのコンテンツを人間によってローカライズすることをお勧めします。
他のすべてのページでも言語検出が使用されています。
すべてのページの下部には、ブラウザ設定に基づいてユーザーが好むと思われる言語を選択できるリンクも表示されます。

このリンクは、ページのコンテンツが検出されたブラウザの優先言語と一致しない場合に常に表示されます。
SEOに関する考慮事項
ウェブサイトの多言語コンテンツを生成する際には、SEOを考慮することが重要です。これを容易にするために、Barkeeperは煩雑な部分を自動化しているため、ユーザーはこれを意識する必要がありません。
Canonical URL
Canonical URLは、検索エンジンに指定されたURLをそのページの「真の」ソースとして扱うように知らせる特別なタグです。私たちは、ウェブサイトのデフォルト言語バージョンに自動的にCanonical URLを設定します。
ただし、いくつかのコンテンツについては、検索結果を改善するために、ロケールごとにCanonicalリンクを設定することも可能です。
HREFLANGおよびその他のMETAタグ
ページ上のコンテンツが他の言語で利用可能であることを検索エンジンに知らせるために使用できる特別なリンクタグがあります。これにより、検索エンジンがコンテンツを理解し、ローカライズされたバージョンを正しくインデックスするのに役立ちます。
また、Twitter(現在X)やFacebook/Instagramのソーシャルメディアタグもサポートしています。これらも、言語ごとにローカライズされたURLを送信するオプションがあります。
検索エンジンは、どのコンテンツをインデックスするか、ユーザーにどのコンテンツを表示するかを決定する際に、これらすべてのタグを組み合わせて使用できます。そのため、これらのタグを設定することが非常に重要です。

要約すると、
強力な多言語機能により、どの言語でも訪問者にリーチできます。訪問者にとって可能な限り簡単にするために、Barkeeperウェブサイトのすべてのページで言語選択が簡単かつ一貫して行えるようにしています。
また、ローカライズされたコンテンツが検索エンジンに正しくハイライトされるようにし、将来の潜在的な訪問者にもさらにリーチできるようにしています。