ページの head を磨き上げる: title、description、favicon、そして安全な外部リンク。
このレッスンを Kodokon で開くページを訪れる前から、人々はそれを他の場所で目にします。ブラウザのタブ、検索結果、共有されたリンクの中でです。そのすべては head で起こります。丁寧に作り込まれた head は、素人のサイトとプロのサイトを分ける違いなのです。
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Quick Recipes | Lea's Kitchen</title>
<meta
name="description"
content="30 recipes ready in 20 minutes flat,
tested by our readers."
>
</head>title はタブ、ブックマーク、そして検索結果に表示されます。ページごとに固有 で、説明的にし、主題を先頭に置き、60文字前後にしましょう。meta description は検索エンジンでタイトルの下に表示される文章です。クリックしたくなるような150文字を目指してください。
favicon は、タブやブックマークに表示される小さなアイコンです。今どきのやり方: サイトのルートに置くフォールバックの favicon.ico、あらゆるサイズで鮮明さを保つ SVG 版、そして Apple のホーム画面用の専用アイコンです。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">最後のプロの反射神経: 外部リンクです。target="_blank" でリンクを新しいタブで開くと、開いたページに window.opener への、つまりはあなたのページへのアクセスが与えられる可能性があります。rel="noopener noreferrer" を追加して、その結びつきを断ち切り、参照元アドレスを渡さないようにしましょう。
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
MDN documentation (new tab)
</a>