on:2023年1月25日sponsorsHTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。elements下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。以前の版からいろいろと変更されています。下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。上記の2つのmetaタグは、<head>内で最初に記述する必要があります。この2つのmetaタグは、ドキュメントの適切なレンダリングを一貫して保証します。他のhead内の要素は、この2つのmetaタグの後に記述します。initial-scale=1"><!--上記の2つのmetaタグは、<head>内で最初に記述する必要があります。この2つのmetaタグは、ドキュメントの適切なレンダリングを一貫して保証します。他のhead内の要素は、この2つのmetaタグの後に記述します。Webページの文字セットを定義。スマホに最適化されたビューポートを設定。ページをロードしたときの表示倍率、1はズームなしを意味します。これらの要素はWebテクノロジー(ブラウザ・検索エンジン、ロボットなど)によってドキュメントがどのように認識され、どのようにレンダリングされるかについての情報を提供します。utf-8のすべての文字(絵文字も含む)が正しくレンダリングされます。</noscript>12345678910111213141516171819202122232425262728<!--このドキュメントの文字セットを設定utf-8のすべての文字(絵文字も含む)が正しくレンダリングされます。下記の2つのmetaタグは、<head>内で最初に記述する必要があります。この2つのmetaタグは、ドキュメントの適切なレンダリングを一貫して保証します。他のhead内の要素は、この2つのmetaタグの後に記述します。リソースがどこからロードされるかを制御できます。このタグはその後に宣言されたリソースのみに適用されるため、<head>内の可能な限り上に記述します。contentの値は、検索エンジンの結果として使用される場合があります。content="$paymentpointer.example">1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<!--下記の2つのmetaタグは、<head>内で最初に記述する必要があります。この2つのmetaタグは、ドキュメントの適切なレンダリングを一貫して保証します。他のhead内の要素は、この2つのmetaタグの後に記述します。initial-scale=1"><!--リソースがどこからロードされるかを制御できます。このタグはその後に宣言されたリソースのみに適用されるため、<head>内の可能な限り上に記述します。contentの値は、検索エンジンの結果として使用される場合があります。GraphタグでWebサイトをマークアップして、Facebookでのコンテンツの表示方法を制御することが重要です。Debuggerでページをテストできます。Cardsを使用すると、写真やビデオなどのメディアをツイートに添付して、Webサイトへのトラフィックを増やすことができます。Validatorでページをテストできます。PrivacyTwitterのツイートをWebサイトに埋め込むと、TwitterはあなたのWebサイトの情報を使用して、Twitterユーザーに合わせたコンテンツや提案をすることができます。これらのmetaタグは、<html>タグにitemcope属性とitemtype属性を追加する必要があります。Testでページをテストできます。PinterestPinterestはヘルプセンターに基づいて、ビジターがあなたのWebサイトから何かを保存するのを防止します。descriptionの説明文はオプションです。Docsメモパフォーマンス要素の先頭にhref属性を移動すると、gzipが有効になっているときに圧縮が改善されます。href属性は、baseとlinkタグで使用されるからです。