AngularJS搜索引擎优化为静态网页（S3 CDN）静态、搜索引擎优化、网页、AngularJS
我一直在想办法改善搜索引擎优化上承载的一个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作为反向代理这解决方案，这似乎有点浪费因为大多数的安全机构等，他们提供的服务是完全多余的静态站点。建立一个反向代理自己的建议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?
转贴到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.
希望这有助于。
