イントロダクション

こんにちは！VoicyでフロントエンドエンジニアをしているCちゃん(@shinobear01)です。今回は、放送概要機能のSEO対策について失敗から学んだことについて書きます。

2023年4月にVoicyのWebの機能として、放送概要をリリースしました。この機能について、SEO対策が漏れていたという失敗がありました。この失敗に対しどのように取り組み、何を学んだのかを本記事で説明します。

記事の目的

本記事の目的は、同じ失敗をしないように今回の経験を振り返ることです。

失敗事例の紹介

前提知識

前提として、SEO対策としてhtmlに埋め込むmetaタグというものがあります。主なmetaタグにはタイトルやディスクリプション(概要)、URLなどがあります。

このmetaタイトルやmetaディスクリプションは、Googleなどの検索エンジンの検索結果に表示される際に使われます。

詳しくは、以下のGoogleの説明を参照してください。 https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=ja#meta-tags

失敗した出来事の説明

今回の放送概要の施策で、パーソナリティーが使う音声を収録するサービスに、放送概要の設定機能を実装しました。そして、今回説明するのは再生側のWebのサービスである https://voicy.jp です。パーソナリティーが設定した放送概要を表示します。

以下の画像が放送ページです。赤枠で囲った箇所が放送概要です。

この再生のWebサービスについて、放送概要実装の要件としては大きく以下の2つがありました。

放送ページに放送概要欄を追加する
放送概要欄から遷移できる放送概要ページを追加する

この1つ目の要件についてのSEO対策の考慮漏れを説明します。2つ目は、SEO対策の内容としては被る部分があるので割愛します。

Voicyの放送には今まで放送概要はありませんでした。放送についての概要を文章で説明できませんでした。なので、放送ページのmetaディスクリプションには、放送名やパーソナリティ名を組み合わせた以下のテンプレートの文章を指定していました。

音声放送チャンネル「[パーソナリティ名]」の「[放送名]([放送日]放送）」。Voicy - 音声プラットフォーム

しかし、今回の放送概要の実装において放送概要文を設定できるようにしました。本来なら放送ページのmetaディスクリプションにこの放送概要を設定したいところです。ですが、要件から考慮が漏れており、誰も私も気が付かずリリースをしました。

失敗した理由についての分析

経緯としては、実際にリリースした後に社員が気がつき共有をもらいました。共有をもらい、初めてSEOについての考慮が必要なことに気がつきました。

考慮漏れが発覚した後、他のページはSEO対策をしていたのか調べました。同じように概要を表示している、チャンネルページを見てみると、チャンネル概要文はチャンネルページのmetaディスクリプションに設定されていました。つまり、放送概要の考慮はチャンネルページと同様に考えても完全に漏れていたということです。

Voicyは、アプリを優先しているサービスなので、Webの仕様検討は漏れがちな面があります。それでもやはりSEO対策は大事な部分になので、対策をすることになりました。

失敗から学んだ後に取り組んだことの説明

今回Pdm側で施策検討時の考慮事項として追加してもらうことになりました。また、エンジニア側でも意識しておきたいと思ったので、私が社内で週1で開催しているエンジニア発表会で共有をしました。

ちなみに、この修正の際にはSEO対策として加えていくつかの修正を行いました。

metaディスクリプションの他に、放送URLをシェアしたときに表示される、画像で表示されるOGPの説明文である、OGディスクリプションにも放送概要の文章を表示するようにしました。

また、一部のdivタグをhタグに修正する対応も行いました。適切なhタグを使うことでSEOの評価が上がることを期待しています。

結論

今回は、Webの新機能リリース時に意識したいこととして、SEO対策に失敗した例を紹介しました。検索結果に出しているようなtoCサービスにおいてはSEO対策はあったほうがいいです。

知識不足で実装していなかったとなることがないようにしたい、またSEOの評価基準は日々変化しているので最新のSEO対策について日頃から情報収集していこうと思いました。

間違いや指摘等あればいただけると助かります。