メタデータ、SEO、ソーシャル
あなたのページに到着する2人の訪問者がいて、彼らは人間が見るやり方でページを見ることはありません。1人は検索エンジンで、ページをリストに載せるべきかどうか、そしてそれについて何を言うかを決めています。もう1人はソーシャルプラットフォームで、誰かがリンクを共有するときに現れる小さなプレビューカードを構築しています。どちらも<head>内の小さなタグのブロックを読みます。画面上の表示されたコンテンツではなく。この章は、検索結果、ブラウザタブ、共有リンクでページが正しく表示されるようにそのブロックを書くことについてです。
タイトルと説明
すべてのページに<title>が必要です。ブラウザタブ、ブックマーク、および検索結果のリストにページが表示される際のクリック可能な見出しに表示されるテキストです。headに存在し、1行の短い行です：
<title>初心者向けサワードウ：最初のローフ、ステップバイステップ</title>検索結果のその見出しの下には、通常、ページを説明する文があります。それは**メタディスクリプション**から来ます。これはheadに入れるもう1つのタグです：
<meta name="description" content="シンプルなサワードウレシピ、最初の生地をこねることからパリッとした黄金色のクラストまで、各ステップのタイミング付き。" />棚の本を想像してください。タイトルは背に印刷されているので見つけられます。説明は裏表紙に書かれた引用で、それを開くべきかどうか判断するのに役立ちます。
<title>はタブラベルで、検索結果でクリックする見出しなので、明確にしてください。<meta name="description">は下の引用です。両方ともheadに存在し、各ページに独自のペアを与えることは、それがどのように役立つかのために期待するよりもはるかに少ない努力で済みました。 文字セットとビューポート、再考
Your first HTML pageのスケルトンは2つのメタタグで開かれました。これは貼り付けて忘れやすいものです。両方がコンテンツが表示される前にページの読み取りと レンダリング方法を変更するため、2回目の見は価値があります。
最初のタグは文字エンコーディングです：
<meta charset="UTF-8" />これはブラウザに対して、文字がどのアルファベットで書かれているかを示し、アクセント付きの文字、巻き引用符、絵文字が奇妙な記号に変わる代わりに正しく表示されることをします。常にUTF-8を使用してください。それはすべての言語とすべての絵文字をカバーしています。
2番目のタグは**ビューポート**で、ページをスマートフォン画面に合わせます：
<meta name="viewport" content="width=device-width, initial-scale=1" />それなしでは、スマートフォンはページがワイドデスクトップ向けに構築されたと仮定し、テキストが読むには小さすぎるまで全体を縮小します。これを使用すると、ページはデバイスの幅に一致します。ブラウザに対して、印刷している紙の実際のサイズを伝えていると考えてください。
<meta charset="UTF-8">はアクセント付きの文字と絵文字がギブリシュに変わるのを防ぐため、常に含めてください。ビューポート行はページをスマートフォンに合わせ、小さなデスクトップに縮小しません。1回コピーして、ほとんど二度と触らないようにするための2つのタグですが、スキップするのは速く示します。 Open Graphとソーシャルカード
チャットまたはソーシャルポストにリンクを貼ると、小さなプレビューカードが画像、タイトル、テキストの行で表示されることがあります。そのカードはプラットフォームが推測しているのではありません。ページはheadの**Open Graph**と呼ばれるタグセットを使用して、表示する画像と単語をそれに与えます：
<meta property="og:title" content="初心者向けサワードウ" />
<meta property="og:description" content="最初のローフ、ステップバイステップ。" />
<meta property="og:image" content="https://breadschool.example/loaf.jpg" />これらは前の説明タグがnameを使用した場所でpropertyを使用していることに注意してください。それはOpen Graphタグが取る形です。パターンをコピーして単語と画像アドレスを変更してください。誰かがそれを共有するたびに、ページに小さなプレビューをパックするのと思ってください。
og:title、og:description、og:image。彼らはnameの代わりにpropertyを使用します。最初は奇妙に見えますが、書き方です。それらを設定し、リンクは裸の表示を停止します。 ファビコンと他のリンクタグ
ブラウザタブの小さなアイコンで、ページタイトルの横は、**ファビコン**です。誰かが他の十数のタブの中からあなたのタブを発見する方法です。head内の<link>タグを使用してアイコンを追加します：
<link rel="icon" href="/favicon.png" />rel="icon"部分はブラウザに、このファイルがページのアイコンであることを伝え、hrefは画像へのポイントです。小さな正方形の画像、およそ32×32ピクセルで十分です。小さなタッチで、サイトが完了したように見えます。
<link rel="icon">と小さな正方形の画像で追加されます。これはサイトが完了したように見えるようにする小さなものです。head内の<link>タグは、ページをこのような追加ファイルに指す方法です。 クロール可能性の基本
検索エンジンはウェブページにアクセスし、読み、それを大きなリストに追加するプログラムを送信します。その人は**クローラー**で、ほとんどの場合、その仕事をするようにして、特別に何もしません。下書きまたはプライベートなお礼のページのようにクローラーから除外したいページがある場合、ロボットメタタグでそうします：
<meta name="robots" content="noindex" />noindexは「このページを検索結果にリストしないでください」という意味です。クローラーを、各本をカタログ化している図書館司書として想像してください。このタグは図書館司書に、このタグをスキップするように要求するメモです。
<meta name="robots" content="noindex">を追加します。これはこの段階で到達する主なノブなので、残りをまだ圧倒的に考える必要はありません。