HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのhreflang属性でリンク先ドキュメントの言語を指定する方法

HTMLでは、hreflang属性を使うことで、リンク先のドキュメントがどの言語で書かれているかを指定できます。この属性は<a>タグや<link>タグなどと組み合わせて使用され、検索エンジンやブラウザに対してリンク先コンテンツの言語情報を伝える役割を持ちます。

hreflang属性の基本的な使い方

以下のサンプルコードは、hreflang属性を実装する方法を示しています。実際に動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML hreflang属性の例</title>
   </head>
   <body>
      <p>データベースチュートリアル：</p>
      <a href = "dbms/index.htm" hreflang = "en">DBMS</a>
   </body>
</html>

コードの解説

この例では、DBMS（データベース管理システム）のチュートリアルページへのリンクにhreflang = "en"を指定しています。これは「リンク先のページは英語（English）で書かれている」ことを示しています。

言語コードの指定方法

hreflang属性の値には、ISO 639-1で定義された言語コードを使用します。主な言語コードの例は以下の通りです。

  • ja … 日本語
  • en … 英語
  • zh … 中国語
  • ko … 韓国語
  • fr … フランス語
  • de … ドイツ語

hreflang属性を使うメリット

hreflang属性を適切に設定することで、次のようなメリットがあります。

  • 多言語サイトにおいて、検索エンジンがユーザーの言語に合ったページを正しく表示できる
  • 国際化されたWebサイトのSEO対策に役立つ
  • スクリーンリーダーなどの支援技術がリンク先の言語を認識しやすくなる

特に多言語対応のWebサイトを運営している場合は、hreflang属性を活用して各ページの言語を明示することをおすすめします。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTML DOMのLink hreflangプロパティとは？構文と使い方を実例で解説

    <link>要素のhreflangプロパティは、リンク先ドキュメントの言語コードを取得・設定するためのプロパティです。外部スタイルシートなど、<link>タグで参照した文書がどの言語で書かれているかをJavaScriptから確認したり、状況に応じて値を書き換えたりすることができます。 構文 基本的な構文は以下の通りです。 hreflang属性値を取得する場合 linkObject.hreflang hreflangに言語コードを設定する場合 linkObject.hreflang = langCode サンプルコード Link hreflangプロパティの具体的