こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。
web制作に携わってから、今まで知らなかったSEO関連周りについて意識するようになりました。
今回はその中のいくつかをアウトプットしようと思います。
HTMLマークアップ
初心に戻ってマークアップを意識するようになりました。（SEOってよりかはアクセシビリティですね。）
見出しやセクション、a11yなどまだまだ勉強するところは多いです。
パスディレクトリ構造
URLの構造を指します。
お知らせ一覧などを例に挙げるなら、
- news
- news/{contentId}
- news/pages/{number}
などです。
サイトの構造を測定する上で、googleの評価につながります。
パンくずリスト
割と実装が漏れがちな子です。
サイトの構造を測定する上で、googleの評価につながります。
レイアウトシフト
サイトを表示したときに画像の読み込みなどで発生する、位置ずれのことを指します。
これは後述するCore Web Vitalsに影響が出てきます。
これを改善する方法の一つとして<img>タグの width, height があります。
画像フォーマット
svgやpng・webpなど、利用する画像に適した画像フォーマットが存在します。
利用シーンやサイズなどを意識するようになりました。
例えば、単色のロゴなどであればsvg
複雑な配色だが、透過素材が良い場合などはpng
などです。
構造化マークアップ
パンくずリストや、FAQなどの情報をJSONデータなどで持たせることで、Googleが読み取りやすいwebサイトを目指します。
Core Web Vitals
Googleが取り組んでいるユーザー体験向上に向けての指標です。
microCMSさんが詳しい解説をして頂いているのでこちらをご覧ください。
最後に
まだまだ、勉強不足な部分が多いのでこれからもキャッチアップしてきたいと思います。
a11yとか...etc
ちょっと株式会社（chot-inc.com）のエンジニアブログです。 フロントエンドエンジニア募集中！ カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion