AngularJS搜索引擎优化为静态网页(S3 CDN) [英] AngularJS SEO for static webpages (S3 CDN)

查看:202
本文介绍了AngularJS搜索引擎优化为静态网页(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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆