Question

我已经发布了一个reactjs网站，该网站依赖于AJAX请求（如果相关，则使用graphQL API上的POST请求）来显示数据。

使用google console fetch＆amp;渲染服务，我可以看到只有我不需要调用任何API的组件才会被渲染。任何基于AJAX的组件都不会被渲染。

Google fetch＆amp;渲染确实向我展示了2个我网站的渲染图片（google vs 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>
        );
    }
};

在我的浏览器中，我可以看到一切正常（'静态内容'+贡献者很少异步获取）。但是通过谷歌抓取和渲染，我看到2个屏幕截图只显示“静态内容”。

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

Answer 1

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

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

由于您使用的是ReactJs，并且您希望Google为您的网站编制索引，因此您必须使用服务器端呈现。

这会降低您的网站速度，同时Google可以对您的所有网页进行抓取和索引，用户也可以在任何设备上查看，甚至是旧设备。

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

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

Google提出了许多关于抓取Ajax内容的建议：

使用干净的URL结构并避免使用JS链接（javascript：void（0）;）
加载所有使用服务器端渲染
确保您的网站正在使用所有设备（响应）
提交XML站点地图
如果您有多个网址结构（不推荐使用），请使用规范链接

我们正在开发一个与您类似的新项目，使用reactjs构建，它将成为世界上第一批通过上述方式谷歌可以像任何其他网站一样抓取它的PWA之一。

谷歌也在他们的网站管理员博客上发表了一篇文章，谈论了PWA以及像你这样的现代网络应用程序。

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

关于robots.txt文件，即使您没有要阻止的网页，也建议为任何网站添加机器人，但您可能希望阻止ajax请求和其他恼人的抓取工具。

谷歌控制台获取＆amp; render确实显示了AJAX获取的内容

1 个答案: