Google控制檯抓取並呈現的確會顯示AJAX抓取的內容

我已經發布了一個reactjs網站，該網站依賴於AJAX請求（在graphQL API上發出POST請求，如果相關的話）來顯示數據。Google控制檯抓取並呈現的確會顯示AJAX抓取的內容

使用Google控制檯提取&呈現服務，我可以看到只有我的組件不需要調用任何API。任何基於AJAX的組件都不會被渲染。

谷歌取回&呈現確實顯示我2我的網站（谷歌vs訪客）呈現圖片，但都缺少AJAX內容。

服務器渲染在這種情況下是強制性的嗎？

我沒有robots.txt文件。

我做這樣的事情：

import React, { Component } from 'react'; 
import { observer } from 'mobx-react'; 
import { observable, runInAction } from 'mobx'; 
import axios from 'axios'; 

import ContributorList from '~/components/global/ContributorList'; 

import type { User } from '~/types'; 

import CSSModules from 'react-css-modules'; 
import styles from './style.less'; 

@observer 
@CSSModules(styles) 
export default class Footer extends Component { 
    @observable contributors: Array<User> = []; 

    async loadContributors() { 
     const { data: { 
      data: data 
     } } = await axios.post('/', { 
      query: ` 
      { 
       users { 
        id, 
        name, 
        slug, 
        avatar { 
         secure_url 
        } 
       } 
      } 
      ` 
     }); 

     runInAction(() => { 
      this.contributors = data.users; 
     }); 
    } 

    componentDidMount() { 
     this.loadContributors(); 
    } 

    render() {  
     return (
      <div styleName='contributors'> 
       { 'Static content' } 
       <ContributorList 
        contributors={ this.contributors } 
       /> 
      </div> 
     ); 
    } 
};

在我的瀏覽器，我可以看到一切正常（「靜態內容」 +貢獻者罕見獲取異步）。但通過谷歌獲取和渲染，我看到2個屏幕截圖僅顯示「靜態內容」。

因此，我的動態內容未顯示在Google搜索結果中。

來源

2016-11-22 Komo

發佈一些相關的代碼。沒有附加信息很難查明問題 –

現在，所有人都在討論依賴於Ajax並使用客戶端技術呈現網站內容的漸進式Web應用程序（PWA）。

但是，這些技術根本不是SEO友好的，因爲Google無法索引傳統的Ajax請求和大多數現代請求。

由於您使用的是ReactJs，並且您希望Google爲您的網站編制索引，您必須使用服務器端渲染。

這會降低您的網站速度，同時Google可以抓取您的所有網頁並將其編入索引，同時用戶也可以在任何設備上查看它，甚至是舊設備。

當你想要建立一個PWA或現代網絡應用程序時，你必須回到基本的，一種稱爲優雅降級的舊技術，這意味着如果你從瀏覽器禁用JS仍然可以看到內容和您網站上的所有功能都是可行的。

這與Google對您的網站進行抓取並編制索引的方式相同。

有來自谷歌關於抓取內容（Ajax）的許多建議：

使用清潔的URL結構，並避免使用JS鏈接（JavaScript的：無效（0）;）
加載所有正在使用服務器端渲染
確保你的網站正在對所有設備（響應）
提交XML網站地圖
使用中，如果你有一個以上的URL結構規範鏈接（不recommen ded）

我們正在開發一個類似於您的新項目，使用reactjs構建，它將成爲世界上首個可以像其他任何網站一樣抓取它的PWA之一。

另外谷歌已經在他們的網站管理員博客上發表了一篇文章，談論PWA和像你這樣的現代網絡應用程序。

有關詳情，請此鏈接 https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

關於robots.txt文件，它的建議添加機器人，任何網站，即使你沒有頁面阻攔，但你可能要阻止的AJAX請求和其他惱人的爬蟲。

來源

2016-11-29 09:13:42

Google控制檯抓取並呈現的確會顯示AJAX抓取的內容

回答

相關問題