ajax - Google console fetch & render 确实显示 AJAX 获取的内容

Question

我发布了一个 reactjs 网站，该网站依赖 AJAX 请求(如果相关，则在 graphQL API 上发送 POST 请求)来显示数据。

使用 google console fetch & render 服务，我可以看到只有不需要调用任何 API 的组件才会被渲染。根本不会呈现任何基于 AJAX 的组件。

Google fetch & render 确实显示了我网站的 2 张渲染图片(google 与 visitor)，但都缺少 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>
        );
    }
};

在我的浏览器中，我可以看到一切正常(“静态内容”+ 很少异步获取的贡献者)。但是通过 google fetch and render，我看到了 2 个只显示“静态内容”的屏幕截图。

因此，我的动态内容不会出现在谷歌搜索结果中。

Answer 1

现在所有人都在谈论依赖 Ajax 并使用客户端技术呈现网站内容的渐进式网络应用程序 (PWA)。

但这些技术对 SEO 一点都不友好，因为 Google 无法索引经典的 Ajax 请求和大多数现代请求。

由于您使用的是 ReactJs，并且您希望 Google 将您的网站编入索引，因此您必须使用服务器端渲染。

这会减慢您的网站速度，同时 Google 可以抓取您的所有页面并将其编入索引，而且用户可以在任何设备上查看它，甚至是旧设备。

当你想构建一个 PWA 或一般的现代网络应用程序时，你必须回到基础，使用一种称为优雅降级的旧技术，这意味着如果你从浏览器中禁用 JS，你仍然可以看到内容并且您网站上的所有功能都可用。

这与 Google 抓取您的网站并将其编入索引的方式相同。

Google 有很多关于抓取 Ajax 内容的建议:

1. 使用简洁的 URL 结构并避免使用 JS 链接(javascript:void(0);)
2. 加载所有使用服务器端渲染
3. 确保您的网站适用于所有设备(响应式)
4. 提交 XML 站点地图
5. 如果您有多个 URL 结构，请使用规范链接(不推荐)

我们正在开发一个与您的项目类似的新项目，该项目使用 reactjs 构建，它将成为世界上首批 Google 可以通过执行上述几点来像抓取任何其他网站一样抓取它的 PWA 之一。

Google 还在他们的网站站长博客上发表了一篇文章，讨论 PWA 和任何像您这样的现代网络应用。

有关更多详细信息，请查看此链接 https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

关于 robots.txt 文件，建议为任何网站添加机器人，即使您没有要阻止的页面，但您可能想要阻止 ajax 请求和其他烦人的爬虫。