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まとめ(スプレッドシート)

関連記事

Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...