2

Alright so I've been writing Backbone.js apps for over a year now and I love the framework model. I've learned how to avoid all the pitfalls and such, but there's one area I'm still quite weak as a single page app developer: how to SEO a public facing app.

I'm working on a blog project, and the easiest solution to my mind is to have a server generated list of all blog entries visible as a link from the /blog section that is rendered on page load, and to ensure that when hitting a /blog/:id url, the server loads the blog content into the very first div on the page, which will be set as display:none.

My question is if this should be sufficient for a good search engine index? SEO is still my weakest skill as a developer. Are there techniques for making sure a search engine crawls this content first and is able to use that content for its more complex indexing?

Also, is there a way to blacklist the generated app content on the page as I know Google has been testing crawling JavaScript apps? In my mind that could never be done at the level it needs to be without some sort of standard browser level event that can be triggered on a full page render or after all data has been loaded.

Anyways, this is more of an ambiguous ticket I know, but it could end up being useful to people in the future if we get a collection of good answers here.

Throttlehead
  • 1,927
  • 6
  • 22
  • 36
  • Remember, many crawlers will actually simulate how the website looks to the user making it harder to do these types of tricks! – bren Jul 20 '15 at 16:21
  • Yeah I know Google is working on it. My though is that by putting the blog content in the first div, the crawler will parse that as the content first before even rendering the page. I'm more curious as to how CSS affects crawling and if there are ways to mark content as more important to the crawlers. – Throttlehead Jul 20 '15 at 17:23
  • for me a snapshot is the best "safe bet", however, requires more work – pedrommuller Jul 20 '15 at 19:17

1 Answers1

13

Most of the major search engines (including Google) are rendering the content they receive from the website, in our (Google's) case with something close to a headless browser, so whatever you do for the users the search engines will also get it. Serving different stuff to search engines however will get you into a dangerous area, named cloaking.

Hiding the content with a display:none might backfire on you. We are giving hidden content way less weight in ranking.

methode
  • 5,348
  • 2
  • 31
  • 42
  • could it still backfire when using responsive design? i.e. all content shown on desktop but some hidden for design reasons on mobile? – stukerr Jul 21 '15 at 12:53
  • 2
    At the moment we're using the desktop content in mobile search, so no. Can't speak for other search engines though – methode Jul 21 '15 at 12:55
  • Is it safe to assume that hidden content that can be made visible by the user (e.g. tabbed content) is not weighted down as much as totally invisible content, if at all? – redburn Jul 22 '15 at 10:42
  • Thanks for the insight methode. I could position the decoy content off the page instead. I could also ensure the page's html structure is rendered on page load by the server, and then initialize and append my javascript components to div structures that are already there. As long as the 'all articles' page is clearly visible to Google as a plain link, they should get indexed correctly. I'll document my findings in a blog post and return here to finish out this Stack thread in the near future. – Throttlehead Jul 27 '15 at 22:07