SEO

SEOを意識したmetaタグ設定方法|覚えておきたい代表的なmetaタグ10つ

metaタグとは

metaタグのメタとは、メタデータという言葉からできています。メタデータはデータについてのデータになります。

そのためmetaタグはHTMLで構成されるWebページの基本的な情報を示すタグになります。代表的なmetaダクでは、Webページの著者や文字コード、タイトル、説明文などかあります。

基本的にmetaタグで設定する内容は検索エンジン・ブラウザ向けに記述するので、Webサイト上で表示されることが無いのでユーザーは閲覧することはありません。

metaタグの種類

metaタグはそれぞれ以下の属性をセットで記述することになります。この属性を記述することでmetaタグにそれぞれ役割を分けて使うようなイメージです。

  • name属性
  • http-equiv属性
  • content属性
  • charset属性
  • itemprop属性
  • property属性

name属性

metaタグの要素に対して名前を付与します。ユーザーが入力した値をサーバーやブラウザに送信するための識別子です。また一緒にcontent属性を合わせて記述することで名前と値を指定して使ったりします。

項目説明
descriptionWebページの内容をまとめた説明文を記述できます。
keywordsWebページの内容を示すキーワードを指定できます。
カンマ区切で複数キーワードの指定が可能。
robots検索エンジンのクローラーにインデックス、リンクのクロールの指示できます。
viewportスマホに最適化したページサイズの指定ができます。
authorWebページの作者を示す際に指定できます。

http-equiv属性

metaタグはhttp-equiv属性が指定されることで、ユーザーエージェント向けのプラグマ指示子になります。

項目説明
content-languageコンテンツの言語が指定できます。
content-typeファイルタイプや文字エンコーディングなどが指定できます。
default-styleデフォルトスタイルの指定ができます。
content属性をセットで指定してcssファイルの指定も可能。
refreshリダイレクト・再読み込みの指定ができます。
content属性をセットで指定して秒数とリンク先URLが指定が可能。

content属性

content属性は主にname属性、http-equiv属性と一緒に使って、実際の内容を指定します。

charset属性

charset属性は文字エンコーディングを指定する属性になります。基本的には「UTF-8」「Shift_JIS」「EUC-JP」を3つのどれかを指定することになると思います。

itemprop属性

itemprop属性は構造化データなどのプロパティを指定するための属性です。 例えば文書のタイトル、説明文、著者名などを指定することができます。

property属性

property属性は、SNSでシェアされたときに表示するサイト情報が指定できます。

覚えておきたい代表的なmetaタグ

数あるmetaタグですが、全てを覚える必要は無く必要なものだけ覚えれば問題ありません。ここでは特に利用することが多いmetaタグを紹介します。

ディスクリプションタグ

ディスクリプションタグはWebページの説明文を記述します。検索結果ページでタイトルとURLの下に表示されます。大体100文字から120文字程度で簡潔にまとめることを目指しましょう。

<meta content="概要文を120文字程度" name="description">

文字コード

文字コードはWebページをブラウザで表示する際の文字エンコーディングを指定します。作成した文書に合わせて「UTF-8」「Shift_JIS」「EUC-JP」の3つのどれかを指定しましょう。

<meta charset="utf-8">

コンテンツ言語

コンテンツの言語を指定するmetaタグになります。

<meta http-equiv="content-language" content="ja">

OGP

OGPタグはSNSに投稿・シェアされた時にWebサイトのタイトルやサムネイル画像を指定するmetaタグです。

<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="og:url" content="ページのURL" />
<meta property="og:type" content="ページの種類" />
<meta property="og:image" content="サムネイル画像のURL" />

スマホ最適化

スマホ向けにページサイズの指定ができます。
アクセスしたデバイスサイズに合わせて最適化した表示ができます。

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

noindex・nofollow

noindex・nofollowは検索エンジンのクローラーに対してインデックスしない、リンクパワーを付与しないことを指定できます。

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

IE対策

Internet Explorerのブラウザ使用してアクセスされた時に利用できる互換性のモードを指定することができます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ツールやソフトウェア名

Webページを作成したツール名、ソフトウェア名を指定できます。

<meta name="generator" content="ツール名・ソフトウェア名">

著者・作者

Webページの著者名・作者名を指定できます。

<meta name="author" content="著者名・作者名">

別ページ誘導タグ

リダイレクト・再読み込みの指定ができます。content属性を指定して、リダイレクトする秒数、リンク先URLが指定できます。

<meta http-equiv="refresh" content="10; url=index.html">

metaタグのSEOへの影響

metaタグの中でも、SEOに影響があるものがいくつかあるので説明していきたいと思います。

titleタグはSEO上とても重要

<title>タイトル名</title>

titleタグは検索結果ページの検索順位を決める上でシグナルの1つになっています。

titleタグ・descriptionタグはクリック率に影響を与える

<title>タイトル名</title>
<meta content="説明文" name="description">

titleタグとdescriptionタグは検索結果ページうえに表示されるので、ユーザーがどのWebサイトにアクセスするか決める時の指標となります。

keywordタグはSEO効果は無い

<meta name="keywords" content="keyword1,keyword2,keyword3">

keywordタグは設定してもSEO評価に影響はありません。そのため、keywordタグは設定していないWebサイトが多くなっています。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-SEO

© 2021 nukoblog