EmberJS（和其他单页Web应用程序） - 如何处理不同页面的SEO，FB OpenGraph，Twitter等元数据？ [英] EmberJS (and other single page web apps) - How do you handle SEO, FB OpenGraph, Twitter, etc. metadata for different pages?
问题描述
你如何做到这一点？我们不能在页面加载后调整元数据，所以我的假设是，我们需要一个服务器端组件，该组件正在读取URL并在必要时插入正确的元数据。不幸的是，这似乎会使单页应用程序笨重，因为它现在必须向服务器请求更改页面。
有人解决了这个优雅吗？ / p>
您不必在单页应用程序中返回到服务器进行页面更改，您只需要确保您的服务器在完整页面请求到服务器时使用适当的元数据进行响应。
首先，您需要确保Ember正在使用真实的URL（'history'）而不是哈希网址。 URL的哈希部分始终保持浏览器本地，不会传输到服务器。所以如果你想要一个URL正确地共享（使用适当的元数据），你必须使用真正的网址。这将打开真正的网址。
App.Router.reopen（{
位置：'history'
}）;
如果有人首先在'/'那么你应该提供代表你的应用程序的主页的元数据（可能是一点点的真实内容）。如果有人首先在'/ posts / xyz'中点击您的应用程序，那么您应该使用元数据提供一个页面，并发送一些内容以发布 xyz 。无论哪种情况，页面都在浏览器中，您可以启动您的Ember应用程序，让其正常运行。当他们移动应用程序时，URL将被更新以反映其位置。这些URL是可共享的，应该让其他用户看起来完全一样。当这些URL被某种机器人（Google，Facebook等）击中时，它们将提供真实内容，并提供适当的元数据（OpenGraph标题等）。
这是一个我一直在做的应用程序，这样做。 http://galleries.cloudhdr.com/
As the title suggests, I am working on a single page application using Ember, but it is very important that individual pages are able to specify metadata for sharing (FB, Twitter) and have tailored SEO metadata.
How do you accomplish this? We can't adjust the metadata after pageload, so my assumption is that we need a server side component which is reading the URLs and inserting the correct metadata when necessary to the response. Unfortunately, this seems like it would make the single page app clunky as it would now have to make requests to the server for page changes.
Has anyone solved this elegantly?
You don't have to go back to the server for page changes within your single page app, you just have to make sure that your server responds with the appropriate metadata when a full page request makes it to the server.
First you'll want to make sure that Ember is using real urls ('history') and not hash urls. The hash portion of the url always stay local to the browser and is not transmitted to the server. So if you want a URL to be properly sharable (with appropriate meta data) you have to use real urls. This turns on real urls.
App.Router.reopen({
location: 'history'
});
If someone first hits your app at '/' then you should be serving up the meta data (and possibly a small bit of 'real' content) that represents the 'home page' of your app. If someone first hits your app at '/posts/xyz' then you should should serve a page with meta data, and some content for post xyz. In either case, once the page is in their browser you can fire up your Ember app and let it run like normal. As they move around the app, the URL will be updated to reflect their position. Those URLs are shareable and should get other users to be looking at exactly the same thing. And when those URLs are hit by a robot of some sort (Google, Facebook, etc...) then they serve real content, and appropriate meta data (OpenGraph header etc...)
Here's an app that I've been working on that does this. http://galleries.cloudhdr.com/
这篇关于EmberJS（和其他单页Web应用程序） - 如何处理不同页面的SEO，FB OpenGraph，Twitter等元数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
