「head」タグ内のコードのテンプレ
参考サイト
記事内のコードを練習で記述したいと思います。
※コードが長いので完成したらコードに色を付けます。
html
<head>
<meta charset="utf-8">
<meta name="robots" content="index.follow" />
<title>ページタイトル</title>
<meta name="description" content="説明文" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="shortcut icon" herf=”ファイル名.icon">
<link rel="apple-touch-icon-precomposed" href="画像のパス/apple-touch-icon-precomposed.png">
外部ファイルの読み込み
<link rel="ファイルの種類" href="ファイルの場所">
<script src="ファイルの場所"></script>
スマホページのURLが異なる場合（pc側）
<link rel="alternate" media="only screen and (max-width: 640px)" href="スマホページのURL" />
<link rel="canonical" href="PCページのURL" />
必要であれば
<link rel="canonical" href="評価を統一したいページのURL" />
分割ページの場合
<link rel="prev" href="前のページのURL">
<link rel="next" href="次のページのURL">
フェイスブックのOGPタグ
<meta property="og:site_name" content="サイト名" />
<meta property="og:url" content="ページURL” />
<meta property="og:type" content="ページタイプ" />
<meta property="og:title" content="ページ説明文" />
<meta property="og:description" content="サムネイル画像URL" />
<meta property="fd:app_id" content="appTDを入力" />
<meta property="og:locale" content="ja_JP" />
TwitterのOGPタグ
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
<meta name="twitter:description" content="ページ説明文" />
<meta name="twitter:image:src" content="サムネイル画像URL" />
</head>
