目次（クリックでジャンプ）
HTMLのHeadタグのテンプレート
Webサイトのコーディングを行う際に使える、必要最低限のHeadタグのテンプレートです。
最低限のテンプレート
<!DOCTYPE html>
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="format-detection" content="telephone=no">
<!--タイトル・ディスクリプション-->
<title>【必須】タイトル（30字前後推奨）</title>
<meta name="description" content="【必須】ここに説明文（80字前後推奨）">
<!--OGP設定-->
<meta property="og:image" content="./assets/img/ogp.png"><!--OGP画像-->
<meta property="og:type" content="website">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!--その他設定-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
</head>
<body>
</body>
</html>必要に応じて追加したい項目
robot
<meta name="robots" content="noindex,nofollow">検索結果に表示させたくないページ（お問い合わせ完了画面や重要性の低い投稿アーカイブなど）はこちらのタグを設置すると表示されないようにできます。
URL正規化
<link rel="canonical" href="正規化するURL">類似したページの評価を1つにまとめるよう指示します。
複数ページにわたるコンテンツや、パソコン版とスマホ版で2種のURLがあるページなどはこのタグで正規化することで、正しくクローリングされるようになります。
電話番号、メールアドレスの自動リンク化の停止
<meta name="format-detection" content="email=no,telephone=no,address=no">ブラウザの機能によっては、電話番号やメールアドレスなどを自動的にリンク変換することがあります。
それらを停止する為にはこのタグを挿入しましょう。
OGPタグ
<meta property="og:site_name" content="サイト名（例：COPPY）">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="ページの種類（website,article,video.movie,book,profile,music.song,eventなど）">
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="記事の抜粋">
<meta property="og:image" content="画像のURL（例：./assets/img/ogp.jpg）">
<meta name="twitter:card" content="カードの種類（summary,summary_large_image,app,player）">
<meta name="twitter:site" content="@Twitterユーザー名（例：@kizineko_w）">
<meta property="fb:app_id" content="appIDを入力">SNS共有された際にタイトルやディスクリプションを変更したい場合や、Twitter上の表示方法などをこのOGPタグで設定することが出来ます。
アイコン
<link rel="apple-touch-icon-precomposed" href="画像のURL"><!--スマホ用ホームアイコン-->
<meta name="msapplication-TileImage" content="画像のURL"><!--Windows用アイコン-->
<meta name="msapplication-TileColor" content="カラーコード（例：#000000）"><!--Windows用カラー-->通常のブラウザアイコンの他、スマホ用ホームアイコンやWindows用アイコン等を設定しておくことも出来ます。
RSS
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードページのURL">HTMLのHeadタグのテンプレートまとめ
迷った際はこちらのテンプレートをご活用ください。
