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

【问题标题】：How to check SEO meta tags in dev mode?如何在开发模式下检查 SEO 元标记？
【发布时间】：2021-04-13 07:41:54
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

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

您可以转到google search console 来调试如果您的网站部署在那里供公众访问，谷歌如何看待它

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

【讨论】：

【解决方案2】：

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

ngrok http 3000

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

【讨论】：

【解决方案3】：

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

【讨论】：