What strategies are "decoupled" drupal developers using for SEO?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
technicalknockout's picture

I'm working on a new project using the yeoman backbone generator and drupal as a json data service. If anyone can share any SEO-specificy insights, alternative strategies, or any other gotchas they've encountered, it would be greatly appreciated.

I'm working on a new project using the yeoman backbone generator and drupal as a json data service. In previous similar projects, I've used rails and prerender.io to generate static html specifically for SEO. Are there similar solutions for drupal? I'm weighing if our team should
a) place the html pages into drupal theme templates and have drupal serve the pages and JSON output
OR
b) just have a static html server totally separate and have drupal only serve JSON output.

I'm thinking the advantage of option 'a' is drupal could cache complete pages, but the drawback is we might need to duplicate templates for drupal to render and for backbone to render. The advantage of option 'b' is that we can just create the backbone templates but we would have to add another tool (like prerender.io) to render SEO-friendly output.

If anyone can share any SEO-specificy insights, alternative strategies, or any other gotchas they've encountered, it would be greatly appreciated.

Comments

Isomorphic

juampynr's picture

For http://www.lullabot.com, we made the front end application isomorphic, so you get a fully rendered page on the first request, which is great for SEO, social sharing and non-JavaScript applications such as Pocket.

There is a presentation and a video about the whole architecture.

Senior Developer at Lullabot
https://www.lullabot.com/who-we-are/juampy-nr

Very interesting, thanks for

technicalknockout's picture

Very interesting, thanks for sharing! For the timeline on the project I'm currently working on, might be too much new stuff for our team too tackle. Will definitely look into for upcoming projects tho :-)

Another approach is to rely

Greg Boggs's picture

Another approach is to rely on the hash bang syntax that Google supports because of Angular.

Semi-headless Drupal

majorrobot's picture

My company worked on a project with a similar issue — headless would make sense, but it would hurt SEO. However, using a little-known feature in hook_menu(), we were able to change how we served pages. This enabled front-end to use whatever framework they wanted, query data from Drupal via Ajax/json, and still have viable data for search engines to consume.

Of course, the hard part (if you don't want double the templates, is to use the same template code for both the server-side and client-side renders. Also, I haven't worked with yeoman, but I'm assuming it works as other frameworks might.

In your case, for the initial request, I would recommend generating json through Drupal and injecting that into templates through a lightweight use of Drupal's theming system. Asynchronous requests would only be served the json (and no template code).

So, the initial request would go something like this:

  1. Server receives request.
  2. Your hook_menu() routes the request to a page callback that queries the data you want.
  3. Your hook_menu() sets a 'delivery callback' (see chromix's answer here.
  4. The page callback hands your data off to your delivery callback.
  5. Your delivery call back transforms your data to json.
  6. It then calls theme('your_theme_function', $your_data). This allows you specify how your data gets fed into a blank page template. I recommend only using the basics of Drupal's theming layer so that front-end devs can have as much freedom as they want. I like to just stick my data blob into a variable called $content, and that's it (no html, css, etc.). You'll want to work with front-end devs to ensure that you can generate all the types of pages they need (though they're all just empty php files with a $content var).
  7. Your front-end would start with an empty tpl file, parse out $content and lay out the data however they like. In this case, they'd have $content as a string of json, and act appropriately. Let's say they start by throwing string that into a function called doLayout().

That's how search engines will see your page.

Now, if a user requests more data, browses, etc.

  1. AJAX hits the same route as above ... but let's say with '/data' appended to the end.
  2. You page callback does the same work as above.
  3. Your hook_menu() in this case, has a different delivery callback.
  4. This delivery callback transforms your data into json and then just echos it out. No template rendered.
  5. Front end receives the response and throws the json data into the same function as above, doLayout().

So, that's a lot of info, and even if it does make sense on a first read, there are still a lot of caveats and gotchas. I'm working on a module that does some of this work for developers. Let me know if you're interested, and I can put a sandbox up.

gprashansa's picture

Thanks for the approach. Just wanted to enquire if you actually have a repo with this module implementation which I can use in my project?
I am coming across the same issue in my project where we are using decoupled D8 for backend and react for frontend. Since, html is client side rendered SEO is taking a hit and we are looking for a solution for that.

prerender.io works

boztek's picture

FWIW I have used prerender.io on a couple of js only front-end projects, one of which had some content managed by a Drupal CMS and another with a wordpress managed blog.

Headless Drupal

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week