AngularJS搜索引擎优化为静态网页（S3 CDN） [英] AngularJS SEO for static webpages (S3 CDN)
问题描述
我一直在想办法改善搜索引擎优化上承载的一个CDN像亚马逊S3 angularJS应用程序（即简单的存储，没有后端）。大部分的解决方案在那里的， PhantomJS ， prerender.io ， seo.js 等，靠后端识别？_ escaped_fragment _ URL抓取工具生成，然后从其他地方获取的相关页面。即使咕噜HTML的快照最终需要你这样做，即使你生成的时间提前快照页面。
I've been looking into ways to improve SEO for angularJS apps that are hosted on a CDN like Amazon S3 (i.e. simple storage with no backend). Most of the solutions out there, PhantomJS, prerender.io, seo.js etc., rely on a backend to recognise the ?_escaped_fragment_ url that the crawler generates and then fetch the relevant page from elsewhere. Even grunt-html-snapshot ultimately needs you to do this, even though you generate the snapshot pages ahead of time.
基本上是依靠使用的CloudFlare作为反向代理这解决方案，这似乎有点浪费因为大多数的安全机构等，他们提供的服务是完全多余的静态站点。建立一个反向代理自己的建议<一href="http://stackoverflow.com/questions/22383239/single-page-app-amazon-s3-amazon-cloudfront-$p$prender-io-how-to-set-up">here似乎也有问题，因为它需要要么一）路由所有AngularJS应用程序，我需要静态的HTML通过一个代理服务器，将可能妨碍性能或ii）设立一个单独的代理服务器为每个应用程序，在这一点上，我可能也设置建立一个后端，这是不相宜的，我的工作标尺。
This solution is basically relying on using cloudflare as a reverse proxy, which seems a bit of a waste given that most of the security apparatus etc. that their service provides is totally redundant for a static site. Setting up a reverse proxy myself as suggested here also seems problematic given that it would require either i) routing all AngularJS apps I need static html for through one proxy server which would potentially hamper performance or ii) setting up a separate proxy server for each app, at which point I may as well set up a backend, which isn't affordable at the scale I am working.
是这样做的反正，或静态地主办了巨大的搜索引擎优化基本上是不可能的AngularJS应用程序，直到谷歌更新其爬虫？
Is there anyway of doing this, or are statically hosted AngularJS apps with great SEO basically impossible until google updates their crawlers?
转贴到<一href="http://webmasters.stackexchange.com/questions/60601/angularjs-seo-for-static-webpages-s3-cdn">webmasters下面约翰·孔德的意见。
Reposted on webmasters following John Conde's comments.
推荐答案
如果您使用NG-斗篷以有趣的方式有可能是一个很好的解决方案。
if you use ng-cloak in interesting ways there could be a good solution.
我还没试过此我自己，但它应该工作在理论上
I haven't tried this myself, but it should work in theory
该解决方案是高度依赖于CSS，但它应该非常清楚。 例如，你有你的角度应用三种状态： - 指数（路径：＃/） - 关于（路径：＃/约） - 联系方式（路径：＃/触点）
The solution is highly dependent on CSS, but it should perfectly well. For example you have three states in your angular app: - index (pathname : #/) - about (pathname : #/about) - contact (pathname : #/contact)
基本情况的指标可以在太加，但会非常棘手，所以我会离开它现在。
The base case for index can be added in too, but will be tricky so I'll leave it out for now.
请你的HTML是这样的：
Make your HTML look like this:
<body>
<div ng-app="myApp" ng-cloak>
<!-- Your whole angular app goes here... -->
</div>
<div class="static">
<div id="about class="static-other">
<!-- Your whole about content here... -->
</div>
<div id="contact" class="static-other">
<!-- Your whole contact content here... -->
</div>
<div id="index" class="static-main">
<!-- Your whole index content here... -->
</div>
</div>
</body>
（这一点很重要，你把你的索引的情况下最后一个，如果你想让它更真棒）
(It's Important that you put your index case last, if you want to make it more awesome)
下一页让你的CSS像这样： -
Next Make your CSS look something like this:-
[ng-cloak], .static { display: none; }
[ng-cloak] ~ .static { display: block; }
只是，可能会工作的很好，你呢。 在MG-斗篷指令将让您的角度应用程序时隐时现的角度不加载，并会显示您的静态内容代替。谷歌将获得在HTML静态内容。 作为奖励，最终用户也可以看到很好的风格，而角负载静态内容。
Just that will probably work well enough for you anyway. The mg-cloak directive will keep your angular app hidden when angular is not loaded and will show your static content instead. Google will get your static content in the HTML. As a bonus end-users can also see well styles static content while angular loads.
您就可以得到更多的创意，如果你开始使用：目标伪选择在你的CSS。您可以在静态内容使用实际的联系，而只是让他们链接到不同的IDS。因此，在#index DIV确保你有联系的#about和#contact。注意失踪'/'中的链接。 HTML的id不能以斜线开头。
You can then get more creative if you start using :target pseudo selectors in your CSS. You can use actual links in your Static content, but just make them links to various ids. So in #index div make sure you have links to #about and #contact. Note the missing '/' in the links. HTML id's can't start with a slash.
然后，让你的CSS是这样的：
Then make your CSS look like this:
[ng-cloak], .static { display: none; }
[ng-cloak] ~ .static { display: block; }
.static-other {display: none;}
.static-other:target {display: block;}
.static-other:target ~ .static-main {display: none;}
您现在已经具有路由前角开始行动，工程全面运作的静态应用程序。
You now have a full functioning static app WITH ROUTINg that works before angular starts-up.
作为一个额外的奖金，当角启动时，它是足够聪明，#about有关自动转换为＃/和经验甚至不应该打破的。
As an additional bonus, when angular starts up it is smart enough to convert #about to #/about automatically, and the experience shouldn't even break at all.
另外，不要忘记搜索引擎优化的问题已完全得到解决，当然。我没有用这种技术还没有，因为我一直有一个服务器来配置，但我在它的工作原理为你很感兴趣。
Also, not to forget the SEO problem has totally been solved, of course. I've not used this technique yet, as I've always had a server to configure, but I'm very interested in how this works out for you.
希望这有助于。
这篇关于AngularJS搜索引擎优化为静态网页（S3 CDN）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
