前後端分離のSEO最適化------vueを例に
6755 ワード
前言----SEOは英語のSearch Engine Optimizationの略で、中国語では「検索エンジン最適化」と訳されています.SEOとは、サイト内の最適化と修復(サイトのWeb構造調整、サイトコンテンツの構築、サイトコードの最適化とコード化など)とサイト外の最適化を行うことで、サイトのサイトキーワードランキングや会社の製品の露出度を高めることです.検索エンジンを通じて情報を検索することは、現在のネットユーザーたちがネット上の情報と資源を探す主な手段である.
履歴:
10年前にはほとんどのサイトでASP、Java、PHPといったバックエンドレンダリングが行われていたが、jQuery、Angular、React、VueなどのJSフレームワークの台頭に伴い、フロントエンドレンダリングに転向し始めた.2014年からは同構造レンダリングが流行し始め、未来と称され、前後のレンダリングの長所を統合したが、あっという間に3年が過ぎた.当時、壮大なフレームワーク(rendr、Lazo)の多くが先駆者から先烈に変わった.同構造は果たして未来なのか.自分のプロジェクトはどのように型を選ぶのか.ヒットを追求し、固定モードにこだわるだけでなく、前後のレンダリングの「争い」の「コアポイント」を無視し、「ユーザー体験」の向上に注目すべきではないかと思う.
3つの概念を明確にします:“バックエンドレンダリング”は伝統的なASP、JavaあるいはPHPのレンダリングメカニズムを指します;「フロントエンドレンダリング」とは、JSを使用してページの大部分をレンダリングすることであり、現在流行しているSPA単ページアプリケーションを表す.「同性レンダリング」とは、フロントバックエンドがJSを共用し、初回レンダリング時にNodeを使用することをいう.jsはHTMLをまっすぐ出します.一般的に、ホモグラフィックレンダリングは前後の端の共有部分です.
1.ウェブサイトのレンダリングモード――サービス側のレンダリングとクライアントのレンダリング
1.1サービス側レンダリング(バックエンドレンダリングSSR)
バックエンドでHTMLをレンダリングする場合、ブラウザはサーバ計算後のユーザに提示される最終的なHTML文字列を直接受信し、ここでの計算はサーバが解析を経てサーバ側に格納されたテンプレートファイルで行われ、この場合、ブラウザはHTMLの解析のみを行い、また、オペレーティングシステムが提供するディスプレイ表示内容を操作するシステム呼び出しにより、HTMLに代表される画像をディスプレイに表示させる.
メリット:フロントエンドの消費時間が少ない(フロントエンドはhtmlを展示するだけ)、SEOに有利
デメリット:ネットワーク転送データ量が多く、サーバ演算リソースを占有(部分、少ない部分)しているため、responseから出るデータ量が少し大きくなり、テンプレートがフロントエンドのインタラクションやスタイルを変更したように連動して修正しなければならない
1.2クライアントレンダリング(フロントエンドレンダリングCSR)------SPA---単一ページアプリケーション
フロントエンドレンダリングとは、ブラウザがバックエンドからいくつかの情報を得ることです.angularjsのテンプレートファイル、JSONなどの各種データ交換フォーマットで包装されたデータ、さらには直接的な合法的なHTML文字列かもしれません.これらの形式は重要ではありません.重要なのは、これらの情報を組織して最終的に読み取り可能なHTML文字列を形成することはブラウザによって行われ、HTML文字列を形成した後、表示されることです.
メリット:ネットワーク転送データ量が少ない(サーバ圧力を減らす)
デメリット:先端に時間がかかり、SEOに不利
2.フロントエンドレンダリングで発生した問題---seoとトップスクリーンの問題
SEOはよくわかります.従来の検索エンジンではHTMLからのみデータが取り込まれるため、フロントエンドでレンダリングされたページは取り込めません.フロントエンドレンダリングでよく使用されるSPAは、すべてのJSをパッケージ化します.無視できない問題は、ファイルが大きすぎて、レンダリング前に長い時間待つことです.特にネットの速度が悪い場合、ユーザーに白画面の終了を待たせるのは良い体験ではありません.
2.1フロントエンドレンダリングSEO問題を解決近年、それに伴ってフロントエンドSPAフレームワークの興起;前後の分離によるSEO問題は、フロントエンドの攻撃ライオンごとに遭遇していると信じられています.ここではVueを例にSEOを解決する方法を説明します.
2.1.1 vue------SSR
まずvue 2.xは、Vueサービス・エンド・レンダリングの完全な構築を直接提供します.
Vue.jsはクライアントアプリケーションを構築するフレームワークです.デフォルトでは、Vueコンポーネントをブラウザに出力し、DOMの生成とDOMの操作を行うことができます.ただし、同じコンポーネントをサーバ側のHTML文字列としてレンダリングし、ブラウザに直接送信し、最後に静的タグ「ブレンド」をクライアント上で完全にインタラクティブなアプリケーションとしてマークすることもできます.
サーバレンダリングのVue.jsアプリケーションは、アプリケーションのほとんどのコードがサーバおよびクライアント上で実行できるため、「同構造」または「汎用」とみなすこともできる.
具体的なご利用案内-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.1.2 vue------Nuxt.js
サービス側レンダリングのアプリケーションを最初から構築するのはかなり複雑です.幸いなことにjsはこのすべてを非常に簡単にしました.Nuxtは、Vueエコに基づくより高度なフレームワークであり、サービス側でレンダリングされたVueアプリケーションの開発に極めて便利な開発体験を提供しています.さらにクールなのは、静的ステーションジェネレータとして使用することもできます.試してみることをお勧めします.
Nuxt.jsはUniversal Vueを作成する.jsアプリケーションのフレームワーク.
主な範囲はUIレンダリングであり、クライアント/サーバの分散を抽象化します.
メインプロジェクトライブラリまたはノードベースとして使用できるように、十分な柔軟性のあるフレームワークを作成することを目的としています.jsの現在のプロジェクト.
Nuxt.jsはVueを予め設定.jsアプリケーションサーバの開発は、より快適なすべての構成です.
さらにnuxt generateという別の導入オプションも提供します.静的に生成するVueを構築します.jsアプリケーション.この選択は、マイクロソフトサービスがWebアプリケーションを開発する次の重要なステップである可能性があると信じています.
フレームワークとしてNuxt.jsは、非同期データ、ミドルウェア、レイアウトなど、クライアントとサーバの間で開発を支援する多くの機能を提供しています.
以上がNuxtである.jsの公式紹介は、総じてNuxt.jsはVueベースのフレームワークで、ほとんどがvueのもので、例を見て研究するのも簡単です.全体的に良いフレームワークで、webpackの煩わしいものを配置する必要はありません.vue-ssrをより親民にすることができます.
個人的にnuxtの性価は少し低いと感じていますが、実は私はあなたがvue-ssrインタフェースで実現する必要がある機能を実現することをお勧めします.nuxtからこのように工事を構築する構想をより明確にすることができます.
2.2プレレンダー方式---prerender(SEO、ヘッドスクリーンの問題を解決)
ページ数が少なく、SSRに比べてプリレンダリングが簡単であるため、プリレンダリングはWebアクセス速度を大幅に向上させることができます.また、いくつかのmeatプラグインを組み合わせることで、SEOのニーズを完全に満たすことができます.
PrerenderサービスにはNodeJs環境サポートが必要ですが、以前のサーバ環境にNodeJsがない場合はインストールが必要です.
Webpackの構成は次のとおりです.
また、Prerenderはhistoryモードをルーティングする必要があります.hashモードを使用すると失効します.
一般的には、プリレンダリングの本質は、パッケージ化時にプラグインでjsを事前に実行し、コンテンツのあるhtmlをサーバに置くことです.これにより、爬虫類が自然に捕まえられ、最初の画面の問題も解決されます.
履歴:
10年前にはほとんどのサイトでASP、Java、PHPといったバックエンドレンダリングが行われていたが、jQuery、Angular、React、VueなどのJSフレームワークの台頭に伴い、フロントエンドレンダリングに転向し始めた.2014年からは同構造レンダリングが流行し始め、未来と称され、前後のレンダリングの長所を統合したが、あっという間に3年が過ぎた.当時、壮大なフレームワーク(rendr、Lazo)の多くが先駆者から先烈に変わった.同構造は果たして未来なのか.自分のプロジェクトはどのように型を選ぶのか.ヒットを追求し、固定モードにこだわるだけでなく、前後のレンダリングの「争い」の「コアポイント」を無視し、「ユーザー体験」の向上に注目すべきではないかと思う.
3つの概念を明確にします:“バックエンドレンダリング”は伝統的なASP、JavaあるいはPHPのレンダリングメカニズムを指します;「フロントエンドレンダリング」とは、JSを使用してページの大部分をレンダリングすることであり、現在流行しているSPA単ページアプリケーションを表す.「同性レンダリング」とは、フロントバックエンドがJSを共用し、初回レンダリング時にNodeを使用することをいう.jsはHTMLをまっすぐ出します.一般的に、ホモグラフィックレンダリングは前後の端の共有部分です.
1.ウェブサイトのレンダリングモード――サービス側のレンダリングとクライアントのレンダリング
1.1サービス側レンダリング(バックエンドレンダリングSSR)
バックエンドでHTMLをレンダリングする場合、ブラウザはサーバ計算後のユーザに提示される最終的なHTML文字列を直接受信し、ここでの計算はサーバが解析を経てサーバ側に格納されたテンプレートファイルで行われ、この場合、ブラウザはHTMLの解析のみを行い、また、オペレーティングシステムが提供するディスプレイ表示内容を操作するシステム呼び出しにより、HTMLに代表される画像をディスプレイに表示させる.
メリット:フロントエンドの消費時間が少ない(フロントエンドはhtmlを展示するだけ)、SEOに有利
デメリット:ネットワーク転送データ量が多く、サーバ演算リソースを占有(部分、少ない部分)しているため、responseから出るデータ量が少し大きくなり、テンプレートがフロントエンドのインタラクションやスタイルを変更したように連動して修正しなければならない
1.2クライアントレンダリング(フロントエンドレンダリングCSR)------SPA---単一ページアプリケーション
フロントエンドレンダリングとは、ブラウザがバックエンドからいくつかの情報を得ることです.angularjsのテンプレートファイル、JSONなどの各種データ交換フォーマットで包装されたデータ、さらには直接的な合法的なHTML文字列かもしれません.これらの形式は重要ではありません.重要なのは、これらの情報を組織して最終的に読み取り可能なHTML文字列を形成することはブラウザによって行われ、HTML文字列を形成した後、表示されることです.
メリット:ネットワーク転送データ量が少ない(サーバ圧力を減らす)
デメリット:先端に時間がかかり、SEOに不利
2.フロントエンドレンダリングで発生した問題---seoとトップスクリーンの問題
SEOはよくわかります.従来の検索エンジンではHTMLからのみデータが取り込まれるため、フロントエンドでレンダリングされたページは取り込めません.フロントエンドレンダリングでよく使用されるSPAは、すべてのJSをパッケージ化します.無視できない問題は、ファイルが大きすぎて、レンダリング前に長い時間待つことです.特にネットの速度が悪い場合、ユーザーに白画面の終了を待たせるのは良い体験ではありません.
2.1フロントエンドレンダリングSEO問題を解決近年、それに伴ってフロントエンドSPAフレームワークの興起;前後の分離によるSEO問題は、フロントエンドの攻撃ライオンごとに遭遇していると信じられています.ここではVueを例にSEOを解決する方法を説明します.
2.1.1 vue------SSR
まずvue 2.xは、Vueサービス・エンド・レンダリングの完全な構築を直接提供します.
Vue.jsはクライアントアプリケーションを構築するフレームワークです.デフォルトでは、Vueコンポーネントをブラウザに出力し、DOMの生成とDOMの操作を行うことができます.ただし、同じコンポーネントをサーバ側のHTML文字列としてレンダリングし、ブラウザに直接送信し、最後に静的タグ「ブレンド」をクライアント上で完全にインタラクティブなアプリケーションとしてマークすることもできます.
サーバレンダリングのVue.jsアプリケーションは、アプリケーションのほとんどのコードがサーバおよびクライアント上で実行できるため、「同構造」または「汎用」とみなすこともできる.
具体的なご利用案内-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.1.2 vue------Nuxt.js
サービス側レンダリングのアプリケーションを最初から構築するのはかなり複雑です.幸いなことにjsはこのすべてを非常に簡単にしました.Nuxtは、Vueエコに基づくより高度なフレームワークであり、サービス側でレンダリングされたVueアプリケーションの開発に極めて便利な開発体験を提供しています.さらにクールなのは、静的ステーションジェネレータとして使用することもできます.試してみることをお勧めします.
Nuxt.jsはUniversal Vueを作成する.jsアプリケーションのフレームワーク.
主な範囲はUIレンダリングであり、クライアント/サーバの分散を抽象化します.
メインプロジェクトライブラリまたはノードベースとして使用できるように、十分な柔軟性のあるフレームワークを作成することを目的としています.jsの現在のプロジェクト.
Nuxt.jsはVueを予め設定.jsアプリケーションサーバの開発は、より快適なすべての構成です.
さらにnuxt generateという別の導入オプションも提供します.静的に生成するVueを構築します.jsアプリケーション.この選択は、マイクロソフトサービスがWebアプリケーションを開発する次の重要なステップである可能性があると信じています.
フレームワークとしてNuxt.jsは、非同期データ、ミドルウェア、レイアウトなど、クライアントとサーバの間で開発を支援する多くの機能を提供しています.
以上がNuxtである.jsの公式紹介は、総じてNuxt.jsはVueベースのフレームワークで、ほとんどがvueのもので、例を見て研究するのも簡単です.全体的に良いフレームワークで、webpackの煩わしいものを配置する必要はありません.vue-ssrをより親民にすることができます.
個人的にnuxtの性価は少し低いと感じていますが、実は私はあなたがvue-ssrインタフェースで実現する必要がある機能を実現することをお勧めします.nuxtからこのように工事を構築する構想をより明確にすることができます.
2.2プレレンダー方式---prerender(SEO、ヘッドスクリーンの問題を解決)
ページ数が少なく、SSRに比べてプリレンダリングが簡単であるため、プリレンダリングはWebアクセス速度を大幅に向上させることができます.また、いくつかのmeatプラグインを組み合わせることで、SEOのニーズを完全に満たすことができます.
PrerenderサービスにはNodeJs環境サポートが必要ですが、以前のサーバ環境にNodeJsがない場合はインストールが必要です.
Webpackの構成は次のとおりです.
var PrerenderSpaPlugin = require('prerender-spa-plugin')
var webpackConfig = merge(baseWebpackConfig, {
plugins: [
// static js、css
new CopyWebpackPlugin([{
from: 'static'
}]),
new PrerenderSpaPlugin(
// dist
path.join(__dirname, '../dist'),
//
[ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
{
// ，
captureAfterTime: 50000,
//
ignoreJSErrors: true,
phantomOptions: '--web-security=false',
maxAttempts: 10,
}
),また、Prerenderはhistoryモードをルーティングする必要があります.hashモードを使用すると失効します.
一般的には、プリレンダリングの本質は、パッケージ化時にプラグインでjsを事前に実行し、コンテンツのあるhtmlをサーバに置くことです.これにより、爬虫類が自然に捕まえられ、最初の画面の問題も解決されます.