デザイナーがSEOに関わったら想像以上にやれることあって楽しかった話

Ateam cyma Advent Calendar 2019、18日目は株式会社エイチーム デザイナーの minami-nu がお送りします。

背景

最近、業務でSEOに関わるようになり、やれることの多さと楽しさを知り、デザイナーキャリアの選択肢として存分にありえると感じたので記事にまとめてみます。

目標

・SEOチームメンバーが公開した記事の順位＆CTRアップ
・訪れたユーザーの直帰率改善＆商品ページへの遷移アップ

実際にやったこと

・記事の見た目をいい感じにする
・構造化データを仕込んで検索結果画面の表示インパクトアップ
・テクニカル施策諸々

記事の見た目をいい感じにする

これはデザインの仕事なので、想定内の仕事です。
現状の問題点をザックリ出すと

・どこからどこまでが一つのコンテンツかわかりにくい
・知らないうちに商品紹介入ってる
・なんか色が散らかってる感

なのでもう少しスッキリ見やすくしてみます。

Before

After

【変更した点】
・緑が散らかってるので、タイトルや目次は黒に
・商品一つのまとまりをborderで括る
・カラムを反転（記事内容を左側に）

直帰率が3％ぐらい改善されました。
CVRには大きな変更はありませんでしたが、CV自体は伸び気味です。
良い方向に向かっていると思います。

構造化データを仕込んで検索画面のインパクトアップ

そもそも構造化データとは

googleのクローラー（ロボットさん）に「こういう情報があるよ」と明確に伝えるための仕組みです。
詳しくは公式ページをご確認ください。

構造化データの設定にはたくさんのtypeが存在しますが、今回は「FAQpage」というものに取り組みました。

FAQpageとは

FAQpageは簡単にいうと、「よくあるご質問」ページにあるような内容を検索結果の画面に表示させることができます。見たほうがわかりやすいので、画像でご確認ください。

PC版だとそのインパクト感は低いのですが、、、

SP版だとそのインパクトはとても大きいです。

ちなみに該当する質問をタップすると回答が開いて表示されます。
俗に言うアコーディオンです。

どうやって設定するの？

設定方法はいくつかありますが、cymaではjson形式で読み込ませています。Googleの推奨もこのやり方です。

実際に入れているコード

<script type="application/ld+json">
 {
   "@context": "https://schema.org",
   "@type": "FAQPage",
   "mainEntity": [
   {
       "@type": "Question",
       "name": "どんな種類の自転車がある？",
       "acceptedAnswer": {
       "@type": "Answer",
       "text": "一番見慣れたシティタイプ(ママチャリ)、速く走れるスポーツタイプ、タイヤが小さいミニベロタイプ、車体を小さく折りたためる折りたたみタイプ、バッテリーで楽に走れる電動アシスト自転車の5つの種類があります。"
       }
     },
   {
     "@type": "Question",
     "name": "おしゃれな自転車って？",
     "acceptedAnswer": {
     "@type": "Answer",
     "text": "シティサイクルやミニベロでは、車体のカラーや形、カゴの形のおしゃれさを気にいる人が多いです。スポーツバイクでは、フレームの細さやシンプルさ、性能の高さをおしゃれの基準になりやすいです。"
     }
   },
   {
     "@type": "Question",
     "name": "自転車の相場っていくら？",
     "acceptedAnswer": {
     "@type": "Answer",
     "text": "シティタイプ(ママチャリ)とミニベロの相場は2~3万円、クロスバイクの相場は5万円です。"
     }
   },
   {
     "@type": "Question",
     "name": "通販で自転車を買うときの注意点は？",
     "acceptedAnswer": {
     "@type": "Answer",
     "text": "通販で自転車を買うと、自分で組み立てなければならない販売店が多いです。サービス内容を確認してから買うことをおすすめします。"
     }
   }
 ]
 }
</script>

ルールを覚えてしまえば、デザイナーでなくても仕込むことはできます。
但し、文法エラーなどがあると表示されないため、テストツールでチェックしておきましょう。

こちらもCTRでの成果がでました。良いものだと4,5位ぐらいの記事でも1位に近いCTRが出たものも。

テクニカル施策諸々

これはtitleやh1の変更、URLの統一などといった作業です。SEOでよくある内容です。
通常であればそんなに難しいことではないので、デザイナーでもサクサクやれるのですが、フレームワークで作成されているサイトは一苦労です。
他の記事で書かれていることもありますが、cymaのサイトはRuby on rails というフレームワークで作成されていますので、コードはバックエンドのプログラムまみれです。
titleを一つ変更するにも条件分岐を記載する必要があったりします。

短期間ではありますが、udemyなどの外部ツールを利用してrailsの勉強をしました。
付け焼き刃感がすごいですが、なんとかエンジニアの力を借りながらやることができました。

具体的にはcontrollerに専用の関数を作ってviewに表示させたりしました。

新しい関数を作ってみたり・・・

def search_price_title
 Product::PRICE_RANGES[params[:price_range].to_i]&.dig(:title)
end

既存の条件に追加をしてみたり・・・（追加した箇所だけ書いてます）

elsif params[:price_range].present?
 "自転車 #{search_price_title}"
else
 "自転車本体一覧"
end

デザイナーには正直大変な作業でした。

振り返り

今回をきっかけに普段触れない知識や技術に触れることができました。
今後もしばらくはSEOにかかわると思うので、知識を増やし事業課題を解決していくデザイナーとして成長したいと思います。

最後まで読んでいただきありがとうございました。

Ateam cyma Advent Calendar 2019 の 19日目は watabe503 が「価格交渉の考え方」について記事を書きます。お楽しみに！

株式会社エイチームでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。

エンジニアで興味を持った方はcymaのQiita Jobsをご覧ください。
そのほかの職種は、エイチームグループ採用サイトをご覧ください。