Cntlog > スキルアップ・ノウハウ > コーディング > 【2017年】よく使うmetaタグとかをまとめてみた

【2017年】よく使うmetaタグとかをまとめてみた

Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。
これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。

使いやすいようにスプレッドシートにもまとめています。
記事を読むのが煩わしいかたはスプレッドシート版をオススメします。
よく使うmetaまとめ(スプレッドシート)

alternate

スマホサイトがある場合にURLを指定して、どこのページにPC版のサイトがあるかをGoogleに示します。
スマホサイトとPCサイトがあれば設定した方が良いものです。

<link rel="alternate" media="handheld" href="このページのモバイル版URL">
<link rel="alternate" media="only screen and (max-width: スマホサイトに移動させる端末の横幅の最大値)" href="このページのスマホ版URL">

canonical

SEOの分散を防ぎます。
「このURLは正規のURLの代替物もしくは一部でしかなくて、正規のURLはこっちです」と伝えるタグです。

<link rel="canonical" href="www.example.com/page-1">

prev,next

複数ページにまたがるコンテンツや記事の関連性をGoogleに示します。
Google はコンテンツのインデックス登録がより正確にできるようになります。

<link rel="prev" href="前のページのURL">
<link rel="next" href="次のページのURL">

noindex

記載したページを、クロール・インデックス・アーカイブ化させたくない時に使います。
管理画面や完了画面など特定と人にしか見られたくない場合に使います。

<meta name="robots" content="noindex,nofollow,noarchive">

OGP

facebookなどのSNSでシェアされたときのサムネイルや要約文にされるものです。

<meta property="og:title" content="ページタイトル">
<meta property="og:url" content="このページのURL(パラメータ除外)">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページの説明">

TwitterCard

Twitterでシェアされた時に表示されるものです。
タイトルは70文字を超える部分は省略されます。
説明文は、200文字を超える部分は省略されます。
アイコン画像は、120px四方を超える場合はリサイズのうえ正方形に切り抜かれます。60px四方未満の場合は表示されません。
OGPが設定されている場合、twitter:url,twitter:title,twitter:descriptionは不要です。

<meta name=""twitter:card"" content=""summary"">
<meta name=""twitter:site"" content=""@アカウントが入ります"">
<meta name=""twitter:url"" content=""このページのURL(パラメータ除外)"">
<meta name=""twitter:title"" content=""ページタイトル"" />
<meta name=""twitter:description"" content=""ページの説明"" />

IE=edge

IEのレンダリング方式を標準表示方法にするIEの対策。
このタグを入れるとIEは強制的に標準モードになってくれます
※Webページを正しく表示できない場合に標準モードにするだけで、解消することも多いです。
注意点として、上記のタグはcssやjsファイルよりも前に記述するようにしましょう。

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

電話番号リンク

電話番号のリンクを無効化します。
iPhoneはこのへんが標準になっており、意図しない数字の羅列が合った場合にリンクになるのを防ぎます。

<meta name="format-detection" content="telephone=no">

viewport

アクセスしたときの表示領域を指定できます。
何も指定しないと、Webサイトにアクセスしたときに変に拡大されて表示されてユーザーの気分を害する場合があります。

スマホサイトがなく、レスポンシブなサイトでない場合
<meta name="viewport" content="width=ここに表示領域にしたい数字を記載">
スマホサイトまたはレスポンシブなサイトの場合
<meta name="viewport" content="width=device-width, initial-scale=1">

favicon

faviconを指定します。
favicon(ファビコン)とはブラウザのタブとかの左端にあるアイコン画像のことです。
表示される画像サイズは16×16pxですが32×32pxで作る風習があります。

Web Clip

Web Clipを指定します。
Web Clip(ウェブクリップ)とはiPhone、AndroidなどのスマートフォンがWebサイトへのショートカットを、ホーム画面上に追加した場合にできるアイコン画像を指定します。
通常はそのサイトのキャプチャ(またはファビコン等)がアイコンとして使用されますが、オリジナルのアイコン画像を用意しておくことで、その画像がアイコンとして使用されるようになります。

アイコンの表示サイズは、端末により異なります。
少し大きめのサイズで作成しておくと、自動的に縮小されて表示されるようになります。
私は256x256で作ることが多いです。

PC用
<link rel="shortcut icon" href="ファビコンのURL">
スマホ用
<link rel="apple-touch-icon" href="icon.png">

まとめ

いかがでしたか、いつもコピペで使うもの、知らなかったので今度使って見たいと新しい発見があれば幸いです。

なお、ブログでまとめると見辛い部分もあるので、スプレッドシートにまとめています。
どなたでもアクセス出来ますので、ブックマークに登録してもらえれば、都度サイトに来なくても最新の状況のものを確認できますのでオススメです。

よく使うmetaまとめ(スプレッドシート)

関連記事

Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...