基於scrapy-splash進行單頁應用網站seo處理

提示，本文暫時對百度收錄有不肯定性。(google/bing等收錄成功，並能正常自定義title,meta,content)

單頁應用在於seo上有較大侷限

• 異步加載的數據
• 異步加載的組件

實現原理

• scrapy-splash：基於docker的無頭瀏覽器，相似phantomjs（16年已經再也不更新了），同時提供api能夠獲取網頁內容（能夠把他做爲一個沒有界面的瀏覽器，會按照正常瀏覽器的順序打開網頁加載依賴，發送請求，渲染界面）
• nginx或其餘中間件中判斷當前訪問的請求頭爲baiduspider/googlebot之類的搜索引擎頭，利用proxy_pass將請求轉至本身寫的node服務或者響應的服務
• 咱們的node服務能夠執行get請求向scrapy-splash獲取經nginx轉向獲得的頁面總體，將這個頁面由node返回給搜索引擎，這裏還能夠補充諸如301等跳轉的功能，自定義強度高

實現步驟

• 1.下載docker安裝～splash，參考文章最後的安裝連接
• 2.執行splash,值得注意的是對於單頁應用須要關閉私有模式https://splash-cn-doc.readthedocs.io/zh_CN/latest/faq.html#how-do-i-disable-private-mode

  docker run -d -p 8050:8050 --memory=4.5G --restart=always scrapinghub/splash:3.1 --disable-private-mode --maxrss 4000
      -d後臺運行 --memory最高佔用內存爲4.5G --restart崩潰重啓 --disable-private-mode 用於處理單頁應用的私有模式 --maxrss 內存緩衝
  複製代碼

• 3.開啓完畢以後你能夠嘗試一下,檢測是否能渲染百度的界面
  • http://127.0.0.1:8050/render.html?url=http://www.baidu.com
• 4.至爲關鍵的一步nginx配置

  upstream spider_server {
          server localhost:3000;
      }
      server {
          listen       80;
          server_name  www.test.com;
          # 當UA裏面含有Baiduspider,或者相關的spider的時候，流量Nginx以反向代理的形式，將流量傳遞給spider_server，文件相關不須要處理
  	    set $prerender 0;
      	if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare| W3C_Validator") {
          	set $prerender 1;
     	    }
      	if ($args ~ "_escaped_fragment_") {
          	set $prerender 1;
      	}
      	if ($uri ~* "\.(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|svg|eot)") {
          	set $prerender 0;
      	}
  	    if ($prerender = 1) {
              proxy_pass  http://spider_server;
          }
          root /Users/dist; # 本身的dist目錄
      	try_files $uri $uri/ @router;   # 這個是history模式須要的
      	index index.html index.html;
      }
  
  複製代碼

  • 4.1 如何檢測這個nginx配置有沒錯呢，本身拿postman設置個請求頭爲baiduspider發給本身的80看看可否轉到3000端口唄～
• 5.node服務配置
  • 這一步相對簡單，主要考慮緩存與301，這樣下一次搜索引擎獲取頁面時的相對速度就能提高

  memory-cache控制緩存釋放，在首次訪問時採用cache.get(req.originalUrl)對當前的連接及對應數據進行緩存在下次訪問時便可彈出cache.put(req.originalUrl,result.data)
  if (無效頁面) {res.redirect(301,'www.xx.com')}
  
  複製代碼

  • 咱們能夠採用pm2對該應用進行管理（負載均衡及掛機重啓）

  pm2 start xxx --max_memory_restart 99999M
  複製代碼

• 6.究極重要，超級有效的是在作完以上步驟以後最好爲你的網站生成一個全網的sitemap!並提交到谷歌searchconsole百度站長！谷歌生效時間估計在3天內，百度。。。我至今3個月過去還不行（評分降低/海外地址太卡/目前方案不兼容百度/被判斷做弊等）。但幸運的是我司只作海外
  • 相關內容
    • npm install sitemap node-schedule 每晚定時任務生成sitemap,保證新頁面及時被google收錄
    • pm2 xxxx 掛掉重啓

  <url>
      <loc>https://www.xxx.com/sitemap</loc>
      <changefreq>daily</changefreq>
      <priority>0.8</priority>
  </url>
  複製代碼

參考文獻

• www.deboy.cn/prerender-v… （對搜索引擎的請求頭判斷後基於prerender預渲染完畢後返回給搜索引擎，同時緩存，避免下一次對服務器的訪問）
• ahrefs.com/blog/zh/seo… （深刻理解谷歌搜索引擎的優化策略）
• www.jianshu.com/p/e1520ea19… （splash的基本操做,及安裝過程）
• splash-cn-doc.readthedocs.io/zh_CN/lates… （文檔！！重點）