もうmeta要素を迷わない！最低限入れるべきmeta要素のまとめ

32
いいね
0
コメント

2017年05月15日に更新

こんにちは、@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="キーワード, 5~6個がお薦め。けど10個近く書いてるサイトも多い">
<meta name="description" content="サイト詳細. 120字以内に収める。最初の40字は大事。">
<meta name="author" content="製作者の名前or会社名">

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

また、ユーザーにクリックから電話をかけさせたいときは、以下のように記述しましょう。

HTML

<span data-action="call" data-tel="0312345678">電話はこちらへ</span>

JavaScript

$(function() {
    if (!isPhone())
        return;

    $('span[data-action=call]').each(function() {
        var $ele = $(this);
        $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
    });
});

function isPhone() {
    return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}

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

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

```
<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="キーワード, 5~6個がお薦め。けど10個近く書いてるサイトも多い">
<meta name="description" content="サイト詳細. 120字以内に収める。最初の40字は大事。">
<meta name="author" content="製作者の名前or会社名">

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

## 対策編
### 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では、ページ内の電話番号を自動でリンクに変換し、
タップすることを電話でかけることができる機能が用意されています。

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

また、ユーザーにクリックから電話をかけさせたいときは、以下のように記述しましょう。

#### HTML

```
<span data-action="call" data-tel="0312345678">電話はこちらへ</span>
```

#### JavaScript

```
$(function() {
    if (!isPhone())
        return;

$('span[data-action=call]').each(function() {
        var $ele = $(this);
        $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
    });
});

function isPhone() {
    return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}
```

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

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

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