AngularJS SEO - 一劳永逸 [英] AngularJS SEO - Once and for all
问题描述
我正处于一个包含15个子站点和13个不同架构页面的大型项目中。
目前，该网站基于 ui.route 所有页面和我的数据设置 $ http 角度要求。
在搜索控制台上进行测试和试用之后，看起来谷歌看不到我的所有页面，除了主页和来自 $ http 请求的数据没有显示。
我做错了什么？
I'm in a big project with 15 sub sites and 13 different schema pages.
Currently, the site is based on ui.route for all pages and my data set by $http angular request.
After tests and trials on search console its looks like google don't see all my pages except the home page and data from $http request don't showing up.
What I'm doing wrong?
在< head> 中设置基本代码：
Set base tag in the <head>:
<base href="/" />
创建.htaccess：
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
添加到 app.config ：
Add to app.config:
$locationProvider.html5Mode(true);
符合我的 app.config ：
Exemple to my 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抓取工具不会关注我的UI路由器创建的链接/状态更改？
好吧，google crawl bot能够执行JavaScript（此功能不久前已实现）。
但是机器人仍然像往常一样抓取网址。它正在HTML标记中检查
的所有 a -Tags的 href 属性并跟进它们。如果您使用的是由$ code> ui.router 提供的JavaScript状态
更改功能，则机器人将永远无法关注此链接。
它也无法识别已更改的HTML5 URL路由。 - >所以没有页面会被抓取/索引
Well, google crawl bot is able to execute JavaScript (this feature was implemented not long ago).
But the bot is still crawling URL like all time before. It is checking the href attribute of
all your a-Tags in your HTML markup and follow them up. If you are using the JavaScript state
change functionality provided by ui.router the bot will never be able to follow this links.
It also does not recognize the HTML5 URL route changed. -> so no pages will be crawled / indexed
你可以用一些基本的SEO功能来抵消它。但是b $ b需要处理的还有一些限制。其中一些限制是：
You can counteract that with some basic SEO functionalities. But there a still some limitations you need to deal with. Some of this limitations are:
- 元标记提供的社交内容。 （使用
og：image等在Facebook上共享页面不适用于AngularJS E2E绑定） -
title与E2E绑定一起使用的标签将无法通过社交媒体形式识别。
- Social content provided by meta tags. (Sharing a page on facebook while using
og:image, etc. will not work with AngularJS E2E binding) - The
titletag used with E2E binding will not recognize by social media sharings.
如何让抓取机器人为您的网页编制索引？
这很简单，只需创建一个包含所有网址的 sitemap.xml ，将其上传到您的网络服务器并使用google webmastertools进行注册。谷歌机器人现在将抓取您在 sitemap.xml 中提供的所有网址，最后它将索引您的网页/网址！ =）
How to make the crawl bot indexing your pages?
This is pretty easy, just create a sitemap.xml including all your URLs, upload it to your webserver and register it by using google webmastertools. The google bot will now crawl all the URLs you provided in your sitemap.xmland finally it will index your pages/URLs! =)
<?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
。
We did this and it's working very well. You can create your sitemap.xml manually. We moved a step farther and automated this stuff. Our XML and ui.routes
are created on the backend side of our webapplications. So we have a configuration JSON file where we configure all our routes in. A script creates the XML and JavaScript ui.routes
automatically.
This is the result of what we did: 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应用程序。
If you want to build a nice SEO/Social optimized page, don't use SPA applications like AngularJS. I would also not prefer to create a precompiler. It makes no sense to create a SPA application and precompile it. Before creating a precompiler you should go back to the roots by using PHP, Node.JS, Java, etc. to create a webapplication.
这篇关于AngularJS SEO - 一劳永逸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
