1

I am using Ember 3.0.0 to create a booking site. Title and meta tags are handled via ember-cli-meta-tags and seem to be rendered correctly when pages are opened in the web browser.

However, Googlebot refuses to render the app normally. Whatever I do, it just renders a blank index.html page. I've tried to shorten the time of loading the model, but even non-dynamic pages (without Ember Data requests in the model) aren't rendered.

Here is an example from my website:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

    import {
      schedule
    } from '@ember/runloop';
    import {
      get,
      set
    } from '@ember/object';
    import ENV from '../config/environment';
    import Route from '@ember/routing/route';

    export default Route.extend({
      title: 'Tandblekning i praktiken: Allt du behöver veta',

      patientPortal: ENV.APP.patientPortal,

      headTags: function() {
        return [{
          type: 'link',
          tagId: 'canonical-link',
          attrs: {
            rel: 'canonical',
            href: get(this, 'patientPortal') + '/tandblekning'
          }
        }, {
          type: 'meta',
          tagId: 'meta-description-tag',
          attrs: {
            name: 'description',
            content: 'Konkret och praktisk guide för tandblekning som gör att du sparar pengar, minskar risk för skador och får vitare tänder.'
          }
        }];
      },

      titleToken: function() {
        return 'Tandblekning i praktiken: Allt du behöver veta';
      },

      setupController(controller, model) {
        this._super(controller, model);
        schedule('afterRender', this, function() {
          set(controller, 'after_render', true);
        });
      }
    });

<!-- end snippet -->

When testing this page on another simulator site, I get the same rendering as on index.html as well as in Google Search results when googling tandblekning site:muntra.se.

  • 1
    If you figured out a solution to your issue (e.g., your site was incompatible with the version of Chrome that Googlebot uses), please add that as an answer below so it will be helpful to others in the future, and accept it when you can (you'll earn some more reputation points for doing so). Thanks. – dan Sep 5 '18 at 23:56
1

We eventually resolved this using prerendering:

  1. Adding mod_proxy and mod_proxy_http to the Apache web server to detect if the traffic is from a bot/scraper or a human. The prerendering service selected should be able to provide exact content for the .htaccess file.
  2. Serving static HTML copies up from a prerendering service if it is a bot/scraper. Google "prerendering" if you are looking for alternatives.
  3. Serving original Javascript version if traffic is not from a bot or scraper.

With this solution, Fetch as Google works normally, titles and meta descriptions are displayed in searches, and page content is included in crawls. Also, we didn't make any change to the original Ember app, which removes the risk of disruptions to it.

Things we tried along the way that didn't work

  • Installing Fastboot to implement server-side rendering (it wasn't production-ready, and caused errors).
  • Different fixes to try to make the regular Ember app crawlable:
    • Ensuring the app works in Chrome 41 (currently, the Googlebot's web rendering service is based on that specific version). We found a bug that caused the app not to load in that version. But even after having fixed this, the pages still weren't crawled properly.
    • Moving Ember assets (e.g. images) to the API server.
    • Optimizing the TTFB for the Ember app.
  • <disclaimer>It doesn't have much to do with your question</disclaimer>, but if SEO belongs to primarily goals of your website, just think about the efficiency of your work and take into consideration to create new website, which follows main internet paradigms and is more eligible for SEO. My experience says, new site is worth in 95% of cases. – Evgeniy Sep 12 '18 at 14:59
  • @Evgeniy What do you mean? Since it's not straight-forward to resolve an SEO issue, we should just rebuild the entire website from scratch? – Niels Rask Sep 12 '18 at 18:17
  • It could happen, solving seo issues on such framework will need much more efforts, than building a new one from scratch, build with seo in mind and on seo-friendly base. How many pages do you maintain? – Evgeniy Sep 12 '18 at 18:21
  • That would be a huge undertaking. The entire site is built using EmberJS. The entire company is. No, that's not an option. – Niels Rask Sep 13 '18 at 17:31

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.