古いサイトのリニューアルなどで他の人が書いたタグを見ると
SEOや文書構造を意識せずコーディングしている人が意外と多いと感じたので、
今回は、コーディングの段階でSEOに関してこれだけは意識しておきたいという、
大枠の考え方をまとめました。
そもそもSEOって何？という人や、
テクニック的なところを詳しく知りたい人は、
詳しく解説してくれている素晴らしいサイトがたくさんあるのでググってください。
title、description、keywordsは必須
title、description、keywordsはページの概要を示すmetaタグで、SEOの基本です。
特にtitleとdescriptionは、Googleのクロールも重要視しているポイントのひとつと言われています。
キーワードを盛り込み、
- titleは35文字以内
- descriptionは120文字前後
にまとめると良いと言われています。
SNSの普及した昨今、SNS対策としてogタグも必須です。
自然な文書構造を心がける
検索エンジン最適化（SEO）スターター ガイド｜google search console ヘルプでは、
人を引きつける有益なコンテンツを作成すれば、このガイドで取り上げている他のどの要因よりもウェブサイトに影響を与える可能性があります。ユーザーは閲覧したときに良いコンテンツだと感じると、他のユーザーに知らせたいと思うものです。
と、コンテンツファーストであることが明示されています。
人間にとってわかりやすく読みやすい構造＝Googleのクロールにもわかりやすい構造という考え方です。
ところで、記事を書いているとキーワード等を意識しすぎるあまり、良い記事とは何かを見失いがちです（まさに私）が、基準のひとつとして
スタイルシートを無効にしても読みやすく意味が伝わるページか？
を意識すると、客観的に判断しやすくなります。
CSSが効いている状態でキレイに見えるのは当たり前で、余計な装飾がなくなった時でも理解しやすい構造が、文書構造のしっかりしたページだと思っています。
スタイルシートを無効にする方法ですが、（私のこよなく愛する）Firefoxには、スタイルシートを無効にする機能がデフォルトで備わっています。
Chromeの場合は、スタイルシート無効にする拡張機能があります。
また、HTML5ではタグ自体が意味を持っていて、適切に使用することで、より的確な構造をクロールに知らせることができます。
タグの役割を理解して使用することこそが、コーダー・マークアップエンジニアの真の役割ではないでしょうか。
コーディングの際、
- スタイルシートを無効にしても読みやすく伝わりやすい構造を意識する。
- HTML5タグの意味を理解し、適材適所で使用する。
この2点を意識するだけで、自然な文書構造にぐっと近づくはずです。
altの扱い
imgタグ内に記述する、alt属性。altの主な役割は
- 何らかの理由で画像が表示されなかった時、代替で表示される
- 何の画像であるか、Googleのクロールに明示する
- スクリーンリーダーを使用した際に読み上げられる
（＝視覚障害等の方に画像の意味を伝える）
以上のように、どんな画像かをテキストで説明する役割があります。
挿絵など特別な意味のない画像には、空のalt属性を記述します。
空にしておくことで、意味のない飾り画像であることを明示します。
意味がないからと言ってalt属性自体を記入しないことは文書構造的に間違っているので、alt属性は必ず記述しましょう。
余談ですが、コーディングの仕事で「SEO対策で、altには必ず文字を入れて！」という指示を受けたことがあります。
クロールがalt属性を認識することを考慮してこのような考え方に至ったのかもしれませんが、先述のalt属性の役割を踏まえると、闇雲にaltを埋めることがSEO対策になるのかは疑問です。
背景画像や擬似要素の使い方に注意
CSSで指定した背景画像や、擬似要素（::beforeや::afterなど）についてはGoogleのクロールは認識しません。
- 構造上重要な画像は、
imgタグで記述（altは必ず記載！）。 - 擬似要素は、表示されなくても困らない文字に対して使用。
のような点を考慮して、マークアップする必要があります。
この場合も、スタイルシートを無効にすると判断がつきやすいかもしれません。
超便利機能です。
まとめ
以上、デザイナー・コーダーが意識しておきたいSEOの基本でした。
困ったときは是非google search console ヘルプを参考にしましょう。
コメント