<meta> ?

 

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">

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編

<title>サイトのタイトル</title>
<meta name="keywords" content="">
<meta name="description" content="ページ詳細. 120字以内に収める。最初の40字は大事。ページごとにそのページの詳細を記載する。">
<meta name="author" content="製作者の名前or会社名">
<link rel="canonical" href="正規のURLを検索エンジンにしめす。">

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編

// 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貼る">

FacebookやTwitterなどSNSでシェアされた時に、

• タイトル
• URL
• 概要
• アイキャッチ画像

を意図した通りに正しく表示される仕組みのことです。
FacebookやTwitterの仕様に準じて、画像や文言を設定しましょう。

favicon編

<link rel="icon" type="image/x-icon" href="デフォルト">

faviconとは、ウェブサイトのシンボルマークイメージとして、ウェブページに配置するアイコンの俗称のことです。

• 16px × 16px：IEのタブ
• 32px × 32px：Chrome、Firefox、Safariなどのタブ
• 48px × 48px：Windowsのサイトアイコン

それぞれのサイズの画像を用意して、favicon.icoメーカーで1つのicoファイルにまとめるといいです。
https://ao-system.net/favicon/

WebClip編

<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">

スマートフォンでホーム画面にリンクを追加した時に、表示されるアイコンのことです。
大きめのサイズで作っておけば、それが縮小されて使われるので、144×144以上の正方形で作っておけば問題ないです。