SEOに強いフレームワーク開発

seo-411385_1280
LINEで送る
Share on GREE
Share on LinkedIn

Googleが提唱しているSEOの強いサイトの特徴は、「速い」と「レスポンシブ」だ。
これは、明らかにスマートフォンユーザーの利便性を追求して、モバイル端末で見易いページを優先するというGoogleの会社の姿勢でもある事がよくわかる。
 

確かに、何かを検索する場面でスマートフォンを使う事が多い事は明確だが、当たり前だがPC表示を疎かにしていいわけではない。
 

マルチデバイス、マルチブラウザ、そのユーザーの環境に合わせたWEBサイトを作らなくてはいけないというのが、コンテンツメーカーに課せられた使命であると言っても過言ではないでしょう。

あまり知られていないSEOに強いサイトの特徴

とあるメディア・コンテンツの製作を担当している友人から、面白い話を聞きました。
 

1ページを複数ページに分割して、PV数をかさ増しするよりも、ページコンテンツを遷移する時に、history移動させずに、ajaxでソースコードを読んできて、ページが切り替わらないようなサイトを構築できると、Googleのクローラーは、ページ滞在時間が多いページは優良コンテンツとみなし、SEO順位が上昇する。

非常に興味深い話でその根拠を聞いてみた所、とあるサイトをスクラッチで作った時に、AJAX読み込み方式にすることで、メジャーなHOTワードだったにも関わらず、そのキーワードで検索順位が1位になることができたとのこと。
 

もちろん他の要因もあるかと思ったのだが、ページは極めてシンプルなため、ページ滞在時間でSEOが向上するのがよく理解できた。
 

新聞記事ページなどで、ページ分割しているコンテンツサイトをよく見かけるが、ページを分けてPVを向上させるよりも、滞在時間によりSEOを向上させて、結果的にPVも増えるという構造が望ましいという事。
 

もちろん、Googleが検索アルゴリズムを変更したら元も子もないのだが、今の時点で有効であれば、これを考慮したフレームワークを作っておけば、以後自分の構築するWEBサイトはSEOに強いサイトが作ることが可能になるという理屈だ。

プログラム構築の事前知識

そこで、今回は、ページの読み込みをAJAXを使ってWEBサイトのソースを取ってきて、その中の特定エレメントを差し替えるというシンプルな構成にしてみた。
 

ただし、このフレームワークで使う上での注意点は以下のとおりである。

・サイト全体でメニューやコンテンツ部分が同じ構成である事。
・ID=”contents”の内部ソースコードを入れ替える方式
※このID値を持っていなければ通常遷移になる。
・次ページに切り替わった後、JSを起動するようなページは動作しない
※JS実行をロジックに入れていないため

 

上記の条件があるため、一般的なブログシステムレベルを想定している。
 

少なくともwordpressよりは早くページ遷移できるのではないかと考えている。
 

そして、このプログラムは、以前とある会社で研究開発したプログラムを少し改良して作っている。
WebPageAccerelator
 

このプログラムは、ページ読み込みをいかに高速化できるかを研究しているので、そのページ読み込み部分のロジックを拝借した。

ソースコード

サンプルサイト

サンプルページのリンク
 

スクリーンショット 2017-07-14 17.33.52
 

サンプルページには上部に4つのリンクがあり、一番右のみ、contentsエレメントを含んでいない為、通常遷移になる。
 

ソレ以外の3つに関しては、contentsのみの差し替えになるし、ページ内の各種モジュールを読み込まないのでスピードも早い。
 

使い方

至って簡単で、上記axcel.jsをページのヘッダ部分にscriptタグ1行(ファイル読み込み)で追記するだけでいい。
 

id=”contents”部分でなくて別のエレメントが希望の場合は、ソースコードの133行目、160m行目と312行目、336行目を書き換えてあげるとお望みの場所を切り替えることが可能になる。
 

まだまとまりきれていないコードなので、整理もできるが、とりあえず、効果を見るにはいいかもしれないので、これをwordpressに実装してみたり、自分でフレームワークを作ってみてもいいかもしれない。
 

今回は高速読み込みとページ遷移をコントロールできるモジュールのみを開発したのだが、これを実装できる便利で使いやすいフレームワークを開発中なので、完成したら、発表したいと思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*