Question

在我的Angularjs应用中，我正在使用此https://github.com/vinaygopinath/ngMeta。

<title ng-bind="ngMeta.title"></title>
<meta property="og:title" content="{{ngMeta.title}}" />
<meta property="og:description" content="{{ngMeta.description}}" />

我的控制器代码是

app.controller('controller1',function($scope, $location , $http , $routeParams, ngMeta, $route){
    $scope.$route = $route;
    ngMeta.setTitle('site title');
    ngMeta.setTag('description', 'this is description');
    ngMeta.setTag('keywords', 'tag1, tsg2, tag3');
});

页面加载后一切正常，但Google正在显示{{ngMeta.description}} {{ngMeta.title}}这样的内容任何帮助解决这个问题。

Answer 1

SPA应用程序中的SEO不能以传统方式工作。您必须调整一些代码才能正确抓取您的网站。有两个步骤：

在meta中添加head标记，告诉抓取工具“这是一个高度依赖JS的网站，您必须以不同方式请求此页面。”

赞：<meta name="fragment" content="!">

您必须预先渲染您的网站（意味着：如果JS完全加载并且正确运行，请创建一个静态网站 - 正确的标题和描述），以及带有？_escaped_fragment_ =参数的网址。

IE：如果你有www.example.com，你的服务器需要为以下请求返回预渲染网站：www.example.com?_escaped_fragment_=

<强>为什么：

当抓取工具机器人看到meta标记时，它会请求包含?_escaped_fragment_=参数的网页，认为它会获得带有硬编码{{ngMeta.title}}和{{1}的预渲染页面}。

那么，如何预渲染您的网站？

使用：https://prerender.io/正如Stepan Suvorov所说，或者，结帐http://phantomjs.org/screen-capture.html或http://htmlunit.sourceforge.net/

<强>资源：

https://builtvisible.com/javascript-framework-seo/

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

Answer 2

我面临着与SEO反应应用程序类似的问题。

我建议处理这个的最好方法是使用预渲染。

我这样说是因为如果您的单页应用程序正在进行API调用，那么Google抓取工具不会等待ajax调用完成，因此从技术上讲，它不会通过API调用读取您的任何内容。我花了几天的时间用网站管理员来解决这个问题。

因此，您可以使用phantomJS或prerender.io（在内部使用phantomjs）。所以它的作用是，它解析你的html文件并用静态内容替换Javascript的内容，从而为机器人提供正确和完整的内容。

如果第一次加载页面，你可以直接从后端提供页面，所以这也有帮助。

angularjs ngMeta标题描述不是谷歌抓取

2 个答案: