如何在dev模式下查看SEO meta标签？

Question

我有reactjs应用程序与express服务器。我想有我的应用程序作为搜索引擎优化友好。我使用react-helmet来添加SEO meta标签。如何在开发模式下检查SEO meta标签？

Answer 1

如果您使用的是react客户端渲染。你应该能够在chrome dev工具中看到它们。(如果您不知道如何在chrome浏览器中打开dev工具，那么只需在页面的任意位置单击鼠标右键并单击inspect elements，然后转到elements面板即可。)

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

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

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

但是如果你想确保你的网页能够被所有的搜索引擎理解，比如必应，duckduckgo，百度(可能会执行javascript，也可能不会执行javascript)，那么你要么需要使用react-static / prerender之类的工具对所有页面进行预渲染，要么开始在服务器端渲染你的网页，并直接提供html。

Answer 2

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

ngrok http 3000

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

Answer 3

通过下面提到的方式查找所有元详细信息

在浏览器中查看源代码检查element

• https://checkseo.io

中的