metaタグ・og画像のベストプラクティスを考える（metaタグ編）

metaタグのベストプラクティスを考える
こんにちは。アイレットデザイン事業部のマークアップエンジニアの黒木と申します。アイレットデザイン事業部では「INSIDE UI/UX」と題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信していく予定です。お付き合いのほどよろしくお願いいたします。
今回は今までの経験と調査をもとに「metaタグ・og画像のベストプラクティス（og画像編）」について書いていこうと思います。

metaタグのサンプル

まずは、私たちアイレットデザイン事業部のmetaタグのテンプレートをみていただきましょう。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="【先進性の高いITソリューションをワンストップでご提供】アイレット株式会社では、デザインからシステム設計・開発、クラウドを活用したインフラ設計・構築・運用監視にいたるまで、あらゆる側面からサービスをご提供し、お客様の課題解決をお手伝いします。">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="https://www.iret.co.jp/img/common/touch-icon.png">

  ----中略----

  <meta property="og:type" content="website">
  <meta property="og:site_name" content="クラウドの活用とシステム開発・Web開発ならアイレット株式会社（iret）">
  <meta property="og:title" content="クラウドの活用とシステム開発・Web開発ならアイレット株式会社（iret）">
  <meta property="og:description" content="【先進性の高いITソリューションをワンストップでご提供】アイレット株式会社では、デザインからシステム設計・開発、クラウドを活用したインフラ設計・構築・運用監視にいたるまで、あらゆる側面からサービスをご提供し、お客様の課題解決をお手伝いします。">
  <meta property="og:image" content="https://www.iret.co.jp/img/common/ogp.png">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:url" content="https://www.iret.co.jp/">
  <meta property="fb:app_id" content="1819043751758196">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="クラウドの活用とシステム開発・Web開発ならアイレット株式会社（iret）">
  <meta name="twitter:image" content="https://www.iret.co.jp/img/common/ogp.png">
  <meta name="twitter:url" content="https://www.iret.co.jp/">
  <meta name="twitter:description" content="https://www.iret.co.jp/">
  <link rel="canonical" href="https://www.iret.co.jp/">
  <title>クラウドの活用とシステム開発・Web開発ならアイレット株式会社（iret）</title>
</head>

上記のサンプルはアイレットコーポレートサイトのトップページにおいて実際に使われているmetaタグになります。
まずはサンプルに書かれているmetaタグを簡潔に説明します。

サンプルに含めたmetaタグの機能説明

Webサイト全体におけるmetaタグ

`meta charset="utf-8"`

ページで使用されている文字エンコーディングを宣言します。UTF-8が推奨されています。

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

name=”viewport”はビューポート（現在表示されている領域のこと）の初期サイズに関する助言です。
content内の値はwidthでビューポートの幅を定義し、initial-scaleでデバイスの幅とビューポートの寸法の比率を定義しています。

以前は、meta name="viewport" content="user-scalable=no"と書かれることもありましたが、user-scalable=noの役割はページの拡大縮小を防ぐというもので、現在はアクセシビリティの観点から記載しないことが推奨されています。記載しない場合、user-scalableの値はyesとなり拡大縮小が可能になります。

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

IE対応のためのメタタグです。
http-equivがX-UA-Compatibleである場合、contentはIE=edgeを指定することが多いです。
ただ、これは利用できる中で互換性のモードを設定できるというタグなのでIEの最新のものを使用してもらいたい時にIE=edgeを指定するといいです。その場合以外は設定しなくてもいいでしょう。
（参考URL：　https://www.creativevillage.ne.jp/2819）

`meta name="description"`

ページの簡潔な説明文になります。
画像の通り、検索結果のタイトルの下にdescriptionの内容が表示されています。
イメージ画像

`meta name="format-detection" content="telephone=no"`

スマートフォンなどにおいての電話番号の自動リンク化を無効にします。ただ、電話番号のリンク化を防ぐよりも、郵便番号などの電話番号ではないものの自動リンク化を防ぐ目的で使用されています。

`meta http-equiv="x-dns-prefetch-control" content="on"`

x-dns-prefetch-controlでDNSの先読みを有効/無効にします。
content以降にon/offを入力することで切り替えが可能になります。
今回このブログに載せているサンプルでは長くなってしまうので割愛させていただいてますが、アイレットコーポレートサイトにもWebフォントなどが外部から読み込まれています。そういったものの読み込みの優先度を高める際にに有用です。

SNSでページを共有した時用のmetaタグ

`meta property="og:type"`

ページのタイプを指定しています。

`meta property="og:site_name"`

（ページが大きなサイトの一部だった場合）すべてに共通するサイトの名前を指定しています。

`meta property="og:title"`、`meta name="twitter:title"`

og:titleはFacebookやLINEなどのSNS、twitter:titleはtwitterでページを共有した際に表示されるページのタイトルを書いています。（内容はtitleタグと同じものになります）

`meta property="og:description"`、`meta name="twitter:description"`

og:descriptionはFacebookやLINEなどのSNS、twitter:descriptionはtwitterなどでページを共有した際に表示されるページの簡潔な説明文を書いています。（内容はdescriptionと同じものになります）

`meta property="og:image"`、`meta name="twitter:image"`

og:imageはFacebookやLINEなどのSNS、twitter:imageはtwitterなどでページを共有した際にページURLと一緒に表示される画像のURLを書いています。

`meta property="og:locale"`

ページの内容がどの言語で記述されているかを示すものです。

`meta property="og:url"`

FacebookやLINEなどでページを共有した際のページのURLを書いています。

`meta property="fb:app_id"`

Facebookインサイト（Facebookからサイトへのトラフィックに関する分析を確認することができるツールです）を使用するためのアプリIDを書いています。

`meta name="twitter:card" content="summary"`

Twitterでページをシェアした時にTwitterカードが表示されるようにします。
カードタイプは4種類ありますが、ここではsummaryを使用しています。

下の画像は実際にLINEとTwitterでシェアするときの表示になります。
【LINE】
イメージ画像
【Twitter】

以上がアイレットデザイン事業部で使われているmetaタグになります。また、これらのタグにはSEO対策の役割を担っているものもあります。
そこで次の章では、title要素なども含めたhead内におけるSEO対策を説明します。

head内におけるSEO対策

まずSEOとは検索エンジン最適化の略称であり、検索エンジンが検出しやすいようにサイトを改善するプロセスです。
たくさんの人たちにサイトを見つけていただくためには欠かせない対策です。
色々な対策方法がありますが、今回はhead内に注目して説明します。

`title`要素

（当たり前のことですが）読みやすく、簡潔で、ページの主題が効果的に伝わるタイトルを書きます。
各ページに固有のタイトルをつけます。これによってサイト上の各ページの違いをGoogleが認識しやすくなります。

`description`の使用

ページの内容を正確に要約します。
文字数に上限も下限もありませんが、検索結果で説明が完全に表示される程度の長さが推奨されています。ただ、検索の方法やエンジンによって長さが変わるので注意してください。
title要素と同様に各ページに固有の説明をつけるようにします。

下の画像は実際にGoogleで「アイレット」と検索してみた結果になります。
【スマホ】
イメージ画像

【PC】
イメージ画像
スマホの場合、画面幅の都合上トップページのdescriptionのみの表示になります。
PCの場合はどのページもdescriptionの全表示はできていませんが、一番伝えたいことはdescriptionの一文目に入っています。
検索結果で説明が完全に表示される程度の長さが推奨されていると書きましたが、どのデバイスにも全て表示される長さは難しいので、このように一番伝えたいことだけでも表示できるようにした方がいいですね。

`URL`の設定

（headタグに限ったことではないですが）意味のあるURLを使用します。理解できない単語や暗号、意味のないアルファベットなどの羅列は使わないようにします。

og系もSEOに関係しているのかが気になったのでGoogleの開発者ドキュメントを確認してみました。
ogに関しての説明は書かれていましたが、SEOに関係しているということは明言されていませんでした。
ただ、og系を設定することでSNSからサイトへの流入の可能性が上がります。これによって結果としてサイトの閲覧者が増えることにつながります。
og系の設定については「metaタグ・og画像のベストプラクティス（og画像編）」で詳しく説明させていただきます。

P.S. アイレットでは一緒に働いてくれるエンジニア、デザイナーを募集しています。詳しくは採用情報をご覧ください。

metaタグ・og画像のベストプラクティスを考える（metaタグ編）

metaタグのサンプル