headタグの記述内容
- 文書のメタ情報を記述するタグ
- headタグに記述されている情報は、通常画面上で確認することができません
<!DOCTYPE html> <html lang="ja"> <head> <!-- ここに記述する --> </head> <body> </body> </html>
headタグの中に記述できる情報
| 文字コード | HTMLファイルがどの文字コードで保存されているのか指定 文字化け防止、UTF-8が推奨 |
|---|---|
| viewport | Webサイトのページが表示される画面の表示領域 |
| title | Webページのタイトル |
| description | Webページの説明 |
| format-detection | 電話番号の自動リンク機能 |
| favicon（ファビコン） | ブラウザのタブに表示されるアイコン |
| OGP設定 | SNSなどでシェアされたときに表示される情報 |
metaタグとは
- metaタグ（メタタグ）とは、Webページの情報を記載するためのタグで、検索エンジンやブラウザなどに対してWebページの情報を伝えます
charset（文字コード）
<meta charset="UTF-8">
viewport
- Webサイトのページが表示される画面の表示領域です
- 表示されるデバイスごとの幅を取得して、その中にページを表示するようにします
<meta name="viewport" content="width=device-width">
description
- Webページの説明、概要を設定することができます
- 検索結果のタイトルの下に表示されます（絶対ではない）
<meta name="description" content="ページの詳細を短い文章で説明します。">
format-detection
- 電話番号の自動リンク機能を制御することができる設定です
- スマートフォン向けの設定で、スマートフォンでページを表示中に、Webページ内に電話番号のような記述があると自動的にリンクします
- ユーザーが誤ってそのまま架電してしまわないようにするために、この機能を無効化しておきます
<meta name="format-detection" content="telephone=no">
favicon
<link rel="icon" href="favicon.png" type="image/png"> <link rel="icon" href="favicon.svg" type="image/svg+xml">
apple-touch-icon
- Webページのショートカットを作成したとき、Webページをスマートフォンのホーム画面に追加したときに表示されるアイコンを設定することができます
<link rel="apple-touch-icon" href="webclip.png">
OGP関連
- OGPとは、Open Graph Protocolの略で、WebページをSNSなどでシェアされたときに表示される情報です
- og:site_name：Webページのサイト名を設定します
<meta property="og:site_name" content="サイト名">
- og:url：WebページのURLを絶対パスで設定します
<meta property="og:url" content="URL">
- og:type：Webページの種類を設定します
<meta property="og:type" content="website or article">
- og:title：Webページのタイトルを設定します
<meta property="og:title" content="ページのタイトル">
- og:description：Webページの説明、概要を設定します
<meta property="og:description" content="ページの説明">
- og:image：シェアされた時に表示したい画像（OGP画像）を絶対パスで設定します
- OGP画像の推奨サイズは1200px × 630pxです
<meta property="og:image" content="URL">
- og:locale：Webページの言語を設定します
<meta property="og:locale" content="ja_JP">
- fb:app_id：Facebook専用の設定で、これを設定するとFacebook版Google Analyticsのようなサービスを使用することができるようになります
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="summary_large_image or summary">
<meta name="twitter:site" content="@xxx_xxx">
<meta name="twitter:description" content="ページの説明">
<meta name="twitter:image:src" content="URL">
記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ページタイトル</title> <meta name="description" content="ページの説明"> <meta name="format-detection" content="telephone=no"> <link rel="icon" href="favicon.png" type="image/png"> <link rel="icon" href="favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="webclip.png"> <meta property="og:site_name" content="ページタイトル"> <meta property="og:url" content="URL"> <meta property="og:type" content="website or article"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明"> <meta property="og:image" content="URL"> <meta property="og:locale" content="ja_JP"> <meta property="fb:app_id" content="AppID"> <meta name="twitter:card" content="summary_large_image or summary"> <meta name="twitter:site" content="@twitter_id" /> <meta name="twitter:description" content="ページの説明"> <meta name="twitter:image:src" content="URL"> </head> <body> </body> </html>
