Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかたはスプレッドシート版をオススメします。 よく使うmetaまとめ（スプレッドシート） alternate スマホサイトがある場合にURLを指定して、どこのページにPC版のサイトがあるかをGoogleに示します。 スマホサイトとPCサイトがあれば設定した方が良いものです。 [html] <link rel="alternate" media="handheld" href="このページのモバイル版URL"> <link rel="alternate" media="only screen and (max-width: スマホサイトに移動させる端末の横幅の最大値)" href="このページのスマホ版URL"> [/html] canonical SEOの分散を防ぎます。 「このURLは正規のURLの代替物もしくは一部でしかなくて、正規のURLはこっちです」と伝えるタグです。 [html] <link rel="canonical" href="www.example.com/page-1"> [/html] prev,next 複数ページにまたがるコンテンツや記事の関連性をGoogleに示します。 Google はコンテンツのインデックス登録がより正確にできるようになります。 [html] <link rel="prev" href="前のページのURL"> <link rel="next" href="次のページのURL"> [/html] noindex 記載したページを、クロール・インデックス・アーカイブ化させたくない時に使います。 管理画面や完了画面など特定と人にしか見られたくない場合に使います。 [html] <meta name="robots" content="noindex,nofollow,noarchive"> [/html] OGP facebookなどのSNSでシェアされたときのサムネイルや要約文にされるものです。 [html] <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="ページの説明"> [/html] TwitterCard Twitterでシェアされた時に表示されるものです。 タイトルは70文字を超える部分は省略されます。 説明文は、200文字を超える部分は省略されます。 アイコン画像は、120px四方を超える場合はリサイズのうえ正方形に切り抜かれます。60px四方未満の場合は表示されません。 OGPが設定されている場合、twitter:url,twitter:title,twitter:descriptionは不要です。 [html] <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=""ページの説明"" /> [/html] IE=edge IEのレンダリング方式を標準表示方法にするIEの対策。 このタグを入れるとIEは強制的に標準モードになってくれます ※Webページを正しく表示できない場合に標準モードにするだけで、解消することも多いです。 注意点として、上記のタグはcssやjsファイルよりも前に記述するようにしましょう。 [html] <meta http-equiv="X-UA-Compatible" content="IE=edge"> [/html] 電話番号リンク 電話番号のリンクを無効化します。 iPhoneはこのへんが標準になっており、意図しない数字の羅列が合った場合にリンクになるのを防ぎます。 [html] <meta name="format-detection" content="telephone=no"> [/html] viewport アクセスしたときの表示領域を指定できます。 何も指定しないと、Webサイトにアクセスしたときに変に拡大されて表示されてユーザーの気分を害する場合があります。 [html] スマホサイトがなく、レスポンシブなサイトでない場合 <meta name="viewport" content="width=ここに表示領域にしたい数字を記載"> スマホサイトまたはレスポンシブなサイトの場合 <meta name="viewport" content="width=device-width, initial-scale=1"> [/html] favicon faviconを指定します。 favicon（ファビコン）とはブラウザのタブとかの左端にあるアイコン画像のことです。 表示される画像サイズは16×16pxですが32×32pxで作る風習があります。 Web Clip Web Clipを指定します。 Web Clip（ウェブクリップ）とはiPhone、AndroidなどのスマートフォンがWebサイトへのショートカットを、ホーム画面上に追加した場合にできるアイコン画像を指定します。 通常はそのサイトのキャプチャ（またはファビコン等）がアイコンとして使用されますが、オリジナルのアイコン画像を用意しておくことで、その画像がアイコンとして使用されるようになります。 アイコンの表示サイズは、端末により異なります。 少し大きめのサイズで作成しておくと、自動的に縮小されて表示されるようになります。 私は256ｘ256で作ることが多いです。 [html] PC用 <link rel="shortcut icon" href="ファビコンのURL"> スマホ用 <link rel="apple-touch-icon" href="icon.png"> [/html] まとめ いかがでしたか、いつもコピペで使うもの、知らなかったので今度使って見たいと新しい発見があれば幸いです。 なお、ブログでまとめると見辛い部分もあるので、スプレッドシートにまとめています。 どなたでもアクセス出来ますので、ブックマークに登録してもらえれば、都度サイトに来なくても最新の状況のものを確認できますのでオススメです。 よく使うmetaまとめ（スプレッドシート）
