metaタグでできること

Blog Single

みなさん、こんにちは。
最近暑くて外に出るのも億劫な渋谷です。

今回は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://www.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

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度調べてみてはいかがでしょうか。

Posted by ShibuyaYuuki
今はPHPで開発を行なっているエンジニア。 就職してから体重が15キロ増えました!!

Other Posts: