node.js - 如何使用 React-Helmet 优化 SPA 的 SEO?

标签 node.js reactjs seo single-page-application meta-tags

我的项目是一个使用 react js 的单页应用程序。我听说谷歌可以抓取 javascript 页面,包括 react js 单页应用程序,而不需要服务器端渲染(尽管它通常对 SEO 更好)。

但是,当我使用网站管理员工具:获取并呈现为谷歌时,谷歌机器人看到的内容和我页面的访问者看到的内容都是空白的。 即使我可以将特定的 url 添加到谷歌索引,谷歌只使用我放在静态 index.html 文件中的标题和描述标签,它没有得到嵌套 react Helm 组件的标题和描述。有没有人有这方面的经验?非常感谢!

最佳答案

要回答您的问题,请确保您已填充必要的 es6 功能,谷歌爬虫的 javascript 功能可能非常有限,例如它没有 Array.find。您可以在此处阅读更多信息 https://github.com/facebookincubator/create-react-app/issues/746#issue-179072109

至于改善 SEO 的技巧,您可以使用以下技巧:

  1. 您可以使用 react-snapshot https://www.npmjs.com/package/react-snapshot 在构建时将页面预渲染为静态 html如果您的应用没有很多动态内容,这将非常有用。

  2. 您可以使用 prerender.io 等预渲染服务/使用带有预渲染功能的静态托管,如 netlify 或 bake.io。至于 prerender.io,你甚至可以自己托管!

关于node.js - 如何使用 React-Helmet 优化 SPA 的 SEO?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39053511/

相关文章:

javascript - 为react-native组件编写测试用例

seo - 启用 Google 站点链接搜索框?

javascript - 如何避免node.js的异步行为?

node.js - 用双引号替换 .toString() 单引号

javascript - 在 reactjs TestUtils 中找不到带有标签的组件

javascript - Canonical 更新为 JS - 这是 SEO 使用的吗?

wordpress - 针对特定用户角色在自定义帖子类型上禁用 Yoast SEO

javascript - 如果应用程序是子应用程序,`app.use(express.static` 似乎不起作用

javascript - 身份验证的架构和思考

reactjs - 带 Webpack 的 super 代理 : "require is not defined"