SEO対策に関して取り組む機会を頂いたので、
備忘録として残します。
今回やりたいこと
ブラウザで検索した際に表示される
- タイトル
- 詳細
- 画像
を可能な範囲で意図したものにしたい。
どちらかというと、具体的にどんな文章が良いか？という観点より、
どんな実装をすれば良いか？
というエンジニアの観点から記述しました。
タイトル
サイト上のすべてのページに <title> 要素でページのタイトルが指定されているようにする。
htmlファイルの<head>タグ内に<title>タグを作成します。
ブラウザのタブに表示される文章ですね。
ただし、<title>に記述した文章が必ず検索結果に表示されるわけではありません。
Googleさんに適切なタイトルであると、認識して頂く必要があります。
詳しくは下記にて。
最適なタイトルリンクを出しやすくするためのベスト プラクティス
詳細（スニペット）
スニペットとは、Google 検索やその他のサービス（Google ニュースなど）で表示される検索結果の説明または要約部分です。
これは<head>タグ内に<meta>タグを作成します。
name="description"属性を付与します。
こちらもタイトルと同じく
<meta>に記述した文書が必ず表示されるわけではありません
画像
次のベスト プラクティスを実施することで、画像が Google の検索結果に表示されるよう最適化できます。
- Google が画像を検出してインデックスに登録できるようにする
- 画像のランディング ページを最適化する
上記読んでみて、すぐに実践できそうな内容かいつまむ。
-
<img>タグで画像を実装する ※cssで実装しない -
image1.pngなど、一般的なファイル名を避ける -
alt属性をしっかり書く
Googleのmetaデータを見てみた
Googleのサイトがどんな実装をしているのか、検証ツールで見てみました。
おー、勉強になる。
※property="og:*"はSNSでシェアした時のmetaデータなので、本記事では省きます