您如何在Google富集摘要测试工具中测试AngularJS网络应用程序的 schema.org 元标记

How do you test the schema.org metatags of an AngularJS webapp in Google richsnippets testing tool?

本文关键字：应用程序 网络 AngularJS schema org 测试 Google 测试工具      更新时间：2023-09-26

网站的代码是用AngularJS javascript框架生成的。当我访问网页时，它会完整地显示页面，但源代码是由源代码中未完全存在的部分加载的，例如：

<body>
    <div class="wrapper">
        <div ng-include="'partials/header.html'"></div>
        <div id="ng-view" ng-view class="main_view wrapper"></div>
        <!--div ng-include="'partials/home_content.html'"></div-->
        <a href="#"> </a>
    </div>
    <div ng-include="'partials/footer.html'" class="footer"></div>
</body>

如何在 https://www.google.com/webmasters/tools/home 中测试部件代码（页眉、内容、页脚）？

我正在使用一种名为prerender的软件来确保爬虫可以实际抓取我的单页应用程序站点以对其进行索引。

所以我只是给测试工具一个预呈现的页面来处理，我认为这是一个好主意，因为这正是爬虫无论如何都会获得你的页面的方式。

我正在使用预渲染，它可以安装在您的服务器上或通过他们的服务器使用（有价格），更多信息在：https://prerender.io/documentation

尝试将生成的页面源代码粘贴到此处的"HTML"选项卡中：

http://www.google.com/webmasters/tools/richsnippets

以下是一些资源，可帮助您获取生成的页面源的副本：

  • 查看生成的网页来源的最佳方式？
  • http://thismightbeuseful.com/website/how-to-view-generated-source-in-chrome-work-around/

更新：

这里有一个更好的、更新的 HTML 测试工具：

https://developers.google.com/webmasters/structured-data/testing-tool/

这篇文章更详细地描述了它。

你需要使用像phantomjs这样的无头浏览器来使谷歌索引你的angular js web应用程序。

这个想法是，如果搜索引擎遇到您的JavaScript应用程序，那么您有权将搜索引擎重定向到另一个提供页面完整渲染版本的URL。

检查 http://googlewebmastercentral.blogspot.com.au/2009/10/proposal-for-making-ajax-crawlable.html

我遇到了类似的问题。 一旦Google测试工具达到"ng-if"，它就不会继续前进，因为它不会做出那个（ng-if）决定。 不幸的是，这就是我们的结构化数据所在。

我相信我可能会尝试将 SD 插入 DOM 中，回到 ng-if 的外部和之前。 希望在接下来的一两天内工作。 如果您找到了使用Angular和Google SD的任何解决方案，请告诉我。

编辑：顺便说一下，我不认为这只是分离代码，以便可以使用Google测试工具或无标题浏览器进行测试。这是关于谷歌即将看到它的网站交付给谷歌。 如果它仍然在那些同样无法到达的地方，那么仅仅为了测试而将其分开并没有多大好处。

谢谢！

相关文章：