- Technology & Technique Output Blog -

【全部知ってる？】SEO対策に効果的なhead内に記述すべきタグ8選【今すぐ入れよう】

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

【headタグの中に何を書くべきか知りたい人】

「headタグの中ってたくさんの種類のタグがあるけど、実際のところ何を書けば良いんだろう。SEO対策に効果的なタグや、記載すべきタグ一つ一つの詳細も知りたい。」

 

こういった疑問に答えます。

この記事を書いている僕は、
過去にWeb制作会社で
エンジニアとして働いており、
記事内容の信頼担保に繋がるかと。

本記事を読み終わる頃には、
<head> 内に記述すべきタグと
その詳細が理解できますよ。

SEO対策に効果的なhead内に記述すべきタグ8選

SEO対策に効果的なhead内に記述すべきタグ8選

紹介するのは、以下の8つ。

  • その①：文字コードに関するタグ
  • その②：ビューポートに関するタグ
  • その③：タイトルタグ
  • その④：メタディスクリプション
  • その⑤：OGPに関するタグ
  • その⑥：ファビコンを表示するタグ
  • その⑦：タッチアイコンを表示するタグ
  • その⑧：外部ファイルを読み込むタグ

その①：文字コードに関するタグ

実際のコードが、下記のとおり。

 

<meta charset="UTF-8">

 

こちらが、文字コードに関するタグ。

文字コードとは、ざっくり以下のようなものです。

 

文字をコンピュータで
処理したり通信したりするために、
文字の種類に番号を割り振ったもの

その②：ビューポートに関するタグ

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

 

こちらが、ビューポートに関するタグ。

ビューポートに関して
詳しく知りたいという方は、
下記の動画がとても分かりやすいので、
こちらをぜひ参考にしてください。

 

その③：タイトルタグ

こちらに関しては、ご存知の方も多いと思います。

 

<title>ここにタイトルが入ります。</title>

 

こちらのタイトルタグは
非常に重要なタグでして、
なんとなくで決めるのではなく
SEOキーワードを入れたりなど
上手く活用しましょう。

その④：メタディスクリプション

<meta name="description" content="ここに説明文が入ります。">

 

こちらも知っている方が
ほとんどだとは思いますが、
タイトルタグと同様に
検索結果に表示される、非常に重要なタグ。

SEOの効果は無いみたいですが、
クリック率を左右するのできちんと活用しましょう。

メタキーワードは？【結論：不要です】

ここまで読んだ人の中には、

 

疑問に感じる女性

「メタキーワードは書かなくて良いの？」

 

と疑問に感じた方もいると思います。　

ですが結論、
（本記事の執筆時点では）
メタキーワードは書く不要です。

というのも、下記の記事にあるように、
このメタキーワードは
SEOの評価に一切関係しないと
Googleが明言しているから。

Google does not use the keywords meta tag in web ranking


 

一応、実際のコードも参考までに載せておきます。

 

<meta name="keywords" content="ここにキーワードをカンマ区切りで記載">

 

今後もしかしたら、以前のように
SEOに影響するようになるかもですが、
現時点では一切影響がないことは
頭に入れておきましょう。

その⑤：OGPに関するタグ

OGPとは、
「Open Graph Protcol」の略で、
TwitterやFacebookなどの
SNSでシェアした際に、
設定したWEBページの
タイトルやイメージ画像、
詳細などを正しく伝えるためのもの。

OGPに関するタグにも
種類がいくつかあるので、
参考までに何個かご紹介します。

 

 <meta property="og:url" content="ページのURL">
 <meta property="og:type" content="ページの種類">
 <meta property="og:title" content="ページのタイトル">
 <meta property="og:description" content="ページの説明文">
 <meta property="og:image" content="サムネイル画像のURL">
 <meta name="twitter:card" content="カードの種類">
 <meta name="twitter:site" content="Twitterのユーザー名（@〜）">

 

上記の中から、
パッと見で分かりにくいものを
何個か選んで解説します。

<meta property=”og:type” content=”ページの種類”>

この”ページの種類”には
いくつかあるみたいですが、
とりあえず下記の3つはおさえておきたいところ。

  • website: Webサイトのトップページ
  • blog: ブログのトップページ
  • article: 記事ページなど、Webサイトのトップ以外のページ

<meta name=”twitter:card” content=”カードの種類”>

こちらは、Twitterカードの種類を指定するタグ。

Twitterカードとは、
ツイートに貼り付けられた
記事へのリンクを
魅力的に見せる機能のことで、
これを設定することにより、
ツイートの中に
「アイキャッチ画像」や
「記事のタイトル」などが
表示されるようになります。

ちなみに、
カードの種類は全部で4種類ですが、
通常のWebサイトやブログの場合には
下記の2種類から選びます。

  • summary
  • summary_large_image

後者を選ぶと、大きなサムネイルが表示されます。

その⑥：ファビコンを表示するタグ

ファビコンとは、
「favorite（お気に入り）」と
「icon（アイコン）」が
合わさって出来た言葉でして、
ブックマークやタブを開いた際に
Webサイトの名前の横に並ぶ
小さなアイコン画像のこと。

実際のコードが、下記のとおり。

 

<link rel="icon" href="画像のパス">

その⑦：タッチアイコンを表示するタグ

タッチアイコンとは、
スマホでWebサイトを
ホーム画面に追加した時に
表示されるアイコンのことです。

コードが下記のとおり。

 

<link rel="apple-touch-icon" href="画像のパス">

 
 

この設定をせずに
ホーム画面にサイトを追加すると、
サイト全体のキャプチャー画像が
仮のアイコンとして設置され、
一見何のサイトか分からないので
なるべく設定しておきましょう。

その⑧：外部ファイルを読み込むタグ

こちらは説明するまでもないですが、
JavaScriptやCSSなどの外部ファイルを読み込むタグ。

 

<script src="js/script.js" async></script>
<link rel="stylesheet" href="css/style.css">

おまけ：電話番号の自動リンクを無効化するタグ

最後におまけでもう1つ、
必須では無いものの、重要なタグを紹介します。

それが、以前にツイートをした
電話番号の自動リンクを無効化するタグ。

実際のツイートが、以下のとおり。

 


 

ツイート内にもありますが、実際のコードが下記の通り。

 

<meta name="format-detection" content="telephone=no">

 
 

ブラウザによっては
文章中の数字を検知して、
電話番号のリンクを勝手に作ってしまう
ことがあるそうで、その防止用の記述です。

正しい電話番号の箇所に
リンクを貼るならまだ良いですが、
関係のないただの数字に
リンクを貼ってしまうこともあるそう。

なので対策として、
この記述を最初から書いておき、
本当にリンクが必要なところには
自分で記述するのが良さそうです。

ちなみにですが、
電話番号のリンクの貼り方は
aタグを使って以下のように書きます。

 

<a href="tel:000xxxxxxxx">000-xxxx-xxxx</a>

まとめ：SEO対策に効果的なhead内に記述すべきタグ【コピペOK】

まとめ：SEO対策に効果的なhead内に記述すべきタグ【コピペOK】

最後に、コードの一覧をまとめました。

コピペして使ってもOKです。

 

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>タイトルが入ります。</title>
 <meta name="description" content="説明文が入ります。">
 <meta name="keywords" content="キーワード1, キーワード2,...">
 <meta property="og:url" content="ページのURL">
 <meta property="og:type" content="ページの種類">
 <meta property="og:title" content="ページのタイトル">
 <meta property="og:description" content="ページの説明文">
 <meta property="og:image" content="サムネイル画像のURL">
 <meta name="twitter:card" content="カードの種類">
 <meta name="twitter:site" content="Twitterのユーザー名（@〜）">
 <link rel="icon" href="画像のパス">
 <link rel="apple-touch-icon" href="画像のパス">
 <meta name="format-detection" content="telephone=no">
 <script src="js/script.js" async></script>
 <link rel="stylesheet" href="css/style.css">

 
 

ぜひ有効活用してください😌

Tweet Facebook

関連記事

スキル学習に関する記事

Home >  Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ >  【全部知ってる？】SEO対策に効果的なhead内に記述すべきタグ8選【今すぐ入れよう】