react seo_使用“以Google身份获取”测试React驱动的网站的SEO

react seo

by Patrick Hund

帕特里克·洪德(Patrick Hund)

使用“以Google身份获取”测试React驱动的网站的SEO (Testing a React-driven website’s SEO using “Fetch as Google”)

I recently tested whether client-side rendering would prevent websites from being crawled by search engine robots. As my article showed, React doesn’t seem to hurt search engine indexing at all.

我最近测试了客户端渲染是否可以阻止搜索引擎机器人抓取网站。 如我的文章所述 ，React似乎丝毫不影响搜索引擎索引编制。

Now I’m taking it to the next level. I’ve set up a sandbox React project to see exactly what Google can crawl and index.

现在，我将其提升到一个新的水平。 我已经设置了一个沙盒React项目，以确切地了解Google可以抓取和编制索引的内容。

设置一个小型Web应用程序 (Setting up a small web application)

My goal was to create a bare-bones React application, and minimize time spent configuring Babel, webpack, and other tools. I would then deploy this app to a publicly accessible website as quickly as possible.

我的目标是创建一个基本的React应用程序，并最大程度地减少配置Babel，webpack和其他工具所花费的时间。 然后，我将尽快将该应用程序部署到可公开访问的网站。

I also wanted to be able to deploy updates to production within seconds.

我还希望能够在几秒钟内将更新部署到生产中。

Given these goals, the ideal tools were create-react-app and GitHub Pages.

鉴于这些目标，理想的工具是create-react-app和GitHub Pages。

With create-react-app, I built a little React app within 30 minutes. It was just a matter of typing these commands:

使用create-react-app ，我在30分钟内构建了一个小的React应用。 只需输入以下命令即可：

create-react-app seo-sandboxcd seo-sandbox/npm start

I changed the default text and logo, played around with the formatting, and voilá — a web page that is rendered 100% on the client side, to give the Googlebot something to chew on!

我更改了默认的文本和徽标，并使用了格式，然后修改了voilá(在客户端呈现100％的网页)，让Googlebot可以尝试一下！

You can see my project on GitHub.

您可以在GitHub上查看我的项目。

部署到GitHub Pages (Deploying to GitHub Pages)

create-react-app was helpful. Almost psychic. After I did an npm run build, it recognized that I was planning to publish my project on GitHub Pages, and told me how to do this:

create-react-app很有帮助。 几乎是通灵的。 在执行npm run build之后 ，它认识到我打算在GitHub Pages上发布我的项目，并告诉我如何执行此操作：

Here’s my SEO Sandbox hosted on GitHub Pages: https://pahund.github.io/seo-sandbox/

这是我在GitHub Pages上托管的SEO沙箱： https ： //pahund.github.io/seo-sandbox/

配置Google Search Console (Configuring the Google Search Console)

Google provides a free suite of tools called the Google Search Console for web masters to test their websites.

Google提供了一套称为Google Search Console的免费工具，供网站管理员测试其网站。

To set it up, I added what they call a “property” for my web page:

为了进行设置，我在我的网页上添加了他们所谓的“属性”：

To verify that I am in fact the owner of the website, I had to upload a special file for Google to find to the website. Thanks to the nifty npm run deploy mechanism, I was able to do this in a matter of seconds.

为了验证我实际上是该网站的所有者，我必须上传一个特殊文件供Google查找到该网站。 感谢漂亮的npm run部署机制，我能够在几秒钟内完成此操作。

用Google的眼睛看我的网页 (Looking at my web page through Google’s eyes)

With the configuration done, I could now use the “Fetch as Google” tool to look at my SEO sandbox page the way the Googlebot sees it:

完成配置后，我现在可以使用“ Google抓取方式”工具来查看我的SEO沙箱页面，就像Googlebot看到的那样：

When I clicked on “Fetch and Render”, I could examine what parts of my React-driven page could actually be indexed by Googlebot:

当我点击“获取并呈现”时，我可以检查我的React驱动页面的哪些部分实际上可以被Googlebot索引：

到目前为止，我发现了什么 (What I’ve discovered so far)

发现1：Googlebot读取异步加载的内容 (Discovery 1: Googlebot reads content that is loaded asynchronously)

The first thing I wanted to test was whether Googlebot will not index or crawl parts of the page that are rendered asynchronously.

我要测试的第一件事是Googlebot是否不会索引或抓取异步呈现的页面部分。

After the page has been loaded, my React app does an Ajax request for data, then updates parts of the page with that data.

页面加载后，我的React应用程序对数据进行Ajax请求，然后使用该数据更新页面的某些部分。

To simulate this, I added a constructor to my App component that sets component state with a window.setTimeout call.

为了模拟这一点，我在App组件中添加了一个构造函数，该构造函数通过window.setTimeout调用来设置组件状态。

constructor(props) {    super(props);    this.state = {        choMessage: null,        faq1: null,        faq2: null,        faq3: null    };    window.setTimeout(() => this.setState(Object.assign(this.state, {        choMessage: 'yada yada'    })), 10);    window.setTimeout(() => this.setState(Object.assign(this.state, {        faq1: 'bla bla'    })), 100);    window.setTimeout(() => this.setState(Object.assign(this.state, {        faq2: 'shoo be doo'    })), 1000);    window.setTimeout(() => this.setState(Object.assign(this.state, {        faq3: 'yacketiyack'    })), 10000);}

→ See the actual code on GitHub

→ 在GitHub上查看实际代码

I used 4 different timeouts of 10 milliseconds, 100 milliseconds, 1 second and 10 seconds.

我使用了4种不同的超时，分别是10毫秒，100毫秒，1秒和10秒。

As it turns out, Googlebot will only give up on the 10-second timeout. The other 3 text blocks show up in the “Fetch as Google” window:

事实证明，Googlebot只会放弃10秒的超时。 其他3个文本块显示在“以Google身份获取”窗口中：

React Router混淆了Googlebot (React Router confuses Googlebot)

I added React Router (version 4.0.0-alpha.5) to my web app to create a menu bar that loads various sub pages (copied and pasted straight from their docs):

我在我的Web应用程序中添加了React Router (版本4.0.0-alpha.5)以创建一个菜单栏，该菜单栏加载各种子页面(直接从其文档复制和粘贴)：

Surprise, surprise — when I did a “Fetch As Google” I just got an empty green page:

令人惊讶，令人惊讶-当我进行“ Google抓取方式”时，我只有一个空白的绿色页面：

It appears that using React Router for client-side-rendered pages is problematic in terms of search engine friendliness. It remains to be seen whether this is only a problem of the alpha version of React Router 4, or if it is also a problem with the stable React Router 3.

从搜索引擎友好性的角度来看，将React Router用于客户端渲染的页面似乎是有问题的。 这是否只是React Router 4的alpha版本的问题还是稳定的React Router 3的问题还有待观察。

未来的实验 (Future experiments)

Here are some other things I want to test with my setup:

这是我要在设置中测试的其他一些事项：

• does Googlebot follow links in the asynchronously rendered text blocks?
  Googlebot是否遵循异步呈现的文本块中的链接？

• can I set meta tags like description asynchronously with my React application and have Googlebot understand them?

  我可以与React应用程序异步设置诸如描述之类的元标记，并让Googlebot理解它们吗？

• how long does it take Googlebot to crawl a React-rendered website with many, many, many pages?
  Googlebot需要多长时间来抓取具有许多页面的React呈现的网站？

Maybe y’all have some more ideas. I would love to read about them in the comments!

也许你们都有更多的想法。 我希望在评论中阅读它们！

翻译自: https://www.freecodecamp.org/news/using-fetch-as-google-for-seo-experiments-with-react-driven-websites-914e0fc3ab1/

react seo