少し前のニュースになりますが、KAI-YOU.netは2016年2月1日にフルリニューアルしました! もうみなさん新しいデザインは見ていただけていますでしょうか?
実は、目に見えるページデザインやUIを良くする以外にも、内部ではSEOを意識したサイト構造になるよう心がけています。
リニューアルに伴って行ったSEOを意識した施策をご紹介いたします。
まず、リニューアル後のKAI-YOU.netのページレイアウトについて詳しくご紹介します。
私たちが目で見てサイトを理解するのと同じように、Googleもレンダリングすることでメインコンテンツを理解し、サイトを評価しています。
ユーザーのみなさまにももちろん、Google側にも内容をわかりやすく伝えることが重要ということになります。
SEOの観点からは、ファーストビュー(ページを開いてスクロールしないで表示される領域)にメインコンテンツを表示することが重要だと言われています。
今回、KAI-YOU.netは、よりビジュアルを重視したリニューアルを実施しました。
リニューアル前後を比べると、ファーストビュー内に表示されるコンテンツ数が減ってしまいましたが、おおきなビジュアルでコンテンツをお見せすることを優先しました。
記事ページは、Webメディアにとって最も重要なページです。やはりここでもファーストビューに何が表示されているか? という点を考えていきます。
リニューアル前のデザインは、ページ上部にそれぞれ共通の注目記事やメニューの表示があり、記事コンテンツは、タイトルとアイキャッチの上部しか見えていませんでした。
リニューアル後は、共通で表示していた部分を削除し、ページ上部から記事コンテンツが表示されるよう変更しました。
また、よりファーストビューで記事内容をお伝えするために「題名直下にディスクリプションを挿入する」という案も挙がりましたが、KAI-YOU.netではまずビジュアルを大きくみせることを重視し、今回は採用しませんでした。
記事を読んでいると、次の記事が無限スクロールで読み込まれる仕様に変更しました。記事から記事へ画面をクリックせずに遷移することが出来ます。
また、特集・連載・カテゴリページでも「特集をもっと見る」をクリックすることで同じページに続きが表示されるように実装しました。
Googleが推奨する検索エンジンに配慮した無限スクロールについては、ウェブマスターブログで詳しく紹介されています。
Official Google Webmaster Central Blog: Infinite scroll search-friendly recommendations
無限スクロールを実装した際には、ページネーション配下のcanonicalを正しく設定することも重要です。
よくある間違いについてはGoogleのウェブマスター向け公式ブログにも書かれているのですが、例えば、複数ページにまたがるページで、2ページ目に1ページ目へのcanonicalを指定するのは間違いです。
Google ウェブマスター向け公式ブログ: rel=canonical 属性に関する 5 つのよくある間違い
では、どのページにcanonicalを指定すれば良いかですが、記事全体を1ページにまとめたページへcanonicalを指定するか、ページ指定マークアップ「rel=”prev”」と「rel=”next”」を使用する方法が紹介されています。
KAI-YOU.netでは「rel=”prev”」と「rel=”next”」を使用する方法を採用しました。
また、2ページ目以降のタイトルには、ページナンバーを文頭に付与するよう変更しました。これでtitleタグの重複を避けることが出来ます。
1ページ目
『Re:ゼロ』MYTH & ROIDインタビュー Tom-H@ckが語る「アニソン市場をぶっ壊したい」の真意 - KAI-YOU.net
2ページ目
(2/2) 『Re:ゼロ』MYTH & ROIDインタビュー Tom-H@ckが語る「アニソン市場をぶっ壊したい」の真意 - KAI-YOU.net
KAI-YOU.netには、「特集」というコンテンツがあります。
速報性の高い「ニュース」に比べて、「特集」ではインタビュー、コラム、レポート、レビューのカテゴリを設け、読み物としての充実度を重視した専門性の高い内容を掲載しています。
特集ページ、カテゴリページには、その特集がどのようなものなのか分かるよう、オリジナルの説明文を追加しました。
リニューアル前は100文字程度だったのですが、400〜600文字程度に文字数を増やしています。こちらの理想は1500文字以上ともいわれていますが、人間に読めないと意味がわかんなくなっちゃうのでデザインとの兼ね合いで調整すると良いと思います。
細かいところですが、実はパンくずリストを正しく表示するのもGoogleにサイト構造を認識させるために大事な要素です。
記事ページのパンくずリストは、「ホーム > カテゴリー名 > 記事タイトル」で表示しています。
KAI-YOU.net > 情報化社会 > VICE Japan代表&編集長インタビュー バンドマンからメディアの運営になった2人の苦悩と展望
さらに、複数ページにまたがる記事の場合は、「ホーム > カテゴリー名 > 記事タイトル > ○ページ目」と表示するよう修正しました。
KAI-YOU.net > 情報化社会 > VICE Japan代表&編集長インタビュー バンドマンからメディアの運営になった2人の苦悩と展望 > 2ページ目
リニューアル前のKAI-YOU.netは、モバイルとPCで異なるURL構造で運用していました。
今回、のフルリニューアルでレスポンシブルデザインに改修しました。
ページ設計がきちんとモバイルフレンドリーであるか、モバイルフレンドリーテストをかけてテストして確かめることもひとつの指標になります。
また、導入後はモバイルのURLから、該当のPCページに301リダイレクトを向けて対処しました。
SEOとは関係ないですが、レスポンシブデザインを採用することにより、PCページとスマホページでも齟齬も発生しなくなり、結果的に開発コストも抑えられるのでおすすめです。
KAI-YOU.netでは、2月末にAMPにも対応しました。
AMPとは、Accelerated Mobile Pagesの略で、モバイルページが素早く表示されるというもの。今流行ってる!
Google Japan Blog: モバイルウェブをもっと速く
AMPに対応したwebページは、モバイルでのGoogle検索の結果上で見つけやすくなります!
検索キーワードと関連のある記事は、検索結果内の「トップニュース」の項目下にAMP対応のページが表示されます。AMP対応しているページは、従来に比べ平均4倍の速度で表示され、データ量も約1/10に抑えられるのだそう。
ただ、AMP実装は現時点では検索順位に直接影響があるわけではないとのことです。KAI-YOU.netをみなさんに爆速で読んでいただければ何より嬉しいことです!
こちらはサイトのデザインとはまた違いますが、ドメインの評価を下げていることの要因のひとつに、評価の低いページをインデックスしてしまっていることも挙げられます。
評価の低いページが多いサイトだと認識されると、サイト全体の評価も下がってしまうというわけです。
たとえばKAI-YOU.netには「キーフレーズノート」というユーザーが自由に編集できる百科事典のような機能があるのですが、リニューアル前までは未編集のページもインデックス化してしまっていました。
未編集のページは、当然ながら内容がないので非常に評価の低いページとなってしまいます。ですので、未編集のページは一律「noindex」に設定し、ドメイン全体の価値を上げるよう修正しました。
もし、運営しているサイトに低品質なページがあれば、インデックスされないように設定するとサイトの評価が上がるかもしれません。検索流入が見込めないページはインデックスを削除するか、再編集するなりしたほうが良いってことですね!
と、ここまでSEO対策について書いてきましたが、実際どのくらい効果がでたかといいますと、リニューアル後の2月から6月までのデータと、前年のデータを比較してみると、約2倍近いセッション数の差が出てきていることが確認できるかと思います。
また、KAI-YOU.net全体のセッションに対し、これまでは2割に留まっていた検索流入が、リニューアル後は4割まで増やすことができました!
本格的にSEOを意識することによって、SNSやキュレーションアプリなどに頼りきりにならないアクセスを集めることができますし、検索で入ってくるユーザーさんは「なんとなく見てる」というよりも何か知りたい情報や目的があって見に来てくれる熱量の高いユーザーさんが多い印象です。
検索が増えるということは、記事の価値が長く続くということでもあります。1日や2日だけしかアクセスのこない記事を書き続けるだけの人生はとても辛いですので、みなさんも是非SEO対策していきましょーー! ねりまちゃんにも教えてください^^
最後になりますが、株式会社カイユウでは、「POPなことが大好き! SEOも気にしながら、より多くの人にPOPを届けたい!」というエンジニアさんを募集しています。ぜひ私たちと一緒に働いてみませんか?