metaタグでできること
みなさん、こんにちは。
最近暑くて外に出るのも億劫な渋谷です。
今回はmetaタグについてざっくりとお話をしようと思います。
metaタグとは
metaタグはhtmlファイルのheadタグ内に記載する、webページの設定や情報等を検索エンジンのクローラーに伝えるタグです。
metaタグでできること
charset
文書の文字コードを指定します。これは誰もが1度は見たことがあるかと思います。
例）
<meta charset="utf-8" />
description
文書の概要を指定できます。検索エンジンやSNSでシェアした際に表示される文章です。120文字程度が表示され、それ以上は省略されてしまう為、クリック率を上げるために簡潔で分かりやすい文章にする必要があります。
例）
<meta name="description" content="FOX HOUND Techへようこそ。当サイトは「話がわかるエンジニア」集団であるFOX HOUND株式会社のメンバーが、IT業界に関わる技術ネタや時事ネタ等を配信するテック系情報サイトです。" />
keyword
文書内のキーワードをカンマ区切りで記載できます。
しかしGoodleの検索エンジンではサポートされていない(Googleがサポートしていないということは、当然Googleの検索技術を利用しているYahooもサポートしていません)ので、指定する意味はあまりありません。
例）
<meta name="keywords" content="WEB,技術,IT,Tech" />
viewport
スマートフォンページの表示方法を制限することができます。
表示に関わるものなので、今後はCSSの標準仕様となる予定です。
●width、height
画面の横幅、高さを指定できます。
●initial-scale
Webページが最初に読み込まれたときの拡大率・縮小率を指定します(デフォルトではWebページを端末画面に合わせます)。はminimum-scale~maximum-scaleの範囲のみ指定できます。
●user-scalable
Webページの閲覧者に画面の拡大・縮小を許可するかどうかの設定をすることができます(デフォルトはyes)。
●minimum-scale
拡大率の最小値を0~10の間で設定することができます(デフォルトは0.25)。
●maximum-scale
拡大率の最大値を0~10の間で設定することができます(デフォルトは1.6)。
例）
<meta name="viewport" content="width=device-width, initial-scale=1" />
robots
検索エンジンのクローラーのアクセスやWebページ内にあるリンク先を探索されないようにできます。
●noindex
指定したページのクローラーのによるアクセスを禁止します。
●nofollow
表示したWebページ内にあるリンク先の探索を禁止します。
例）
<meta name="robots" content="noindex,nofollow" />
Open Graph protocol
OGPはfacebookやLINE、TwitterなどのSNSで利用される、ウェブページの情報を連携させることができます。
●og:title
ページのタイトルを指定できます。
●og:type
ページの種類を指定できます。
●og:url
SNSでシェアするWebページのURLを指定できます。
●og:image
SNSでシェアしたときに表示される画像を指定できます。
●og:image:width、og:image:height
表示する画像の横幅、縦幅を指定できます。
●og:site_name
Webページの名前を指定できます。
●og:description
Webページの概要を指定することができます。
例）
<meta property="og:title" content="FOX HOUND Tech" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://blog.fox-hound.tech/" />
<meta property="og:image" content="画像のURL" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="FOX HOUND Tech" />
<meta property="og:description" content="FOX HOUND Techへようこそ。当サイトは「話がわかるエンジニア」集団であるFOX HOUND株式会社のメンバーが、IT業界に関わる技術ネタや時事ネタ等を配信するテック系情報サイトです。" />
上記の設定をすることで、本サイトをSlackに投稿すると以下のように表示されます
Twitterでシェアしたとき専用のタグです。
ほとんどがOGPで代用可能ですが、一部代用できないものがあるので紹介します。
●twitter:card
4種類のカードから指定できます。
■summary
普通サイズの画像を表示します。
■summary_large_image
大きなサイズの画像を表示します。
■App Card
アプリを配布するときに使用します。
■Player Card
動画サイトを表示するときに使用します。
●twitter:site
Webページの所有者のTwitterアカウントを指定できます。
例）
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="FOX HOUND Tech" />
所有権の確認
Search Console で、Webサイトを追加した時に行う所有権の確認の方法としてmetaタグによる所有権の確認方法があります。
SEOに大きく関わってくる部分なので、しっかりと設定することが大切です。
例）
<meta name="google-site-verification" content="xxxxxxxxxxxxxxxxxxxx" />
まとめ
metaタグはおそらくWebエンジニアなら誰もが1度は目にしたことがあるかと思いますが、どのような働きをしているのかはスルーされがちかと思います。興味のある方は1度調べてみてはいかがでしょうか。
