検索結果0件」

    【実証済み】SPAはSEOに弱いというのは大嘘【SSR付きが普通】

    【実証済み】SPAはSEOに弱いというのは大嘘【SSR付きが普通】

    こんにちは、シンヤです!
    先日、以下のツイートをしました。

    自分でSPAでブログ運営してみて感じたことは、「SPAはSEOに弱い」っていうのは嘘ですね
    GatsbyもNextもSSR備えているからね
    やっぱ自分で検証しないと分からないね
    SEOは検証しづらいし、僕みたいに「自分でSPAでブログを作り運営し続ける」なんて、基地外じみた事考える人が少ないんだけど😅

    こちらのツイートについて、深掘りして解説していこうと思います。


    SPAとは何か?

    SPAとは、SinglePageApplication(シングルページアプリケーション)の略称で、JavaScriptを使って単一のページでコンテンツの切り替えを行う、Webアプリケーションを作る為の技術です。
    このブログもSPA(Gatsby.js)で作られています😊

    非同期通信を使って、ブラウザによるページ遷移を行わずに、コンテンツを切り替える事ができます。
    裏側のHTMLは最初に読み込まれるJavascriptしか存在せず、JavaScriptがページの切り替えを行なっています😀

    Pjaxと何が違うの?

    少し話が脱線してしまいますが、非同期通信が出来るjQueryライブラリに、Pjaxというものがあります。

    Pjaxは、URLを変更すると非同期でコンテンツを入れ替えてくれるライブラリで、SPAとは違い遷移先にHTMLが存在しています。

    SPAの場合、実際には遷移先にHTMLがありません。
    JavaScriptがDOMとURLを動的に切り替えて、リクエストがあった差分のみを描画しています😀

    HTMLとDOMについて

    DOMとは「Document Object Model」の略称で、かんたんにいってしまうと、Webページを表示する仕組みのことです😊
    WebページはHTMLを読み込んだ後、内容を解析してDOMを作り出し、ページを表示しています。

    つまりHTMLとは、「DOMを作るための設計図」のようなものです。
    裏を返すと、DOMを作った後はHTMLは不要ということです😅

    このDOMを、JavaScriptを使って動的に切り替えてWebページを表示する技術がSPAです😊


    「SPAはSEOに弱い」と言われていた

    しかしツイートの通り、SPAを使い自分でブログを運営してみて、それが嘘だとはっきりと証明できました。

    SPAがSEOに弱いと言われていた理由は、主に以下の通り。

    SSR(サーバーサイドレンダリング)ができなかったから

    こちらについて、詳しく解説いたします。

    昔のSPAはSSR機能はなかった

    一般的なHTMLでサイトを作る場合、metaタグの情報などもGoogleのクローラーに読み込まれます。
    なので特別なSEO対策は必要ありません。

    しかしSPAの場合、JavaScriptが動的に中身のDOMを切り替えます。
    つまりページ遷移していると見せかけているだけで、URLは変わりますが実際にページ遷移はしていません。

    これはどういうことかと言いますと・・・

    metaタグを切り替えても、Googleのクローラーに読み込まれるのはトップページのみ

    ということになります。
    SPAは最初に全てのページ情報を読み込み、動的にDOMを切り替えます。
    しかしGoogleのクローラーは動的に切り替えたDOMのmetaタグは読み込めないのです。

    そうなると、SSRを行いGoogleのクローラーに、サイトの情報を読み込ませる処理を施さないといけなくなります😱


    フレームワークならSSRを備えているのが普通

    プログラミングの概念を理解するために、「ライブラリ」「フレームワーク」の違いをまず解説いたします。

    • ライブラリ
      • Webの画面を作るための道具の一つ
    • フレームワーク
      • ライブラリを使い、すぐにWebアプリが作れるように整理された道具箱

    というのが、イメージしやすいかと思います😊
    このブログに使われている、「React.js」「Gatsby.js」の関係性を整理すると・・・

    • React.js:ライブラリ
    • Gatsby.js:フレームワーク

    つまり「Gatsby.js」は、「React.js」というライブラリを使い、Webアプリ作りがすぐ行えるように作られた、フレームワークということになります😀

    このライブラリとフレームワークの違いにも、明確なメリットデメリットがあります。

    ライブラリ
    メリット デメリット
    別の言語で動いている、既存のシステムにも組み込むことができる(例えば、Rails + React.js など)。 Webの画面を作るだけなので、SSRやその他必要な機能は、自分で作らないといけない。
    フレームワーク
    メリット デメリット
    予め必要な機能が揃っているので、すぐにWebアプリ作りを行うことができる。 決められた通りにしか動かないので、既存のシステムに組み込むことはできない。

    上記を加味して、それぞれのメリットを一言で表すと・・・

    • ライブラリ
      • どのシステムにも組み込めるので、柔軟な使い方ができる
    • フレームワーク
      • 必要最小限な設定を変えるだけで、すぐにWebアプリを作ることができる

    という感じになります。
    Gatsby.jsのようなフレームワークの場合、SSRの機能も組み込まれています。
    そのため、特に設定を変えなくても、全てのWebサイトをGoogleのクローラーが読み込んでくれます。

    ライブラリを使ってWebアプリを作る場合、別途SSRを実装しないといけません😅


    ライブラリとフレームワークの紹介

    ここからは小話として、代表的な「ライブラリ」「フレームワーク」をご紹介いたします。

    ライブラリ

    React.js Vue.js
    Facebook製。
    「JSX」という特殊な記法でコードを書いていく。
    コードの書き方が生のJavaScriptに近いので、他の技術に転用がしやすい。
    個人開発。
    HTMLに近い書き方でコードを書いていく。
    学習コストが低いので、初学者の方でもすぐWebアプリ作りができる。

    フレームワーク

    React.js製

    Next.js Gatsby.js
    リリース当初からSSRをサポートしており、ページ毎のmetaタグを簡単に変えられたり、カスタマイズをすればブログを作ることも可能。 SPAでブログが作れることが特徴で、WordPressのようにプラグインによるカスタマイズや、テーマ機能でデザインを変えることも可能。

    Vue.js製

    Nuxt.js VuePress
    Webアプリ作りに特化。
    Vue.jsの簡単さはそのままに、SSRやmetaタグの簡単な変更もサポートしている。
    ブログ作りに特化。
    複雑な設定の変更をしなくても、Markdownを書くだけでブログ記事を作ることができる。

    まとめ

    • SPAはSEOに弱いと言われていたが、それは昔の話
    • 今はフレームワークなら、SSRを標準で備えているので問題なし
    • ライブラリの場合は、SEO対策の為に別途SSRを実装しないといけない
    • 主に使われているライブラリは、「React.js」と「Vue.js」
    • ライブラリとフレームワークには、それぞれ特徴がある

    以上になります。
    ではでは、またね〜🤗

    • 【実証済み】SPAはSEOに弱いというのは大嘘【SSR付きが普通】