关于React.js的文章喜欢指出,React.js对于SEO目的来说是很棒的。不幸的是,我从来没有读过你是如何做到这一点的。当url包含_escaped_fragment_
时,您是否只实现了https://developers.google.com/webmasters/ajax-crawling/docs/getting-started中的_escaped_fragment_
,并让Reaction在服务器上呈现页面,或者还有更多内容?
不依赖_escaped_fragment_
将是一件好事,因为可能并不是所有潜在的爬行站点(例如共享功能)都实现_escaped_fragment_
。
6条答案
按热度按时间hts6caw31#
我非常肯定,您看到的任何对SEO有好处的提升Reaction都与能够在服务器上呈现请求的页面,然后将其发送到客户端有关。因此,就搜索引擎而言,它将像任何其他静态页面一样被索引。
通过
ReactDOMServer.renderToString
实现服务器渲染。访问者将收到已经呈现的标记页面,一旦下载并运行,Reaction应用程序将检测到该页面。当ReactDOM.render
被调用时,它不会替换内容,而只是添加事件绑定。在接下来的访问中,Reaction应用程序将接管工作,进一步的页面将呈现在客户端上。如果您有兴趣了解更多这方面的内容,我建议搜索“通用的JavaScript”或“通用的React”(以前称为“同构的React”),因为它正在成为使用单一代码库在服务器和客户机上呈现的JavaScript应用程序的术语。
myss37ts2#
正如另一位应答者所说,你正在寻找的是一种同构的方法。这允许页面来自服务器,其中包含将由搜索引擎解析的呈现内容。正如另一位评论者提到的,这可能会让您觉得使用node.js作为服务器端语言很麻烦。虽然确实需要在服务器上运行Java脚本才能实现这一点,但您不必在Node中执行所有操作。例如,本文讨论如何使用Scala和Reaction实现同构页面:
Isomorphic Web Design with React and Scala
该文章还概述了这种同构方法的UX和SEO好处。
huwehgph3#
两个很好的示例实现:
尝试在打开和关闭…的情况下访问https://react-redux.herokuapp.com/,并在浏览器开发工具中查看网络,以查看不同的Java
n3h0vuf24#
我不得不不同意这里的许多答案,因为我设法让我的客户端React应用程序与谷歌机器人一起工作,完全没有SSR。
请看一下这里的答案。我最近才设法让它工作,但我可以确认到目前为止没有任何问题,googlebot实际上可以执行API调用并索引返回的内容。
ryevplcw5#
也可以通过
ReactDOMServer.renderToStaticMarkup
:类似于
renderToString
,除了这不会创建额外的DOM属性,如data-react-id
,Reaction在内部使用。如果您希望将Reaction用作简单的静态页面生成器,这将非常有用,因为去掉额外的属性可以节省大量字节。qlfbtfca6#
如果你关心你的网站在谷歌上的排名,你不需要做任何事情,因为谷歌的爬虫程序可以很好地处理JavaScript!你可以通过搜索
site:your-site-url
来查看网站的搜索引擎优化结果。如果你也关心你的站点的排名,比如百度,以及你的服务器端由PHP实现,也许你需要这个:react-php-v8js。