コーディング開始時にとりあえずこれ設置して、素材が揃い次第埋めていく、こんな流れでやっていこうってやつです。自分も制作で使っていきますので随時更新していきます。
実際のコード
<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<meta name="description" content="ページの説明文" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="ファビコンURL">
<link rel="apple-touch-icon" sizes="180×180" href="アップルタッチアイコンURL">
<meta property="og:url" content="ページURL" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="ページタイプ" />
<meta property="og:description" content="記事の抜粋文" />
<meta property="og:image" content="画像URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:local" content="ja_JP" />
<!-- twitter card -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザ名" />
<meta name="twitter:description" content="抜粋文" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:image" content="画像URL" />
</head>
<body>
<!-- ページ中身 -->
</body>
</html>コピペして、作成するサイトに合わせていってください。
いれているコードの解説
文字のエンコード
<meta charset="utf-8">文字コードを指定するためのもの。
日本語サイトなら考えるより先にいれよう。
タイトルタグ
<title>ページタイトル</title>指定したタイトルを検索結果やタブに表示させる。
呼吸するようにいれておこう。
メタディスクリプション
<meta name="description" content="ページの説明文" />そのページがどんな内容なのかを記載する。検索結果の下の説明文に反映される。
Internet Explorer用の設定
<meta http-equiv="X-UA-Compatible" content="IE=edge" />コーダーの敵IE。（個人的主観）
過去バージョンで表示させる「互換モード」を常に「標準モード」で表示させるようにする。そもそも対応していないCSSがたくさんあるので、うん。（最近はIEでの表示確認を求められなくなってきた。）
ファビコン（サイトアイコン）
<link rel="icon" href="ファビコンURL">
<link rel="apple-touch-icon" sizes="180×180" href="アップルタッチアイコンURL">ブラウザのタブやブックマーク保存したときに表示されるアイコン。
OGPタグ
<meta property="og:url" content="ページURL" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="ページタイプ" />
<meta property="og:description" content="記事の抜粋文" />
<meta property="og:image" content="画像URL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:local" content="ja_JP" />
<!-- twitter card -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザ名" />
<meta name="twitter:description" content="抜粋文" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:image" content="画像URL" />facebookやTwitter（X）などのSNSシェアされたとき用のコード。
※画像は相対パスだと表示されないことがあるので、絶対パスでいれておく。
まとめ
必要なタグがあれば更新していきます。headタグ部分くらいコピペして楽していきましょう！
