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

HTMLのmeta要素の使い方完全ガイド｜description・viewport・robotsタグの基礎とSEO対策

この記事では、HTMLの<meta>要素の基本的な使い方から、SEO対策につながる実践的な活用方法までをわかりやすく解説します。

meta要素とは？

<meta>要素は、HTML文書に関するさまざまな種類のメタデータ（メタ情報）を定義するために使用される要素です。メタデータとは「情報」のことであり、より正確に言えば、他のデータについての説明や付加情報を提供するデータのことを指します。

<meta>要素には複数の属性と値が存在しますが、その中でもname属性は最も重要な属性の一つです。

name属性とdescriptionの設定

name属性にはいくつかの値を指定できます。代表的な例がdescriptionで、content属性と組み合わせてページの説明文を記述するために使われます。

<head>
  <meta name="description" content="HTMLのmeta要素について学ぼう" />
</head>

<meta>要素は必ず<head>要素の中にのみ配置します。

メタデータはWebページ上には表示されませんが、サーバーやブラウザ、検索エンジンといったマシンによって読み取られ、処理されます。

meta要素とSEOの関係

<meta>要素は、Googleなどの検索エンジンに対して、サイトのコンテンツ以外の追加情報（サイトが何について書かれているのか、検索クエリとの関連性がどの程度高いのか）を伝えることができます。そのため、SEOにおいて最も重要なHTML要素の一つと言えます。

metaのdescriptionは、検索エンジンがページ内コンテンツよりも適切だと判断した場合に、検索結果ページ（SERP：Search Engine Results Pages）に表示されるサイトの説明文として採用されることがあります。

viewportタグの使い方

viewportメタタグは、モバイル対応が不十分なWebサイトを小さな画面でも見やすく表示するために役立ちます。以下のviewport設定はモバイル向けに最適化されており、特別な理由がない限りデフォルトとして使用すべきものです。

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width=device-width：ページ幅をユーザーのデバイスの画面幅に合わせて設定するよう、ブラウザに指示します。
  • initial-scale：ページ初回読み込み時のズームレベルを制御します。initial-scale=1はズーム率100%を意味し、initial-scale=2に設定すると最初の表示時に200%で拡大されます。

viewportは<meta>要素の中でもやや高度なタグの一つです。デフォルト設定をカスタマイズする前に、仕組みをしっかり理解しておくことをおすすめします。Mozilla（MDN）にはviewportタグに関する充実したドキュメントが用意されているので、参考にするとよいでしょう。

robotsメタタグの使い方

robotsメタタグ（「ロボットメタディレクティブ」とも呼ばれます）は、indexまたはnoindexという値を使って、検索エンジンにページをインデックス（登録）させるかどうかを指示します。

デフォルトではindexに設定されているため、サイトをインデックスされたくない場合は、content属性の値としてnoindexを指定します。

<meta name="robots" content="noindex" />

robotsタグは、followまたはnofollowの値を使って、検索エンジンにサイト内のリンクをたどらせるかどうかを指定することもできます。

<meta name="robots" content="nofollow" />

また、noindexとnofollowを1つの要素にまとめて指定することも可能です。

<meta name="robots" content="noindex, nofollow" />

robotsタグ使用時の注意点

<meta>のrobots設定は慎重に行いましょう。上記のコードのようにnoindex, nofollowを実際に設定すると、コンテンツとリンクの両方について、サイト全体（グローバル）で検索エンジンによるインデックスを拒否することになります。これはSEOに大きな悪影響を及ぼすため、めったに行うべきではありません。

noindexの一般的な使用例としては、サイトがまだ開発中で一般公開の準備ができていない場合が挙げられます。WordPressには、この目的のためにページのインデックスを一時的に無効化するオプションが用意されています。

リンクに関しては、すべてのリンクに一律でnofollowを適用するのではなく、広告リンクなど検索エンジンがたどる必要のない特定の外部リンク（アウトバウンドリンク）に個別にnofollowを設定するのが実用的です。これはアンカー要素に直接指定します。

<a href="#" rel="nofollow">スポンサーを見る</a>

なお、デフォルトではハイパーリンクはfollowに設定されています。

  1. HTMLページでアニメーション画像（GIF）を表示する方法をわかりやすく解説

    HTMLにおけるアニメーション画像とは、Webページ上で動きのある画像のことです。一般的にはGIF（Graphics Interchange Format／グラフィックス・インターチェンジ・フォーマット）形式のファイルが使用されます。GIFは特別なプラグインやJavaScriptなしでもブラウザ上で自動的に再生されるため、手軽に動きのあるコンテンツを表現できるのが魅力です。 HTMLでアニメーション画像を追加するのはとても簡単です。<img>タグにsrc属性を組み合わせて使用します。src属性には、表示したいGIF画像のURLを指定します。 さらに、height属性とwidth属

  2. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <