HTML基本構造の書き方
My current HTML boilerplateの内容を参考に、しばらく更新をしていなかった、仕事で使用しているテンプレートを要素や属性など記述する意味などを確認しながら更新しました。
HTMLテンプレート
<!DOCTYPE html>
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title>PAGE TITLE</title>
<!-- CSS -->
<link rel="stylesheet" href="/css/style.css">
<!-- OGP -->
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<!-- Twitter-->
<meta name="twitter:card" content="summary_large_image">
<!-- Canonical-->
<link rel="canonical" href="">
<!-- Favicon-->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
</body>
</html>-------------------------------
DOCTYPE 宣言
<!DOCTYPE html>ブラウザに文書がHTML5で作成されたものであることを伝えます。
HTMLの標準仕様に準拠したページを表示させるために必要です。
lang属性
<html lang="ja" prefix="og: https://ogp.me/ns#">ブラウザにhtml要素内で使われている言語は「日本語」ですと伝えます。
指定を忘れたり、言語の選択を誤ると、Google Chromeに搭載されているページ翻訳ツールが意図せず表示される場合があります。
以前、lang属性の指定をしていなかった、漢字が多めのページが中国語ページと認識され、翻訳ツールが表示されることがありました。
prefix属性
OGP（SNSでシェアされた際に表示される情報）の設定を行う場合、OGPを使いますよと宣言します。
今回まとめサイトなどに載っているサイトを片っ端からソースをチェックしたのですが、記述していないサイトが多かったです。公式ページには記述することが推奨されていたので、念のため書きます。
▼The Open Graph protocol
https://ogp.me/
文字コード
<meta charset="UTF-8">HTML5から文字コードはUTF-8が推奨されています。
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">レスポンシブサイトにする場合、記述が必要です。
この書き方がGoogleで推奨されています。
（参考）
▼Responsive web design basics｜Google Developers
https://web.dev/responsive-web-design-basics/
description
<meta name="description" content="">ページの説明文です。サイト検索一覧に表示されます。
PCの検索結果には127文字程、表示されています。
titleタグ
<title>PAGE TITLE</title>ページのタイトルです。ブラウザのタブ、検索エンジンの検索結果など、さまざまな場所で表示されます。
PCの検索結果には30文字程、表示されています。
（参考）
▼検索結果に効果的なタイトルとスニペットを作成する｜Google Developers
https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets?hl=ja&visit_id=637570233702491788-1066814561&rd=1
OGP設定
SNSでシェアされた際に表示される情報です。prefix属性とセットで設定します。
▼OGP
<meta property="og:title" content="">サイト名などのブランド情報を含まない、記事のタイトルを記述します。
<meta property="og:description" content="">コンテンツの簡単な説明を記述します。2～4文が一般的です。
<meta property="og:type" content="">「website」や「article」などのページのタイプを記述します。指定したタイプによっては、他のプロパティも必要になります。
FACEBOOKでは、このタグにより、ニュースフィードでコンテンツがどのように表示されるかが決まります。
▼その他のタイプ一覧
Object Types｜The Open Graph protocol
<meta property="og:url" content="">ページの正規URLを記述します。
<meta property="og:image" content=""> SNSでシェアされた時に表示される画像のURLを絶対パスで記述します。
1200 x 630ピクセル以上の画像が推奨されています。
（参考）
▼ウェブ管理者向けシェア機能ガイド｜Facebook for Developers
https://developers.facebook.com/docs/sharing/webmasters/?locale=ja_JP
▼Twitter専用
<meta name="twitter:card" content="summary_large_image">Twitterでシェアされたときにどのように表示されるかを定義します。
「summary」か「 summary_large_image」どちらかを記述します。
（参考）
▼シェアデバッカー | Facebook for Developers
https://developers.facebook.com/tools/debug/
▼Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator
▼カードの利用開始 | Twitter Developer
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
canonical設定
<link rel="canonical" href="">パラメータ付のURLがあるなど、重複しているページがある場合、検索エンジンに正しいURLを伝えます。
Favicon設定
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png">ブラウザのタブ、ブックマークなどに表示されます。
サイズ：32px×32px
<link rel="apple-touch-icon" href="/apple-touch-icon.png">スマホのホーム画面に表示されます。
サイズ：180px×180px
（参考）
▼検索結果に表示されるファビコンを定義する | Google Developers
https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?hl=ja&visit_id=637571206232598471-3839644010&rd=1
その他
<meta http-equiv="X-UA-Compatible" content="ie=edge">IE11のサポートが2022年6月15日に終了するアナウンスがありましたので、IE対策のこちらの記述は不要にしました。
-------------------------------
※ここの認識間違ってるよなどありましたらご指摘いただけると嬉しいです。
この記事が気に入ったらサポートをしてみませんか？