如何在开发模式下检查 SEO 元标记？

编程问答 2022-05-31

问题描述

我有带有快速服务器的 reactjs 应用程序。我想让我的应用程序对 SEO 友好。我正在使用 react-helmet 添加 SEO 元标记。如何在开发模式下检查 SEO 元标记？

解决方法

如果您使用的是 React 客户端渲染。您应该能够在 chrome 开发工具中看到它们。 （如果您不知道如何在 chrome 浏览器中打开开发工具，那么只需右键单击页面中的任意位置，然后单击检查元素并转到元素面板。）

请记住，只有当您的包完全下载到用户浏览器上时，才会执行 React 客户端渲染。

Google 现在在索引页面时也会执行 javascript。如果对您来说最重要的是谷歌搜索引擎，那么您很好。

如果您的网站部署在那里供公众访问，您可以前往 google search console 调试谷歌如何查看您的网站

但是，如果您想确保所有搜索引擎（例如 bing、duckduckgo、baidu（可能会或可能不会执行 javascript））都能理解您的网页，那么您要么需要使用某种工具对所有页面进行预渲染像 react-static / prerender 或开始在服务器端呈现您的网页并直接提供 html。

,

您可以在开发服务器端口上启动 Ngrok 会话。

ngrok http 3000

Ngrok 会给你一个 URL，你必须把这个 URL 放在 https://metatags.io

,

找到下面提到的所有元细节

  1. 使用查看源代码
  2. 在浏览器中检查元素
  3. https://checkseo.io
expressreact-helmetreactjsreactjs