標籤：
現在的項目的為了更好的分工明確，降低耦合都開始採用前後端分離的形式進式開發，我們也採用這種開發形式，前端用angular開發。雖說剛開始也遇各種坑，但是後期熟悉了之後簡直爽呆。一個比較大的坑就是SEO問題，前後端分離頁面的路由一般都是放在前端的，用hashBang的方式控制路由。但是這會出現一種情況頁面無法被搜尋引擎抓取，這對於SEO簡直就是災難。有問題就有解決辦法，一般的做法就是在伺服器加一個可以渲染出靜態頁面的中介軟體，類似於phantomjs,zimbile.js，只要發現是搜尋引擎的蜘蛛來爬的話就返回靜態頁面。而Prerender.io就一個現成的工具。 Prerender.io 是一個相容多種不同平台（包括Node，PHP和Ruby）的一個服務。該服務是完全開源的，但是如果你不想搭建一個你自己的SEO伺服器的話，你可以使用他們提供的解決方案。Prerender的人們認為，SEO是一件正確的事，並不是一個特權，他們已經做了一些了不起的工作來擴充他們的解決方案，添加了很多自訂的功能和外掛程式。 下面我們就來看看如何使用： 前端（用戶端）配置在定義了AngularJS代碼的app.js中，我們需要這句代碼添加到我們的路由配置中：$locationProvider.hashPrefix(‘!‘); 這個方法會重寫你的URL。相對於標準的地址http://localhost:3000/#/home你的url地址看起來將會是類似http://localhost:3000/#!/home 的形式
如果你使用的是html5模式(html5Mode)，你不會看到任何區別。
URL裡面的#!非常重要，因為它會告訴爬蟲你的程式有AJAX內容，需要它做一下AJAX抓取轉換。
angular.module(‘myApp‘).config([ ‘$locationProvider‘, function($locationProvider) { $locationProvider.hashPrefix(‘!‘); }]);
google等搜尋引擎會識別帶‘#!‘的地址把它轉變為‘?_escaped_fragment_=’。
比如，Google發現的地址
http://www.example.com/#!/user/123
它會向伺服器發送這種請求
http://www.example.com/?_escaped_fragment_=/user/123
url中沒有#的形式（採用html5 push state ) 1.配置index.html 要在首頁的<head>中<meta name="fragment" content="!">。這個meta標籤將告訴搜尋引擎的爬蟲，這個網站有動態JavaScript內容需要爬取。<base href="/"> 2.配置app.js 相比上邊的配置會多一行代碼。
angular.module(‘myApp‘).config([ ‘$locationProvider‘, function($locationProvider) { $locationProvider.hashPrefix(‘!‘); $locationProvider.html5Mode(true); }]); 如果採用html5mode的形式，Google發現url後會在後邊加上?_escaped_fragment_= 比如，Google發現的地址
http://www.example.com/user/123http://www.example.com/user/123?_escaped_fragment_=
<IfModule mod_headers.c> RequestHeader set X-Prerender-Token "your token"</IfModule><IfModule mod_rewrite.c> RewriteEngine On # Don‘t rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] <IfModule mod_proxy_http.c> RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR] RewriteCond %{QUERY_STRING} _escaped_fragment_ # Only proxy the request to Prerender if it‘s a request for HTML RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(.*) http://service.prerender.io/http://example.com/$2 [P,L] </IfModule> # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L]</IfModule>
要確保mod_headers、 mod_rewrite、mod_proxy_http三個模組都已經啟用。
配置成功後在prerender.io的cached pages會有它快取頁面面，這裡也可以自己手動添加。 搜尋引擎的抓取情況會這Crawl stats中反應出來。 接下來就看看網站的在各個搜尋引擎的收錄情況吧，google還是收錄比較快的，百度都無力吐槽了實在太慢了，反正我配置好一個星期之內百度是一點反應都沒有，不知道時間長了怎麼樣。暫時先這樣。 參考https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/https://scotch.io/tutorials/angularjs-seo-with-prerender-iohttp://www.oschina.net/translate/angularjs-seo-with-prerender-io
使用Prerender.io為angular項目做SEO
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
