问题
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?
回答1:
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/
回答2:
Search engine crawler does not run javascript, so you have to use separate web server to generate static pages for your site's content, such as phantom.js. I believe it can solve your metadata problem too.
You might want to check an article about SEO for Single Page Applications.
来源：https://stackoverflow.com/questions/18812054/emberjs-and-other-single-page-web-apps-how-do-you-handle-seo-fb-opengraph