1

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

使用谷歌控制台获取和渲染服务，我可以看到只有我不需要调用任何 API 的组件被渲染。根本不会呈现任何基于 AJAX 的组件。

Google fetch & render 确实向我展示了我网站的 2 张渲染图片（谷歌与访问者），但两者都缺少 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 个仅显示“静态内容”的屏幕截图。

结果，我的动态内容没有出现在谷歌搜索结果中。

4

1 回答 1

0

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

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

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

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

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

这与 Google 抓取和索引您的网站的方式相同。

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

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

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

此外，谷歌还在他们的网站管理员博客上发表了一篇文章，讨论了 PWA 和任何像你这样的现代网络应用程序。

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

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

于 2016-11-29T09:13:42.040 回答