こんにちは、@pompom0c0 です。
headに記述する内容、いつも前回のをそのまま使用するのですが、
なんで記述するのか一つ一つ理解していなかったので、まとめました。
<head>
// 対策編
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
// SEO編
<title>サイトのタイトル</title>
<meta name="keywords" content="">
<meta name="description" content="ページ詳細. 120字以内に収める。最初の40字は大事。ページごとにそのページの詳細を記載する。">
<meta name="author" content="製作者の名前or会社名">
<link rel="canonical" href="正規のURLを検索エンジンにしめす。">
// OGP編
<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ogpのタイトル. <title>と文章も文字数も同じにする。">
<meta property="og:description" content="ogpの本文。<meta name='description'>と同じにする。">
<meta property="og:type" content="website">
<meta property="og:url" content="サイトのURL貼る">
<meta property="og:image" content="ogpのURL貼る">
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="サイトのURL貼る">
<meta name="twitter:image" content="ogpのURL貼る">
// favicon編
<link rel="icon" type="image/x-icon" href="デフォルト">
// Web Clip編
<link rel="apple-touch-icon" href="Web Clip用のアイコンURL貼る">
<link rel="apple-touch-icon" sizes="57x57" href="iPhone 3G">
<link rel="apple-touch-icon" sizes="72x72" href="非Retina版のiPad 2、iPad miniの用、iOS 6以前">
<link rel="apple-touch-icon" sizes="76x76" href="非Retina版のiPad 2、iPad miniの用、iOS 7以降">
<link rel="apple-touch-icon" sizes="114x114" href="Retina版のiPhone、iPod touch用、iOS 6以前">
<link rel="apple-touch-icon" sizes="120x120" href="Retina版のiPhone、iPod touch用、iOS 7以降">
<link rel="apple-touch-icon" sizes="144x144" href="Retina版のiPad、iPad mini用、iOS 6以前">
<link rel="apple-touch-icon" sizes="152x152" href="Retina版のiPad、iPad mini用、iOS 7以降">
<link rel="apple-touch-icon" sizes="180x180" href="iPhone 6 plus">
<link rel="stylesheet" href="css/style.css">
</head>
対策編
1. IE対策
IE環境でWebページを表示できないことがあります。
IE環境でも常にWebページを表示できるようにするため、
常に標準モード設定に指定するmetaタグを入れます。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
このmetaタグはcssやjsファイルが記述されている箇所の前に入れます。
2. レスポンシブ対応
viewportを指定することで、仮想的なウインドウが作成され、デバイスの画面幅に合わせて表示することができる。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 電話番号の自動リンク機能を無効化する
safariでは、ページ内の電話番号を自動でリンクに変換し、
タップすることを電話でかけることができる機能が用意されています。
この機能だと電話番号に紛らわしいもの(注文番号やIPアドレス)も電話番号だと認識してしまう恐れがあります。
ユーザーの混乱を避けるためにも無効化しておきましょう。
<meta name="format-detection" content="telephone=no">
SEO編
1. title
文字数は32文字以内に収めましょう。文字数が多いと「...」に省略されます。
TOPページ
Googleで検索した時に1番最初に表示されるのがTOPページに書かれたtitleテキストです。
サービス名はもちろんですが、サービスの簡単な説明を書くといいです。
<title>Qiita - プログラマの技術情報共有サービス</title>
<meta content="Qiita - XXX" name="title">
詳細ページ
こちらには、サービス名と、詳細ページのタイトルになるものを書きます。
<title>Qiita | ブログ記事タイトル</title>
<meta content="Qiita | XXX" name="title">
2. keywords
[追記]
Googleは公式に、keywordsを検索順位を決める要因としては、利用していない」と言及しています。
なので何も書かなくて大丈夫です。
詳しく知りたい方はこちらの記事を読んで見てください↓
meta keywordsの書き方とSEOで不要な理由
http://seolaboratory.jp/internal/2016051334998.php
OGP編
FacebookやTwitterなどSNSでシェアされた時に、
- タイトル
- URL
- 概要
- アイキャッチ画像
を意図した通りに正しく表示される仕組みのことです。
FacebookやTwitterの仕様に準じて、画像や文言を設定しましょう。
favicon編
faviconとは、ウェブサイトのシンボルマークイメージとして、ウェブページに配置するアイコンの俗称のことです。
- 16px × 16px：IEのタブ
- 32px × 32px：Chrome、Firefox、Safariなどのタブ
- 48px × 48px：Windowsのサイトアイコン
それぞれのサイズの画像を用意して、favicon.icoメーカーで1つのicoファイルにまとめるといいです。
https://ao-system.net/favicon/
WebClip編
スマートフォンでホーム画面にリンクを追加した時に、表示されるアイコンのことです。
大きめのサイズで作っておけば、それが縮小されて使われるので、144×144以上の正方形で作っておけば問題ないです。
まとめ
調べればすぐ出てくる内容ばかりですが、誰かのお役に立てると嬉しいです:)
参考サイト
IE対策：互換表示させない。
http://qiita.com/rico/items/09c896290e218ed2b7c3
もう逃げない。HTMLのviewportをちゃんと理解する
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！
http://qiita.com/taiyop/items/050c6749fb693dae8f82
レスポンシブデザインで気をつけたい、電話番号の扱い
http://qiita.com/emegane/items/bacdb2eaf9e1e7104720
スマホサイト対策！ウェブクリップアイコンの設定を忘れずに
https://liginc.co.jp/designer/archives/7300