検索結果やSNSでの表示は、ページ本文だけでなくhead内のメタ情報も使って作られます。LPの内容と公開URLが決まった段階で、ページごとの情報を設定します。
キーワードを不自然に並べず、ページを開く前に内容と価値が分かる文章にします。
titleとdescriptionを設定する
headへ設定したページ情報は、検索結果やSNS共有など複数の場所で利用されます。
titleはブラウザのタブや検索結果に使われるページ名です。descriptionはページ内容の要約として検索結果に使われる場合がありますが、表示内容は検索エンジンが判断します。
<title>初心者向けWeb制作講座｜HTMLから公開まで</title>
<meta name="description" content="HTML・CSS・JavaScriptの基礎から、LPとWordPressサイトを公開するまで学べる無料教材です。">canonicalで代表URLを示す
同じ内容へ複数のURLからアクセスできる場合に、代表として扱うURLをcanonicalで示します。公開後の完全なURLを指定し、ローカルURLを残さないでください。
次の画像は、「canonicalで代表URLを示す」で扱うコードや構成をブラウザで表示した結果です。
<link rel="canonical" href="https://example.com/course/">SNS共有用の情報を設定する
OGPでは、共有時のタイトル、説明、URL、画像などを指定します。OGP画像は公開URLから取得でき、内容が見切れない画像を用意します。
次の図では、「SNS共有用の情報を設定する」の仕組みや関係を確認できます。
<meta property="og:type" content="website">
<meta property="og:title" content="初心者向けWeb制作講座">
<meta property="og:description" content="Web制作の基礎から公開まで学べる無料教材です。">
<meta property="og:url" content="https://example.com/course/">
<meta property="og:image" content="https://example.com/images/ogp.jpg">サイトアイコンを設定する
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">必要な形式とサイズは対象ブラウザや端末に合わせて確認します。画像が存在し、Networkで404になっていないか確認してください。
次の図では、「サイトアイコンを設定する」の仕組みや関係を確認できます。
公開URLで確認する
次の図では、「公開URLで確認する」で行う操作の流れを示しています。
- HTMLソースでtitleとmetaを確認する
- canonicalとOGPのURLが公開ドメインになっているか確認する
- 共有用画像を直接開く
- ページごとに同じtitle・descriptionを使い回していないか確認する
- 検索結果やSNSのプレビューは反映まで時間がかかる場合があることを記録する