中文こんにちは。
私は2017年の8月からプログラミングの勉強を独学で開始し、これまでにいくつかのWebサービスを作ってきました。
基本的に作ってきたWebサービスはユーザー投稿型のものばかりです。
今月(2017年の12月)に新しく作ったのが「サッカーオピニオン」というWebサービスで、これは簡単に説明すると、ユーザーがサッカーに関する記事や意見を投稿できるというシンプルなWebサービスです。
このサッカーオピニオンですが、知り合い等に初めは使ってもらい、いくつかサッカー関連の記事や意見を書いて投稿してもらったのですが、その記事に対して全く検索からの流入がありませんでした。
このようなWebサービスでは、まず検索からサッカーオピニオンの記事に流入してもらい、そこで自分も書いてみようかなと思う人が数百人に一人現れ、そしてその人がユーザー登録をして記事を書き、さらにそれを読んだ人のうちの一部がユーザー登録をして記事を書き、さらに、、、というような流れで使っていく人が増えていくはずです。
この流れを作るには、まず書かれた記事が、検索の上位に来なければ話になりません。
このWebサービスを作った段階では、html5で新しく追加されたタグをほとんど使っていませんでした。
すなわち、基本的にはh1,h2,h3,p,div,span,ul,liぐらいしか使っていませんでした。
ただこれではせっかく知り合いがサッカーに関する記事を書いてくれても検索で上位に表示されにくいので、ちゃんとhtml5のタグを使うことに決めました。
ここでは、どのタグをどのように使ったのか、またSEOの効果を高めるためにおこなったその他の施策を書いていきます。
使ったHTML5のタグ
header, footer, nav
まずheaderとfooter、そしてnavの説明からしていきます。(ちなみにこれらはもともと使っていました。)
headerタグはWebサービスの共通のヘッダー部分に、footerタグはWebサービスの共通のフッター部分に使います。
これは説明をしなくても分かると思います。
navタグはサイトのガイドとなる部分を囲うためのタグです。
navタグに関しては、ヘッダー部分にあるメニューを囲うような形で使っています。
また、フッターにあるメニューに対しても使いました。
さらに、記事のページの下部に出てくる新着記事一覧という部分と、同じ記者による記事一覧という部分にもnavタグを使いました。
navタグの中ではulタグとliタグを使ってメニューを列挙します。
ヘッダーのメニューの部分はすごくシンプルにするとこんな感じになると思います。
|
1 2 3 4 5 6 7 8 9 10 |
<header> タイトル名やロゴなど <nav> <ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> </ul> </nav> </header> |
以上がnavタグの使い方です。
section
続いて着手したのがsectionタグです。
これはある固まりを示すタグです。
divのようにデザインを施すためのものとは違い、意味的に一つの固まりになりうる部分を囲います。
また、基本的に一つのセクションには見出し(h1,h2など)と内容が含まれます。
sectionの中にsectionを持つことも可能です。
これに関してはそこまで深く考えずにこれが一つのまとまりかなあと思ったところにどんどん追加していきました。
気をつけたのは、ちゃんとsectionに見出しを含むこと、あとちゃんと意味のあるひとまとまりになっているかぐらいです。
article
articleタグは、ページのメインコンテンツを囲うためのタグです。
「サッカーオピニオン」であれば、記事一つ一つをarticleで囲いました。
記事の一覧などのページでも同様です。
全部をまとめて囲うのではなく、記事一つに対して一つのarticleタグを付与しました。
グーグルなどの検索エンジンはコンテンツの内容を重視していくはずですし、そうなるとちゃんとコンテンツの場所を知らせるという意味で、articleタグを正しく使うことが最も重要じゃないかなあと個人的には思います。
time
続いてはtimeタグです。
これは日付を表す部分に使います。
サッカーオピニオンの場合だと、記事の投稿日を表す部分をtimeタグで囲いました。
またtimeタグは属性でdatetimeを持つことができるので、下記のような感じで使用しました。
ちなみにRuny on Railsでの例です。
<time datetime="<%= @post.created_at %>">2017年12月31日</time>
ここでは分かりやすいように投稿された日付を"2017年12月31日"と書いていますが、本来はここもRailsで動的に表示しています。
とにかくtimeタグを使う場合は、日付の表示をtimeで囲い、そのtimeタグにはdatetimeを持たせ、その値にも日付を入れると覚えておけば良いと思います。
とりあえずは以上のものを新たに追加しました。
他にも多くのタグがありますが、まずは大事そうなものを追加してみました。
その他の施策
さらに、見出しのタグを正しく使うように心がけました。
基本的にどのページにもh1が一つ存在するようにしました。
もちろんh2やh3も見出しになり得る部分に意識して使うようにしました。
また、サッカーオピニオンはユーザーに記事を投稿してもらうのですが、最初の段階ではユーザーは本文の投稿の際に見出し等を付けることはできませんでしたが、それを可能にしました。
具体的にはqiita-markdownというgemを使い、ユーザーがマークダウン方式で記事を投稿できるようにしました。
また、普通の人であればマークダウンの書き方など分からないと思うので、投稿ページにその説明を追加し、さらにその場でプレビューできるようにしました。
このプレビューはmarked.jsというのを使ってどうにか実装しました。
マークダウン方式でユーザーが記事を投稿できるようになったことで、記事自体がちゃんとした見出しを持てるようになりました。
タイトルがh1タグでこれは固定ですが、本文においてユーザーが見出しをつけた部分がh2やh3となります。
もちろん見出し以外の本文はpで囲まれています。
これらのすべての施策の結果かどうかは分かりませんが、以上の施策をして以降は徐々に検索からの流入が増えてきました。
(と言ってもまだまだオープンしたばかりですごく少ないですが。笑)
とにかくhtml5のタグをちゃんと使うことの大事さを改めて実感しました！
以上です。