HTML lang属性とは？正しい書き方と設定方法をわかりやすく解説

2026年2月14日

この記事の監修者：倉田真太郎

お役立ちセミナー開催情報

BtoC Marketing Funnel NEXT Conference効果が出る導線設計できていますか？数字で証明するKPIの改善事例14選

CVR、UU数、LTV、購買単価、集客数といった入口から出口戦略に関する各KPIをどのように改善したのか。本カンファレンスでは、成果を出した企業が取り組んだ"導線改善のリアル"を事例ベースで紐解いていきます。

お役立ちセミナーに参加する ▶

Webサイトを制作する際、HTMLファイルの冒頭で目にする「lang属性」をご存知でしょうか。この属性は、ページの言語を宣言する重要な役割を担っています。適切に設定することで、検索エンジンがコンテンツを正しく解釈し、スクリーンリーダーが適切な発音で読み上げることが可能になります。しかし、実際の現場では「どのような値を設定すべきか」「複数言語が混在する場合はどうするのか」といった疑問を持つ方も少なくありません。本記事では、HTML lang属性の基本的な概念から具体的な書き方、さらには多言語サイトでの活用方法まで、実践的な知識をわかりやすく解説します。

この記事でわかること

HTML lang属性の基本的な役割と重要性

lang属性はページの言語をブラウザや検索エンジンに伝える重要な要素です

正しい言語コードの書き方と設定方法

日本語サイトでは「ja」、英語サイトでは「en」を使用し、地域指定も可能です

多言語サイトでのlang属性の活用方法

ページ内の一部分だけ異なる言語を指定することで、より正確な言語情報を提供できます

HTML lang属性の基本

HTML lang属性とは、Webページやその一部の言語を指定するためのグローバル属性です。この属性を正しく設定することで、ブラウザや検索エンジン、支援技術がコンテンツの言語を正確に識別できるようになります。

lang属性は、HTML要素のどこにでも使用できるグローバル属性として定義されています。最も一般的な使い方は、html要素に設定してページ全体の言語を宣言する方法です。

lang属性とは何か

lang属性は、コンテンツが記述されている言語をマシンリーダブルな形式で示すための仕組みです。この属性値には、BCP 47という国際規格に基づいた言語タグを使用します。

言語タグは、言語を識別するための標準化されたコードです。日本語であれば「ja」、英語であれば「en」といった形式で記述します。これらのコードはISO 639-1という規格で定義されています。

lang属性を設定していないページは、言語が不明な状態として扱われます。その結果、検索エンジンの言語判定が不正確になったり、スクリーンリーダーが誤った発音で読み上げたりする可能性があります。

lang属性が必要な理由

lang属性の設定が必要とされる理由は複数あります。まず、アクセシビリティの観点から、スクリーンリーダーが正しい言語エンジンを選択するために不可欠です。

視覚障害を持つユーザーがスクリーンリーダーを使用する際、lang属性がないと日本語のコンテンツが英語の発音で読み上げられてしまうことがあります。これでは内容を正しく理解することができません。

検索エンジン最適化の面でも、lang属性は重要な役割を果たします。Googleなどの検索エンジンは、lang属性を参考にしてコンテンツの言語を判断し、適切な地域や言語の検索結果に表示します。

lang属性の適用範囲

lang属性は、設定した要素とその子要素すべてに継承されます。html要素に設定すれば、ページ全体に適用されることになります。

ただし、子要素で別のlang属性を設定すると、その要素以下では新しい言語設定が適用されます。この仕組みにより、1つのページ内で複数の言語を適切にマークアップすることが可能です。

たとえば、日本語のページ内に英語の引用文がある場合、その部分だけにlang=”en”を設定することで、より正確な言語情報を提供できます。

lang属性はページ全体だけでなく、部分的にも設定できる柔軟な属性です。アクセシビリティとSEOの両方に効果があるため、必ず設定しておきましょう。

HTML lang属性の書き方

lang属性を正しく記述するには、言語コードの形式を理解することが重要です。基本的な書き方から、地域指定を含む詳細な記述方法まで、実践的な例を交えて解説します。

言語コードの選択を誤ると、期待した効果が得られないだけでなく、かえってユーザー体験を損なう可能性があります。正確な書き方を身につけておきましょう。

基本的な記述形式

HTML lang属性の最も基本的な書き方は、html要素の開始タグに記述する方法です。日本語サイトの場合は以下のように記述します。

日本語サイトでは「<html lang=”ja”>」と記述するのが標準的な書き方です。この一行を追加するだけで、ページ全体が日本語であることを宣言できます。

言語	言語コード	記述例
日本語	ja	<html lang=”ja”>
英語	en	<html lang=”en”>
中国語	zh	<html lang=”zh”>
韓国語	ko	<html lang=”ko”>
フランス語	fr	<html lang=”fr”>

上記の表に示したように、主要な言語にはそれぞれ2文字のコードが割り当てられています。このコードはISO 639-1規格に基づいています。

地域指定を含む書き方

同じ言語でも地域によって表記や表現が異なる場合があります。そのような場合は、言語コードに地域コードを追加して指定することが可能です。

地域コードは、言語コードの後にハイフンを挟んで記述します。たとえば、アメリカ英語は「en-US」、イギリス英語は「en-GB」と指定します。

地域指定は必須ではありませんが、特定の地域向けコンテンツを提供する場合に有効です。日本語の場合は「ja-JP」と記述することもできます。

言語・地域	コード	用途
アメリカ英語	en-US	アメリカ向け英語コンテンツ
イギリス英語	en-GB	イギリス向け英語コンテンツ
簡体字中国語	zh-Hans	中国大陸向けコンテンツ
繁体字中国語	zh-Hant	台湾・香港向けコンテンツ
ブラジルポルトガル語	pt-BR	ブラジル向けコンテンツ

中国語のように、文字体系が異なる場合は特に地域指定が重要になります。簡体字と繁体字では表示されるフォントも変わるため、正確な指定が求められます。

部分的な言語指定

ページ全体ではなく、特定の要素だけに異なる言語を指定することも可能です。引用文や専門用語、外国語のフレーズなどに使用します。

たとえば、日本語のページ内に英語の引用がある場合は「<blockquote lang=”en”>」のように記述します。この指定により、その部分だけが英語として認識されます。

span要素やdiv要素にlang属性を付与することで、インライン要素やブロック要素の単位で言語を切り替えることができます。

HTML5での推奨記述

HTML5では、DOCTYPE宣言の直後にlang属性を持つhtml要素を記述することが推奨されています。完全な記述例は以下のとおりです。

「<!DOCTYPE html><html lang=”ja”>」という形式が、現在のWeb標準に準拠した書き方です。この記述により、ブラウザはHTML5文書として解釈し、日本語コンテンツとして処理します。

XHTMLの場合は、lang属性に加えてxml:lang属性も併記する必要がありましたが、HTML5では lang属性のみで十分です。

言語コードは大文字・小文字を区別しませんが、慣例として言語部分は小文字、地域部分は大文字で記述することが多いです。

バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！

サービス詳細を見る ▶

資料をダウンロードする ▶

HTML lang属性の設定方法

実際にlang属性を設定する方法は、Webサイトの構築環境によって異なります。静的HTMLファイルを直接編集する場合と、CMSを使用する場合では手順が変わります。

それぞれの環境に応じた設定方法を理解しておくことで、どのような案件でも適切に対応できるようになります。

静的HTMLでの設定

静的HTMLファイルの場合は、テキストエディタでファイルを開き、直接コードを編集します。html要素の開始タグにlang属性を追加するだけで設定完了です。

新規作成時には、HTMLテンプレートにあらかじめlang属性を含めておくと、設定漏れを防ぐことができます。

静的HTMLでlang属性を設定する際のチェックポイント

DOCTYPE宣言の直後にhtml要素があることを確認
lang属性の値が正しい言語コードであることを確認
属性値がダブルクォートで囲まれていることを確認
既存のlang属性と重複していないことを確認

上記のチェックリストを活用して、設定ミスを防ぎましょう。特に、属性値のスペルミスは見落としやすいポイントです。

WordPressでの設定

WordPressでは、管理画面の「設定」から「一般」を開き、「サイトの言語」を選択することでlang属性が自動的に設定されます。

「日本語」を選択すると、出力されるHTMLには自動的に「lang=”ja”」が含まれます。多くの場合、追加の作業は必要ありません。

カスタムテーマを使用している場合は、header.phpファイルでlanguage_attributes()関数が呼び出されているか確認することをおすすめします。

多言語プラグインの活用

WordPressで多言語サイトを構築する場合は、専用のプラグインを使用することで、言語ごとに適切なlang属性を自動設定できます。

代表的なプラグインには、WPML、Polylang、Translatepressなどがあります。これらのプラグインは、言語切り替え機能とともにlang属性の管理も行います。

プラグインを使用する際は、HTMLソースコードを確認して、lang属性が正しく出力されているかチェックすることが重要です。

JavaScriptでの動的設定

シングルページアプリケーション（SPA）のように、JavaScriptで動的にコンテンツを切り替える場合は、lang属性も動的に更新する必要があります。

document.documentElement.lang = ‘en’; のような記述で、JavaScriptからlang属性を変更することが可能です。

ユーザーの言語設定に応じて動的にlang属性を変更することで、より適切なユーザー体験を提供できます。

使用するCMSやフレームワークによって設定方法は異なりますが、最終的にHTMLソースを確認することが最も確実な方法です。

バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！

バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。

サービス資料を受け取る ▶

サービス導入事例

株式会社ヤマダデンキ様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る

HTML lang属性のSEO効果

lang属性は、SEOにおいても重要な役割を果たします。検索エンジンがコンテンツの言語を正確に判定するための手がかりとなり、適切な検索結果への表示に貢献します。

ただし、lang属性だけでSEOが劇的に改善するわけではありません。他の要素と組み合わせることで、その効果を最大限に発揮できます。

検索エンジンの言語判定

Googleをはじめとする検索エンジンは、コンテンツの言語を判定するために複数のシグナルを使用します。lang属性はそのシグナルの1つとして参照されます。

検索エンジンは、lang属性の情報を参考にしつつも、実際のコンテンツ内容から言語を判断することが多いとされています。

そのため、lang属性を設定するだけでなく、コンテンツ自体が指定した言語で適切に記述されていることが重要です。

hreflang属性との違い

多言語サイトのSEO対策では、lang属性とhreflang属性を混同しないことが大切です。両者は役割が異なります。

属性	役割	設定場所
lang属性	ページの言語を宣言	html要素など
hreflang属性	代替言語ページを指定	link要素、a要素

hreflang属性は、同じコンテンツの異なる言語バージョンの存在を検索エンジンに伝えるためのものです。多言語サイトでは両方を適切に設定することが推奨されます。

lang属性はページ自体の言語を示し、hreflang属性は他の言語版ページへの関連付けを示すという違いがあります。

ローカルSEOへの影響

地域指定を含むlang属性（例：ja-JP）を使用することで、特定の地域向けコンテンツであることをより明確に示すことができます。

ローカルSEOを意識する場合は、lang属性だけでなく、サーバーの場所やドメイン（.jp、.comなど）、Google Search Consoleでの地域設定も考慮する必要があります。

複数の要素を総合的に設定することで、検索エンジンに対してより明確な地域シグナルを送ることができます。

lang属性はSEOの基礎的な設定項目です。hreflang属性と合わせて正しく設定することで、多言語サイトの検索順位向上が期待できます。

HTML lang属性の注意点

lang属性を設定する際には、いくつかの注意点があります。よくある間違いを避けることで、意図したとおりの効果を得ることができます。

特に、言語コードの誤りや設定の重複は、かえって悪影響を及ぼす可能性があるため注意が必要です。

よくある設定ミス

lang属性の設定で最もよく見られるミスは、誤った言語コードの使用です。たとえば、日本語を「jp」と記述するケースがありますが、正しくは「ja」です。

「jp」は日本の国コードであり、言語コードではありません。言語コードと国コードを混同しないよう注意しましょう。

よくある間違いと正しい記述

誤：lang=”jp” → 正：lang=”ja”（日本語）
誤：lang=”uk” → 正：lang=”en-GB”（イギリス英語）
誤：lang=”chinese” → 正：lang=”zh”（中国語）
誤：lang=”JA” → 正：lang=”ja”（小文字推奨）

言語コードは仕様上大文字・小文字を区別しませんが、一般的には小文字で記述することが推奨されています。

空のlang属性の問題

lang属性の値を空にすること（lang=””）は、言語が不明であることを明示的に宣言することになります。

これは特殊なケースでのみ使用すべきであり、通常のWebページでは避けるべき記述です。言語が明確な場合は、必ず適切な言語コードを設定しましょう。

lang属性を設定しない場合と空の値を設定する場合では、ブラウザの挙動が異なる可能性があります。

継承の仕組みを理解する

lang属性は親要素から子要素へ継承されます。この仕組みを理解していないと、意図しない言語設定になることがあります。

html要素にlang=”ja”を設定し、body内の一部にlang=”en”を設定した場合、その要素とその子孫は英語として扱われます。元の日本語設定に戻すには、再度lang=”ja”を設定する必要があります。

複雑な言語構造を持つページでは、各要素のlang属性が正しく設定されているか、開発者ツールで確認することをおすすめします。

検証方法とツール

lang属性の設定を検証するには、いくつかの方法があります。最も簡単なのは、ブラウザの開発者ツールでHTMLソースを確認する方法です。

W3CのMarkup Validation Serviceを使用すると、lang属性を含むHTMLの文法チェックが行えます。また、アクセシビリティ検証ツールでも、lang属性の設定状況を確認できます。

定期的にHTMLの検証を行うことで、lang属性を含むさまざまな設定ミスを早期に発見できます。

設定ミスは検索順位やアクセシビリティに影響を与える可能性があります。公開前に必ず確認する習慣をつけましょう。

よくある質問

lang属性を設定しないとどうなりますか？: lang属性を設定しない場合、ブラウザや検索エンジンはコンテンツから言語を推測します。その結果、言語判定が不正確になることがあります。特にスクリーンリーダーを使用するユーザーにとっては、誤った言語設定により内容を正しく理解できない可能性があるため、設定することが推奨されます。
lang属性とhreflang属性の違いは何ですか？: lang属性はページの言語を宣言するためのもので、html要素などに設定します。一方、hreflang属性は多言語サイトにおいて、同じコンテンツの異なる言語バージョンの存在を検索エンジンに伝えるために使用します。両者は役割が異なるため、多言語サイトでは両方を適切に設定することが望ましいです。
日本語と英語が混在するページではどう設定すべきですか？: ページの主要な言語をhtml要素のlang属性に設定し、異なる言語の部分には個別にlang属性を追加します。たとえば、日本語がメインでhtml lang=”ja”と設定し、英語の引用部分には<blockquote lang=”en”>のように指定します。これにより、スクリーンリーダーが各部分を適切な言語で読み上げることができます。
lang属性は検索順位に直接影響しますか？: lang属性単独で検索順位が大きく変動することは少ないと考えられています。ただし、検索エンジンがコンテンツの言語を正確に判定するための手がかりの1つとして参照されるため、適切な検索結果への表示に貢献します。アクセシビリティやユーザー体験の向上にもつながるため、設定することが推奨されます。