《ブログ抜粋》 1つのHTMLファイルで多言語のWebページを生成する（SEOもしっかりやる）。
このノートは、ワンダウォール・ネットのブログに掲載した「多言語対応サイト」のシステム構築に関する記事「1つのHTMLファイルで多言語のWebページを生成する（SEOもしっかりやる）」の抜粋です。
SEOを意識した多国語サイトの制作ルール
多言語対応サイトのシステム化する前にいくつか検討しなければならないことがあった。中でも一番重要なのがSEOだろう。そもそも多言語サイトにおけるSEO対策についてしっかり方針を決めなければならないので、リサーチの結果、以下のルールでページを構築することにした。
1) ドメイン／サブドメインは共通のものにする
2) 言語ごとに独自のURLになるようにする
3) 一方、URLパラメーターで言語を分けるのはNG
4) 同一内容で言語違いのページは、rel="canonical" / rel="alternate" hreflang="" をきちんと記述する
5)ページに表示されるテキストだけではなく、構造化データも言語ごとに記述する
1）〜3）についてはディレクトリー構造をどう設計するか？という話で、日本語ページはドキュメントルート配下に普通に構築しつつ、英語は /en ディレクトリーの下に日本語と同じファイル構成を作っていくようにした。
今後、中国語が追加される際は /cn 、フランス語なら /fr のディレクトリーを追加して、配下にあるHTMLファイルはそのディレクトリー名でもって「自分たちは何語なのか」を自動判別させる...
iOS App開発で学んだ多言語対応をWebに応用
iOS開発を行っていると、画面上に表示する言語はLocalizable.stringsファイルという言語テキストのみのファイルを別に作り、UIと言語を分離させるのがセオリーとなる。この考え方をWebページにも応用したのが今回のトライアルだ。
まずHTMLページがリクエストされたら、サーバーサイドPHPがURLから言語を特定し、ヘッダー部分に言語を表すメタタグを挿入する。
Googleも最近は賢くなって、JavaScriptで制御したページ表示をしっかり認識するようになっている。ブラウザがHTMLを読み込むとJavaScriptが言語を特定した上で、前述のpartアトリビュートに対応した言語テキストを挿入してページを構築していく。ちなみに英語と日本語のタイポグラフィの差がレイアウト全体に影響することが多々あるが、bodyタグに言語を表すクラスを定義することで、言語ごとに別のスタイルシートを適用できるよう配慮してある...
この手法によるメリット
この方法を設計して実際にページ制作までを行ったが、まずは日本語に集中してHTMLやスタイルシートの作成を行い、すべて完成したら日本語用のファイルを enフォルダーにコピーするだけで英語ページになる。ページ内容に修正がある場合も、HTML部分であれば1ファイルを修正してコピーすれば済むし、スタイルシートは共通化されているので手間がかからない。何よりももっとも修正が多いテキスト部分を1つのファイル修正で完結できるのがメリットだ...
図解やソースコードを交えて紹介している全文は、こちらでご覧ください。
この記事が気に入ったらサポートをしてみませんか？