1. TOP
  2. WEBサイト制作
  3. SEO対策もバッチリなhead&meta要素(2018決定版)

SEO対策もバッチリなhead&meta要素(2018決定版)

 2018/03/17 WEBサイト制作 コーディング Fumio Sakurai
この記事は約 14 分で読めます。 210 Views

<head>タグ内に書くべきものとは?

htmlの基本構成

サイトを作成するとき、今も昔も内容は大きく2つに分かれます。

html の中に head(頭)→ body(体)の順に情報を入力していきます。

headの基本要素

このheadの中に入れる要素は以下の5つです。

meta
・サイトの形式
・サイトの表示方法
・SEO要素など
title
ページや記事のタイトル
link
・サイトを表示するのに付随して必要なファイルへのリンク(cssなど)
・カノニカル設定(URL正規化処理)
・アイコンなどの設定
script
・JavaScript
・SEOなどで使う解析タグ
style
スタイル要素のインライン表記
(※非推奨)

5つ目のstyleについては、保守・運用の観点からオススメしません

具体的には以下の3点です。

  • wordpressなどのCMSで運用する際は「カスタムCSS」機能を活用する方が楽にデザイン調整ができる
  • head内の記載(インライン表記)はそのhtmlにしか適用できない
  • head要素が長くなってしまい、ソースが見辛い

CSSでのデザイン要素を、head内に記載することはサイトのページ数が少なかった時代の「古い制作方法」だと思います。

確かに、CSSの表示優先度の関係で表示が高速化するケースもありますが、以下のようにデメリットも大きいです。

  • A/Bテストに対応しづらい
  • デザインの修正をする際に、htmlソースを編集する必要がある

CSSの表記方法別のメリット/デメリットについては以下のサイトの解説がわかりやすいです。

CSSはどこに書く?外部CSSファイルの読み込み方&インラインでの書き方

以下、2018年3月執筆時点での、SEO対策を前提としたheadタグ内の書き方について解説します。

サンプルコード(head設置時の使い回し用)

上記コードサンプルのポイントは以下の通りです。

  • スマホ表示最適化
  • シェアされた時の表示を細かくカスタマイズしやすい
  • SEO解析しやすい
  • Googleのクローラー対策において不要なタグは削除

metaタグ内の項目の解説

①ほとんどのサイトで共通して必要な項目

charset
文字コード。基本的に「UTF-8」でOK
viewport
スマホ対応時の必須項目。
width=device-widthと
initial-scale=1
を設定しておけばOK
format-detection
電話・住所・メールの自動リンクを生成します。
※無効化推奨
content=”telephone=no,address=no,email=no”としておけばOK(例えばサイト内に何らかの顧客番号などの記載があり、それが電話番号のフォーマットと同じ場合は【iOSだと】電話番号のリンクに自動変換されてしまうため、そのような事態を防ぐため)
robots
サーチエンジンのロボット(クローラー)の動きを制御する設定。

  • index:インデックスしてもらう(※デフォルト)
  • noindex:インデックスを禁止する(検索結果に出さない)
  • nofollow:ページ内のリンクを辿らせないようにする

※noindexを指定してもロボットによるクローリングは行われます。検索結果に出ないだけです。クローリングも拒否するときは、robots.txtを利用します。

description
ページの概要を記載する。(SEO要素)

SEO上の順位上昇効果はないが、検索結果上でのクリック率向上には役立つ。

検索結果画面でのサマリーとして利用されることが多いため、以下の点を考慮して要約文書を作成する。

  • 前半50文字+後半70文字を意識する。(※検索結果での表示は、スマホは50文字、PCは120文字なため)
  • 検索キーワードを含ませる(キーワードが太字表示される)
  • ページごとに作成する

②OGP設定について(シェア時の表示情報)

OGPとは「Open Graph protocol」の略称で、FacebookやTwitter、Google+などのSNSでシェアされた際に、タイトルやURL、アイキャッチ画像などを意図した通りに表示させる仕組みです。

以下、OGPを活用する際にもっとも重要なFacebookでの仕様に基づいて解説します。

(参照:https://developers.facebook.com/docs/sharing/webmasters/

og:title
ページのタイトルを指定。指定がなければ、のタイトル設定を表示します。

サイト名などのブランド情報を含まない記事タイトルを設定します。

og:type
コンテンツのメディアのタイプを指定。FBではこのタグにより、ニュースフィードでのコンテンツの表示形式が決まります。

タイプを指定しない場合、デフォルトは「website」です。

複数のog:typeは使えません。

  • website:ウェブサイトのTOPページに指定する
  • article:ウェブサイトやブログのTOPページ「以外」に指定する
og:url
ページの正規URLを指定。(絶対パスで行うことが必須)

  • 絶対パス(OK)・・・”https://stakeholdersuccess.com/images/”
  • 相対パス(NG)・・・”/images/”

FBでの「いいね!」や「シェア」はこのURLで集計します。

モバイルとデスクトップでURLが異なる(レスポンシブでないサイトや、AMP対応しているサイトの場合)は、正規URLとしてこちらで記載を統一することにより複数のバージョン全体での「いいね!」や「シェア数」を集計できます。

og:image
アイキャッチで使われる画像を指定。(絶対パスで行うことが必須)

※Facebookでの画像推奨表示サイズは

1200 x 630ピクセル以上になっています。

https://developers.facebook.com/docs/sharing/best-practices#images

og:description
コンテンツの簡単な説明。2〜4文が一般的。
og:app_id
Facebookからサイトへのトラフィックに対する分析を確認する「Facebookインサイト」を仕様するための必須タグです。アプリIDはFBのアプリダッシュボードで取得・確認できます。

og:admin_idで指定することもできますが、個人情報を晒しているようなものなので非推奨です。
簡単に取得できるので、極力APP_IDを取得することをお勧めします。
なお、app_id と admin_id はどちらかを設定すればOKです。

og:locale
対応している言語の地域を指定します。
日本の場合は “ja_JP”
og:site_name
サイト名(ブランド名)を記載します。
(例) Stakeholder Success
og:updated_time
記事の更新日時を記載します。
※articleタグ内とどちらが優先されるかは未検証
(例)2018-03-17T23:56:45+09:00

③article関係タグ(FBでの表示に影響)

article:author
 著者のFacebookのProfileページのURLを入力。

記事をタイムラインでシェアしたときに、まだ「いいね!」してもらっていないときにタイムラインで表示されやすくなる。

article:publisher
 記事と関連づけしたいFacebookページがある場合、発行者として表示できます。
article:section
 記事内容が属するカテゴリー
article:published_time
 記事が公開された日時を表示したい場合
(例)2018-03-17T23:56:45+09:00
article:modified_time
 記事が変更された日時を表示したい場合
(例)2018-03-17T23:56:45+09:00

articleタグについては、国内のサイトではまだ記載されていないことが多いです。
Wordpressを利用している場合「Yoast SEO」プラグイン(無料アカウントでOK)で自動生成できますので、設定しておいてもいいかと思います。

④twitter用の設定

twitterでシェアする際に指定しておいたほうがいい項目は以下の2つです。

twitter:card
twitterカードの表示方法を指定します。
大きく以下の4種類あります。

  • Summary Card(summary)
  • Summary Card with Large Image(summary_large_image)
  • App Card(アプリ配布用)
  • Player Card(動画サイト用)

通常は「summary」でいいです。

大きな画像を使うかどうかはアイキャッチ画像と文章のマッチ度によります。

詳しい解説は以下のサイトがお勧めです。

(参考)【2018年版】Twitterカードとは?使い方と設定方法まとめ

twitter:site
記事に紐付ける著者のtwitterアカウント名を記載します。
(例) @ni_sakurai

twitter:title
twitter:description
twitter:image
などのタグで、twitter専用の内容を指定することもできますが、指定しない場合、ogタグでの指定内容が流用されますので、特に指定する必要はありません。

<link>タグの要素について

linkタグについて覚えておくべき使い方は大きく分けて以下の3つです。

①スタイルシートを読み込む

ページの表示に必要なスタイルシートを読み込みます。

(例)<link rel=”stylesheet” href=”/style.css”>

読み込むスタイルシートの数が増えると、ウェブサイトの表示速度も遅くなってしまうため、なるべく少数が望ましいです。

②canonical( カノニカル:URLの正規化処理)

SEOの観点から重要なのが、このURL正規化処理です。

(例)<link rel=”canonical” href=”https://stakeholdersuccess.com”>

必要な理由は「重複ページ」を1つのページとして認識してもらい、「インデックス」させたいページを指定するためです。

以下のURLはいずれも同じ内容が表示されますが、検索エンジンからは異なるページが存在すると認識されてしまいます(重複ページ)

http://example.com
http://www.example.com
http://example.com/index.html
http://www.example.com/index.html
https://example.com
https://www.example.com
https://example.com/index.html
https://www.example.com/index.html

上記は

  • wwwの有無
  • SSL化(https)
  • index.htmlの表示不要

といった要素により、全て同じ内容を表示するが表記が異なることとなってしまっています。

これに加えて、AMP(Accelerated Mobile Pages)の仕様に対応している場合、上記リンクに /amp/ を足した内容も同じページを表すこととなります。

WordPressでショートリンクを使っている場合はショートリンクも別ページと認識されてしまいます。

どの表記からアクセスされても、1つのページとしてインデックスしてもらわなければ、リンクポピュラリティ(リンクの人気度)の分散に繋がってしまいます。

結果として検索順位に悪影響をおよぼさないためにも、忘れずにURL正規化処理を行いましょう。

③アイコンを指定(favicon/apple-touch-icon)

<faviconの設置について>

アイコンは「.ico」形式で設置することが基本です。

理由としては、複数サイズの画像をまとめて1つのファイルにできるからです。

アイコンは、使われる場所によって「16×16」、「24×24」、「32×32」の3種類は必要です。

.icoの作成については、ブラウザ上で動作する「x-icon editor」という、ファビコン作成サイトがお勧めです。

ブラウザ上で動作するため、ダウンロードやインストール作業は不要で、手軽にアイコンを作成できます。

設置は、以下のように行います。
<link rel=”icon” href=”favicon.ico”>

<apple-touch-iconの設置について>

iPhone や iPad などのiOS端末で、ウェブサイトを「ホーム画面に追加」したときに表示されるアイコンを指定します。

こちらは高画質の画像でも表示できるため、pngなどの形式がオススメです。
設置は、以下のように行います。

<link rel=”apple-touch-icon” href=”/icon/icon.png”>

まとめ

以上、SEOに強いheadタグ内記載内容についてまとめました。

特にmetaタグについては、SNSの仕様変更やサーチエンジンの仕様変更により、記載内容がコロコロ変わります。

上記内容はあくまでも2018年時点で最適と思われる記載を心がけています。

皆さんも情報を常にアップデートするように心がけてください。

 

それではまた

Make the world better place

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 3〜コンテンツ・SNS連携編〜

  • クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」

  • CSSトレーニング①「レスポンシブで崩れにくいレイアウトの基本」

  • Speakによる感情コントロール

  • コンテンツを綺麗に見せるサイト作りのポイント

  • レスポンシブデザインについて