Headerタグ内に入れたい情報まとめ

2019.09.06

SNSに公開することが普通の昨今、headerタグ近辺に入れたい情報が変わった。

めんどくさくて、大体単純に作ってしまう自分だけど、公開したいものには使う。
流用しやすいように、ある程度、まとめておきたいと思った。

現状のタグ

【】に囲まれているものが変動するもの。
※日本語を前提としているので『ja』または『ja_JP』等は固定値としておく。
※当方、サイトは全て『UTF-8』でいいんじゃないか派の固定値です。

<html lang="ja" prefix="og: http://ogp.me/ns#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="UTF-8">
<title>【サイトやページ自体のタイトル】</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords"  content="【検索キーワード　※Google対応切れで不要説アリ】" />
<meta name="description" content="【検索結果に表示される情報】" />

<meta property="og:site_name" content="【サイトタイトル】" />
<meta property="og:title" content="【ページタイトル】" />
<meta property="og:type" content="【ページのタイプ】" />
<meta property="og:url" content="【ページのURL　※絶対パス】" />
<meta property="og:image" content="【画像のURL　※絶対パス】" />
<meta property="og:description" content="【ページの説明文】"/>
<meta property="og:locale" content="ja_JP" />

<meta name="twitter:card" content="【twitterカードのタイプ】" />
<meta name="twitter:site" content="【@ユーザID】" />
<meta name="twitter:creator" content="【@ユーザID】" />

<meta property="fb:admins" content="【facebook Profile Admins ID】" />

<link rel='dns-prefetch' href='//www.google.com' />
<link rel='dns-prefetch' href='//s.w.org' />

<meta name="robots" content="【検索指定】" />
<meta name="googlebot" content="【Google専用検索指定】" />

<link rel="apple-touch-icon" href="【Web Clip用のアイコンURL】">
<link rel="shortcut icon" href="./favicon.ico" />
  <!--　～　略　～　-->
</head>
<body>

説明も下記に追加しておく。

タグ説明

prefix設定

html5で使用出来るのは『RDFa Core 1.1』『RDFa Lite 1.1』
そのうち『RDFa』の方のガイドラインで、『OGP』(property="og:title"等)を使う場合には必要な宣言とされる。

<html lang="ja" prefix="og: http://ogp.me/ns#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

スマホ対応

レスポンシブ対応するなら必須な『viewport』設定。
他にも色々設定が出来るけども、個人的にはこれが一番使い勝手がいいと思った。

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

ここが解りやすいので、参照することをオススメする。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

キーワード設定、実は要らないかも

Google対応切れで不要説があるので、設定しなくてもいいカモ？と思われる。
自分は一応置いておいている。

<meta name="keywords"  content="【検索キーワード】" />

検索結果に表示される情報

結果に表示される『検索したユーザが読むもの』なので、ちゃんと文章でなくてはいけない。

<meta name="description" content="【検索結果に表示される情報】" />
  • 文字数は全角120文字程度。多すぎると読めない。
  • ページでターゲットにしている『キーワード』を出来れば前半に入れる。関係ない物は入れないように。
  • ユーザの検索次第では、この情報ではなく、Google自体がここだ！と判断したサイト内容が表示されることもある。
  • ページの内容を端的に紹介する文章がよく、どんな内容を、どんな人に向けたページなのかを書く。
    つまり全体を書いたあと考えると良い。
  • サイト共通ではなく、ページ毎の内容にした方が効果がある。
  • 「このページは『あなた』が『現在抱いている何か』を『解決できる』情報」というプラス欲求(今なら格安で安心が手に入る！)またはマイナス欲求(あなたはこんな不安で困ってない？)へのアプローチが大事。

SNSにカードを表示させる

共通部

<meta property="og:site_name" content="【サイトタイトル】" />
<meta property="og:title" content="【ページタイトル】" />
<meta property="og:type" content="【ページのタイプ】" />
<meta property="og:url" content="【ページのURL　※絶対パス】" />
<meta property="og:image" content="【画像のURL　※絶対パス】" />
<meta property="og:description" content="【ページの説明文】"/>
<meta property="og:locale" content="ja_JP" />

これはTwitterでもFacebookでも使う共通部。

『og:type』(ページのタイプ)は３種類。

website
ウェブサイトのTOPページ『のみ』
article
ウェブサイトやブログのTOPページ『以外』
Twitter
<meta name="twitter:card" content="【twitterカードのタイプ】" />
<meta name="twitter:site" content="【@ユーザID】" />
<meta name="twitter:creator" content="【@ユーザID】" />

『twitter:card』(カードのタイプ)は４種類。
指定した画像の比率が違う場合は、自動的にトリミングされる。

summary
標準(144×144～)
summary_large_image
大きな画像付き(600×314～)
app
アプリ専用
player
動画や音声など読込　※要審査

appの場合は、下記のタグが必要。

<meta name="twitter:app:country" content="JP" />
<meta name="twitter:app:name:iphone" content="【iPhone用タイトル】" />
<meta name="twitter:app:id:iphone" content="【iPhoneアプリID】" />
<meta name="twitter:app:name:ipad" content="【iPad用タイトル】" />
<meta name="twitter:app:id:ipad" content="【iPadアプリID】" />
<meta name="twitter:app:name:googleplay" content="【Android用タイトル】" />
<meta name="twitter:app:id:googleplay" content="【AndroidアプリID】" />

playerの場合は、下記のタグが必要。

<meta name="twitter:player" content="【動画のURL】" />
<meta name="twitter:player:width" content="【横サイズ】" />
<meta name="twitter:player:height" content="【縦サイズ】" />
Facebook

本当ならば、現在『fb:app_id』を使った方がいい。
アプリケーション登録しなくていいので、ついついadminsを使ってしまう。

<meta property="fb:admins" content="【facebook Profile Admins ID】" />

DNSプリフェッチで高速化

ホスト名を先に理解しておくから、アクセスが早くなる。
主にモバイル通信に真価が出る。

<link rel='dns-prefetch' href='//www.google.com' />
<link rel='dns-prefetch' href='//s.w.org' />

検索指定

robot.txtて指定していればいいし、設定間違えるとクロールしてくれなくなる。
しかしきちんと設定すると、なかなかのSEO効果が得られる、らしい。
諸刃だから、メイン以外にはあんまり設定していない。

<meta name="robots" content="【検索指定】" />
<meta name="googlebot" content="【Google専用検索指定】" />

Web Clip用アイコン設定

iPhone・iPadは、メモつけて保存出来る『Web Clip』という機能があるが、アイコンを設定してないとエラーになる…らしい。

単純に下記だけでもOK。相対パスで大丈夫。

<link rel="apple-touch-icon" href="【Web Clip用のアイコンURL】">

端末に合わせたサイズ設定するなら、下記のようにサイズ指定すればOK。

<link rel="apple-touch-icon" sizes="180x180" href="【Web Clip用のアイコンURL】">

調べれば端末毎に色々種類あるけど、180×180の画像を1つだけ設定しておけば問題ない。

補足

『http://gmpg.org/xfn/11』は要らない

テーマによっては下記のようなコードが書かれている。

<link rel="profile" href="http://gmpg.org/xfn/11" />

html5ではlinkにこういった情報は、むしろNGとのこと。
通常https(SSL)になったので、ブラウザからも警告でちゃうしね。。
参照：http://gmpg.org/xfn/11 は捨てよう – カラクリ.jp

コメント

タイトルとURLをコピーしました