Skip to content

Instantly share code, notes, and snippets.

@manabuyasuda
Last active March 26, 2020 02:36
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manabuyasuda/dd976907005a588e3203da433289e6af to your computer and use it in GitHub Desktop.
Save manabuyasuda/dd976907005a588e3203da433289e6af to your computer and use it in GitHub Desktop.
他言語サイトを制作するときのメモ

alternate属性値とhreflang属性

同じドメイン内で、ディレクトリによって国や言語を振り分けている場合、alternate属性値とhreflang属性を指定して紐付けます。

言語や地域の URL に hreflang を使用する https://support.google.com/webmasters/answer/189077?hl=ja

<link rel="alternate" hreflang="ja" href="https://www.example.com/">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/">
<link rel="alternate" hreflang="zh-cn" href="https://www.example.com/zh-cn/">
<link rel="alternate" hreflang="zh-tw" href="https://www.example.com/zh-tw/">
<link rel="alternate" hreflang="ko" href="https://www.example.com/ko/">
<link rel="alternate" hreflang="th" href="https://www.example.com/th/">
<link rel="alternate" hreflang="vi" href="https://www.example.com/vi/">
<link rel="alternate" hreflang="ru" href="https://www.example.com/ru/">

lang属性

参照:言語コードと言語名の配列

中国語の言語コードの指定方法が変わったようです(ソース:W3C日本語訳)。

  • 中国語簡体字サイト: lang="zh-cmn-Hans"
  • 中国語繁体字サイト: lang="zh-cmn-Hant"

参考サイト

langList=[
	["en","英語"],
	["fr","フランス語"],
	["de","ドイツ語"],
	["it","イタリア語"],
	["nl","オランダ語"],
	["ru","ロシア語"],
	["es","スペイン語"],
	["ja","日本語"],
	["zh","中国語"],
	["zh-CN","中国語(簡体字)"],
	["zh-TW","中国語(繁体字)"],
	["ko","韓国語"],
	["el","ギリシャ語"],
	["af","アフリカーンス語"],
	["sq","アルバニア語"],
	["ar","アラビア語"],
	["be","ベラルーシ語"],
	["bg","ブルガリア語"],
	["ca","カタロニア語"],
	["hr","クロアチア語"],
	["cs","チェコ語"],
	["da","デンマーク語"],
	["et","エストニア語"],
	["tl","フィリピノ語"],
	["fi","フィンランド語"],
	["gl","ガリシア語"],
	["iw","ヘブライ語"],
	["hi","ヒンディー語"],
	["hu","ハンガリー語"],
	["is","アイスランド語"],
	["id","インドネシア語"],
	["ga","アイルランド語"],
	["lv","ラトビア語"],
	["lt","リトアニア語"],
	["mk","マケドニア語"],
	["ms","マレー語"],
	["mt","マルタ語"],
	["no","ノルウェー語"],
	["fa","ペルシア語"],
	["pl","ポーランド語"],
	["pt-PT","ポルトガル語"],
	["ro","ルーマニア語"],
	["sr","セルビア語"],
	["sk","スロバキア語"],
	["sl","スロベニア語"],
	["sw","スワヒリ後"],
	["sv","スウェーデン語"],
	["tl","タガログ語"],
	["th","タイ語"],
	["tr","トルコ語"],
	["uk","ウクライナ語"],
	["vi","ベトナム語"],
	["cy","ウェールズ語"],
	["yi","イディッシュ語"]
];

個別のlang属性

言語や国を切り替えられるナビゲーションがあり、そのテキストがその言語で記述されている場合、全体としてjaであっても、そのリンクに関してはenzh-cnを指定します。

Googleはlang属性ではなくhreflang属性を見ている。

https://seopack.jp/seoblog/20161111-use-hreflang/

HTMLとしてlang属性を指定することは有効。例えば、翻訳ツールや、lang属性値でHTMLのデフォルトスタイルが変わるものもある。
その他、言語ごとのスタイルの調整にlang属性値をCSSから参照することもある。

その他の考慮すべき点

alt属性値

テキストやmeta要素などはもちろんですが、alt属性値もしっかりと翻訳してもらう必要があります。

インタラクティブコンテンツ

タブやアコーディオン、フォームのselectタグなど、デフォルトで隠されているコンテンツを見逃してしまい、翻訳漏れする可能性があります。

言語設定メニュー

言語設定メニューには国旗をアイコンとして使いません。国旗と言語はイコールではありませんし、国によっては複数の公用語を制定しているところもあります。

メニューのラベルは、そのページではなく、その言語に合わせてつけます。例えば、英語のサイトで日本語ページへのラベルを「japanese」とするよりも「日本語」としたほうが分かりやすくなります。

日付

日本では「2017年7月7日」と書くのが普通ですが、北米では「July 7, 2017」、イギリスやオーストラリアでは「7 July, 2017」と書かれます。

文化によって異なるしぐさやジェスチャーなど

ピースサインは日本や欧米諸国では「平和」や「勝利」の意味ですが、ギリシャでは「くたばれ」の意味になります。タイなどの仏教国では頭をなでる行為は無礼だとみなされます。

その表現が正しく解釈されるのか、その文化に精通した人に判断してもらいます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment