テクニカルSEOとaumoでの取り組み

こんにちは。エンジニアのセキヤです。 本記事では、webサイトを運用する上でよく考慮されるテクニカルSEOと、aumoでの取り組みについて主にRailsエンジニア観点でお話します。

こんにちは。エンジニアのセキヤです。

本記事では、webサイトを運用する上でよく考慮されるテクニカルSEOと、aumoでの取り組みについて主にRailsエンジニア観点でお話します。

目次

テクニカルSEOとは

まず、SEOとは何の略称か知っていますか?

SEOとはSearch Engine Optimizationの略で、日本語ではそのまま検索エンジン最適化と言われます。

検索エンジンの仕組みについて軽く説明すると、クローラと呼ばれるプログラムで世界中のwebサイトにアクセスし情報を随時収集してデータベースに格納するというデータ収集部と、我々がブラウザで検索する際にそのデータベースに検索をかけて結果を表示するという検索結果表示部の二段構えをとっています。

つまりSEOの意味するところは、Googleなどの検索エンジンのクローラに適切な情報を早く渡せるように最適化することと、狙ったキーワードの検索に対して良い評価をもらえるように最適化することを指しています。

さらに説明すると、Googleが掲げる10の事実や、検索品質評価者と協力して検索品質を向上させる取り組みから辿ることができる検索品質評価ガイドラインを意識して自社サイトをそれに近づけることが最適化となります。

その結果として、検索エンジンの特定のキーワードでの表示順位の向上などのメリットが得られるわけです。

そしてSEOの中でも種類があり、ユーザーニーズに合わせたコンテンツ制作や情報構成の最適化を行うコンテンツSEOと、サイト内データを改善整理してクローラビリティを最適化するテクニカルSEOがあります。

以下では、テクニカルSEOを中心にaumoでの取り組みを交えていくつか話します。

よく行われるテクニカルSEOとaumoでの取り組み

それでは、テクニカルSEOの例を見ていきましょう。

メタタグ

メタタグとは、基本的にサイトに表示されず、検索エンジンやブラウザにサイトの情報を伝える役目をします。

ページの情報や構造を検索エンジンに適切に伝えることができれば、サイト品質の評価が上がり、上位に表示されやすくなるということです。

メタタグには様々な種類がありますが、よく使われるものには以下のようなものがあります。

  • メタディスクリプション
    • webサイトのページの概要をクローラに伝える
    • 検索結果に並ぶ際にも表示されるので、ユーザに情報を伝える役割も果たす
  • noindex
    • これが設定されたページは検索エンジンにindex(登録)されないので、検索結果に表示されたくないものに設定する
  • nofollow
    • 遷移先にSEO評価を引き継がない

メタディスクリプションを設定することはテクニカルSEOと言え、その文言を最適化するのはコンテンツSEOと言えます。

aumoではRailsでのメタタグの設定によく使われている meta-tags というgemを使用してメタタグを設定しています。

メタディスクリプションをページごとにもちろん設定していますし、OGPも設定しています。

タグページなど情報量が少なく、評価に繋がらないようなページなどにnoindexを設定しています。

robots.txt

クロールが来るURLについては、robots.txtにて管理ができます。

aumoではsitemapを引いてクロールが来るURLを生成しています。

メタタグのnoindexでは検索エンジンへのindexを防げますが、robots.txtにDisallowでURLを記述することでそもそもクロールされないようにできます。

aumoでは評価に繋がらないようなページはクロールされないように設定しています。

CSS

CSSはwebサイトをデザインするために使われますが、これもSEOに関わってきます。

webサイトの読み込み速度が早ければ早いほどテクニカルSEOとしてよく働くとされています。

Googleのスタイルガイドには、webサイトの読み込みを早くするCSSの書き方が載っています。

いくつか取り上げると、

  • コード量は少なくすること。
    • 一行にまとめられるものはまとめること。(marginやborder solidなど。)
    • 省略できるものは省略すること。(colorの#33bb88→#3b8やデフォルト値など)
  • プロパティはアルファベット順で記述すること。
  • import機能を使用しない。
    など

とはいえ、import機能は便利です。

aumoではscssでimportを記述し、クローラにはビルドしたcssをクロールさせることで読み込み速度の低下を防いでいます。

構造化マークアップ

図1 構造化マークアップによるリッチリザルト

検索結果の中で、図1の赤破線枠で囲ったような、クリックするとFAQが展開されるようなものは見たことがあるでしょうか?

これはリッチリザルトと呼ばれていて、これを実装することで、

  • 検索結果での表示面積が広がることでユーザーの目に留まりやすくなる
  • タイトルやディスクリプションに含まれないサジェストワードや共起語を拾うことでページ評価に優位に働く

といったメリットがあります。

aumoでもいくつかのページに設定されていますが、これの設定方法はGoogle検索セントラルに記載があります。特定の構造のjsonを持つhtml要素を記事に追加することで設定できます。

また、aumoではE-A-Tのために全ての記事ページに構造化マークアップで運営者情報を設定しています。

E-A-Tとは検索品質評価ガイドラインにありますが、Expertise / Authoritativeness / Trustworthinessのそれぞれの頭文字を取ったものであり、意味はそれぞれ専門知識・権威性・信頼性で、それらをページ内で担保することがSEOに重要だというガイドラインです。

まとめ

今回はテクニカルSEOとaumoでの取り組みをRailsエンジニア観点でご紹介しました。

もちろんこのほかにもテクニカルSEOとして行われている実装はたくさんありますし、コンテンツSEOを含めるとさらに膨大にあります。

例えば、検索ボリュームを意識したキーワード選定や、記事の専門性や信頼性を持った記事執筆や監査など、たくさんのSEOがあります。この間も、美白製品の宣伝を禁止する旨も発表がありましたね。

aumo.jp内の記事の評価が上がることでドメインパワー自体も上がり、また記事の評価も上がる、という良い循環を生んでいきたいです。

そのためにも、これからもGoogleが出すルールやガイドをいち早くキャッチアップしてそれらに則った、健全で品質の高いサイトを運用していきたいですね。

アウモ株式会社では、SEOライターも、SEOディレクターも、SEOを意識した開発ができるエンジニアも積極募集・採用中です。

ご興味あればぜひ応募の程をよろしくお願いします。

募集中の職種はこちらからご確認ください。