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ページ『以外』
<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="【縦サイズ】" />
本当ならば、現在『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
コメント