metaタグの使い方とWebページのメタ情報を設定する方法をわかりやすく解説

スポンサーリンク
スポンサーリンク

metaの概要

Webページのメタ情報を定義する HTMLタグ

<meta name=”情報の種類” content=”値”>

概要 metaタグは、HTML文書のメタデータ（ページの情報）を設定するために使用されます。検索エンジン最適化（SEO）、文字エンコーディングの指定、リダイレクトの設定など、多くの用途があります。
  • metaタグはheadタグ内に記述し、HTML文書の情報を設定する。
  • SEO、SNSでの表示設定、リダイレクト、文字コード指定などに利用される。
  • 属性によってさまざまな機能を持つ。

metaタグの主な属性

属性 説明 使用例
charset 文字エンコーディングを指定 <meta charset="UTF-8">
name メタ情報の種類を指定 <meta name="description" content="ページの説明">
content 指定した情報の内容 <meta name="keywords" content="HTML, CSS, JavaScript">
http-equiv HTTPヘッダーの代替設定 <meta http-equiv="refresh" content="5;url=https://example.com">
viewport レスポンシブ対応の設定 <meta name="viewport" content="width=device-width, initial-scale=1">

metaタグの基本的な使い方

以下の例では、metaタグを使って基本的なメタ情報を設定しています。

<head>
    <meta charset="UTF-8">
    <meta name="description" content="このページはHTMLのmetaタグについて解説しています。">
    <meta name="keywords" content="HTML, metaタグ, SEO">
    <meta name="author" content="サイト運営者">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

metaタグの応用：SEO対策

検索エンジンにページ内容を適切に伝えるために、metaタグを活用します。

<meta name="robots" content="index, follow">

metaタグの応用：SNSでの表示設定（OGP）

OGP（Open Graph Protocol）を設定すると、SNSでのリンクプレビューが適切に表示されます。

<meta property="og:title" content="HTML metaタグの使い方">
<meta property="og:description" content="metaタグの基本から応用まで詳しく解説">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/meta-tags">

metaタグの応用：リダイレクト

一定時間後に別のページへ自動的に移動するリダイレクトを設定できます。

<meta http-equiv="refresh" content="5;url=https://example.com">

metaタグの応用：モバイル対応

レスポンシブデザインを適切に機能させるために、viewportの設定が重要です。

<meta name="viewport" content="width=device-width, initial-scale=1">

注意事項

  • metaタグはheadタグ内に記述するのが一般的。
  • SEOに多少は影響するため、descriptionやkeywordsを適切に設定するとよい。
  • モバイル対応のために、viewportを設定するとよい。
  • リダイレクトを設定する際は、ユーザーエクスペリエンスを考慮して適用する。

よくある質問

Q: metaタグはSEOにどのような影響を与えますか？
A: meta name="description" は検索結果のスニペットに影響し、適切な設定でクリック率を向上させる可能性があります。
Q: keywords属性はSEOに効果がありますか？
A: いいえ、Googleはmeta name="keywords" をSEOランキング要因として使用していません。
Q: viewport設定は必須ですか？
A: レスポンシブデザインを適用する場合は必須です。指定しないとスマートフォンで適切に表示されません。
Q: metaタグでリダイレクトを設定するのは良い方法ですか？
A: 一般的にはサーバーサイドの301リダイレクトの方がSEOに適しています。
Q: OGP設定はどのSNSに対応していますか？
A: Facebook、Twitter、LinkedInなどのSNSがOGPを利用してプレビューを生成します。

まとめ

  • metaタグはWebページのメタ情報を定義するために使用される。
  • SEO対策としてdescriptionやrobotsの設定が重要。
  • SNSで適切なプレビューを表示するために、OGP設定を行う。
  • レスポンシブ対応のためにviewportを設定する。
  • リダイレクトを行う場合は、サーバーサイドの設定と比較検討する。
スポンサーリンク