📖

ここ最近、意識するようにし始めた技術的SEO関連のお話し

hanetsuki2022/10/21に公開

こんにちわ、ちょっと株式会社 エンジニアの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サイトを目指します。
https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=ja

Core Web Vitals

Googleが取り組んでいるユーザー体験向上に向けての指標です。
microCMSさんが詳しい解説をして頂いているのでこちらをご覧ください。

https://blog.microcms.io/what-is-corewebvitals/

https://www.youtube.com/watch?v=ATgwnnI6QhI

最後に

まだまだ、勉強不足な部分が多いのでこれからもキャッチアップしてきたいと思います。
a11yとか...etc

chot Inc. tech blog

ちょっと株式会社のエンジニアブログです。

Discussion

ログインするとコメントできます