プログラミング

プログラミング

Vue.jsの使い方【完全版】SEOフレンドリーなアプリを作る!

1,220 views

Vue.jsとは何でしょうか?

Webインターフェース作成のための、軽くて進歩的なJavaScriptのフレームワークです。

 

 

本記事では、Vue.jsの実例をご紹介します。SEOフレンドリーなeコマースのアプリです。

 

 

1.環境設定

まず、vue-cliを使ってVueアプリの足場を作っていきます。

 

これにより、vue-loaderを使い、基本的なコンフィグを含むvue-snipcartフォルダを作成します。同時に、単一ファイルコンポーネントの作成が可能になります。

このデモをよりリアルなものにするために、vuex、vue-router、prerender-spa-pluginの三つのモジュールを追加します。

新しいvue-snipcarプロジェクトフォルダに行き、以下のコマンドを実行してください。

 

 

 

さらに以下の四つのパッケージをインストールします。

 

 

 

 

 

2.組み立て

それでは全てを組み立てていきます。まずvuexストアからです。これを使い製品情報の保存/アクセスを行います。

2.1 ストアの構築

srcフォルダに、3つのファイル(state.js/getters.js/index.js)と共に ストアフォルダを作ります。

 

2.2 ルーターの構築

製品のリストがあるホームページと、各製品の詳細ページを作ります。そのために、2つのルートを登録します。

 

 

2.3 全てをリンクさせる

ここでは、ストアとルーターをアプリに登録します。src/main.jsを以下のようにアップデートします。

 


 
 
 

3.Vueコンポーネントを作り上げる

データを見せるために、以下の3つのコンポーネントを使用します。

Home…製品リストの表示

Product…各製品のためにHomeコンポーネントにより使用される

ProductDetails…各製品ページ

 

 

4.アプリの作成

App.vueファイルを開き、更新するため以下のスクリプトを実行します。

 


そして最後にsrcフォルダに新しいフォルダを作成し、index.htmlファイルをそこに移動し、更新します。

 

 

 

 

 

5.Vue.js SEOとPrerenderプラグイン

vue①

プリレンダリングは簡単にクローラー可能な軽くて早いフロントページの維持に役立ちます。webpackファイルへ行き、以下の宣言をトップレベルエキスポートに加えます。

 

 

 

※その他SEO対策として重要なこと

  • ・適切なメタタグとサイトマップをアプリページに追加する。
  • ・優れたコンテンツが重要。
  • ・HTTPS接続は、Google公式のランキング要素である。
  • ・モバイルファーストインデックス、モバイルフレンドリーも、ランキング要素である。

 

 

 

※本記事は、Vue.js Tutorial: An Example to Build and Prerender an SEO-Friendly Siteを翻訳・再構成したものです

関連記事

おすすめ記事