【问题标题】:Raw AngularJs markup appearing in Google search results page出现在 Google 搜索结果页面中的原始 AngularJs 标记
【发布时间】:2014-09-19 03:18:00
【问题描述】:

我们刚刚使用 AngularJS 更新了我们网站的部分内容——尤其是登录页面。当我在 Google 中查看搜索结果时,缓存页面和它自动显示的小 sn-p 是原始 Angular 标记。所以,很多{{model.username}}{{model.errorMessage}}

我不会链接结果,因为它太尴尬了。

知道如何让 Google 将页面实际存储为呈现与原始 HTML 的对比吗?

【问题讨论】:

    标签: javascript angularjs search caching search-engine


    【解决方案1】:

    如果您通过测试某些东西将您的尴尬转化为对我们所有人的社区服务,那就太好了,因为您看到的情况很少有人承认或想要重现自己。 :)

    众所周知,Google 相对(或非常,取决于您询问的对象)擅长忽略隐藏内容。当人们习惯于使用设置为“显示:无”或具有微小/不可读/白色字体的块来使用关键字填充内容时,他们实现了这种方式。

    您所看到的不仅仅是 SEO 的问题,所以我建议这样做是因为 prerender.io 之类的东西很棒,但它们只能解决这一问题。那些浏览器很慢的用户呢?好吧,事实证明 Angular 有一个很好的解决方案,叫做ngCloak。它会隐藏模板内容字段(ngModel 映射和绑定、表达式等),直到 Angular 准备好自行填充它们。

    这很容易实现;您只需要一小块 CSS(在早期加载的文件中,或直接嵌入到您的 HTML 页面中):

    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
    

    然后您将ngCloak 指令应用于受影响的项目或高级父项(例如您的 ng-view DIV):

    <div id="wrapper" ng-cloak>
        <!-- Page content here -->
    </div>
    

    这有点像 no-js 目标,但专门用于 AngularJS。

    您仍然希望向 Google 提供实际上材料的特定内容,但至少通过上述内容,您可以过滤掉其他所有内容。

    【讨论】:

      【解决方案2】:

      角度的 SEO 是一个非常大的问题/问题,具体取决于您的观点。我会先阅读http://www.ng-newsletter.com/posts/serious-angular-seo.htmlhttp://www.yearofmoo.com/2012/11/angularjs-and-seo.html 来帮助您入门。

      总结一下您的主要选择:

      • 更改您的路由系统以使用 hashbang (#!)。然后像 google 和 facebook 这样的网站会在查询你的页面之前将 hashbang 转换为_escaped_fragment_。这使您的服务器有机会返回不同的 html。

      • 使用 http://prerender.io 之类的服务,它会为您预渲染和缓存您网站的渲染版本,这些版本将代替您的网站提供给 google。

      例如,分享到redditstumbleupon 等内容仍然存在问题,因为它们很懒,不想开发以迎合基于角度的网站。因此,在某些情况下,您必须发挥创造力。


      更新:我们在最近的一个项目中所做的一件事是查看各种用户代理,以确定抓取系统是否正在请求页面信息。这样我们就可以提供我们喜欢的任何东西。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-08-18
        • 2016-05-18
        • 1970-01-01
        • 2014-01-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多