【问题标题】:AngularJS SEO - Once and for allAngularJS SEO - 一劳永逸
【发布时间】:2017-06-16 21:02:54
【问题描述】:

我在一个有 15 个子站点和 13 个不同架构页面的大项目中。 目前,该站点基于ui.route 用于所有页面,我的数据集由$http 角度请求。 在搜索控制台上进行测试和试验后,看起来除了主页和来自$http 请求的数据之外,谷歌看不到我的所有页面。 我做错了什么?

到目前为止我正在做的是:

在<head>中设置基本标签:

<base href="/" />

创建 .htaccess:

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

添加到app.config:

$locationProvider.html5Mode(true);

以我的app.config为例:

function createState(name) {
    return {
        url: '/' + name + '/:id',
        templateUrl : 'templates/pages/' + name +'.html',
        controller : 'singlePage',
        resolve: {
           pageData: function(getData, $stateParams) {
                var params = $stateParams;
                params.type = this.self.name;
                return getData.getPageData(params.type, params)
           }
        }
    }
}
.state('info', createState('info'))
.state('news', createState('news'))
.state('event', createState('event'))

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

【问题讨论】:

  • 嗯,google crawl bot 可以执行 JavaScript(这个功能是不久前实现的)。但是机器人仍然像以前一样抓取 URL。它正在检查 HTML 标记中所有 a-Tag 的 href 属性并跟进它们。如果您使用ui.router 提供的 JavaScript 状态更改功能,机器人将永远无法访问此链接。它也无法识别 HTML5 URL 路由更改。 -> 所以不会抓取/索引任何页面。
  • 我可以创建一个答案,提供我上面所说的内容。我还可以为您提供一个解决方案,如何使爬虫机器人可以看到其他 URL。
  • @lin 我真的很感谢你的完整回答!

标签: javascript angularjs .htaccess seo


【解决方案1】:

为什么 google 爬虫不跟随 UI 路由器创建的我的链接/状态更改?

好吧,google crawl bot 能够执行 JavaScript(这个功能是不久前实现的)。 但是机器人仍然像以前一样抓取 URL。它正在检查 href 的属性 HTML 标记中的所有a-Tags 并跟进它们。如果您使用的是 JavaScript 状态 更改ui.router 提供的功能,机器人将永远无法访问此链接。 它也无法识别 HTML5 URL 路由已更改。 -> 所以不会抓取/索引任何页面

您可以使用一些基本的 SEO 功能来抵消这种情况。但是你还是有一些限制 需要处理。其中一些限制是:

  • 元标记提供的社交内容。 (在使用og:image 等时在facebook 上共享页面将不适用于AngularJS E2E 绑定)
  • 用于 E2E 绑定的 title 标签将无法被社交媒体共享识别。

如何让抓取机器人为您的网页编制索引? 这很简单,只需创建一个包含所有 URL 的 sitemap.xml,将其上传到您的网络服务器并使用 google webmastertools 进行注册。 google bot 现在将抓取您在sitemap.xml 中提供的所有 URL,最后它会将您的页面/URL 编入索引! =)

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 <url>
  <loc>http://example.com/</loc>
 </url>
 <url>
  <loc>http://example.com/anotherside/</loc>
 </url>
 <url>
  <loc>http://example.com/search/param1/param2</loc>
 </url>
</urlset> 

我们这样做了,而且效果很好。您可以手动创建sitemap.xml。我们更进一步并自动化了这些东西。我们的 XML 和 ui.routes 在我们的 Web 应用程序的后端创建。所以我们有一个配置 JSON 文件,我们在其中配置所有路由。脚本创建 XML 和 JavaScript ui.routes 自动地。

这是我们所做的结果:https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=site:linslin.org&start=0

如果您想构建一个漂亮的 SEO/社交优化页面,请不要使用 AngularJS 等 SPA 应用程序。我也不喜欢创建预编译器。创建 SPA 应用程序并预​​编译它是没有意义的。在创建预编译器之前,您应该回到根源,使用 PHP、Node.JS、Java 等创建 Web 应用程序。

【讨论】:

  • 非常感谢!你有一种简单的方法来自动生成站点地图(处理角度路线)?
  • 我们创建了一个自定义脚本。但是很抱歉。我们不会分享这个。
  • 嗯,我不知道。你必须自己做。
  • 您可以使用botmap.io生成站点地图,它支持JavaScript网站
【解决方案2】:

Google bots 不编译 JavaScript,ui-router 在这里不起作用,所以当 google bots 来抓取 URL(无论 url 是什么)时,它总是会获取网站的索引页面。在服务器端通过检查用户代理检测机器人,然后您可以使用 phantomjs 加载角度应用程序并为机器人编译 html。(这是我用于我的应用程序的内容。在服务器上我有节点 js)

阅读更多来自here

【讨论】:

  • 预编译根本不是一个好的解决方案。有很多限制和问题。在将 SPA 应用程序与预编译器混合之前,我更愿意创建一个基于后端的应用程序(PHP、Node、Java 等)。
  • 感谢您的宝贵意见和回答。我要学很多东西。
  • 只为谷歌机器人预编译很好,甚至被谷歌推荐为一种解决方法。
猜你喜欢
  • 2016-07-20
  • 1970-01-01
  • 2016-09-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-11
相关资源
最近更新 更多