web-dev-qa-db-fra.com

Googlebot refuse de rendre plus que index.html dans l'application Ember

J'utilise Ember 3.0.0 pour créer un site de réservation. Les balises de titre et méta sont gérées via ember-cli-meta-tags et semblent être restituées correctement lorsque les pages sont ouvertes dans le navigateur Web.

Cependant, Googlebot refuse de rendre l'application normalement. Quoi que je fasse, il restitue une page index.html vide. J'ai essayé de réduire le temps de chargement du modèle, mais même les pages non dynamiques (sans Ember Demandes de données dans le modèle) ne sont pas rendues.

Voici un exemple de mon site web:

<!-- 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 -->

Lorsque je teste cette page sur un autre site de simulation, le rendu est identique à celui de index.html, ainsi que dans les résultats de recherche Google lorsque googler tandblekning site:muntra.se.

seoweb-crawlersgooglebotjavascript
1
Niels Rask

Nous avons finalement résolu ce problème en utilisant un pré-rendu:

  1. Ajout de mod_proxy et mod_proxy_http au serveur Web Apache pour détecter si le trafic provient d’un bot/scraper ou d’un humain. Le service de présélection sélectionné doit pouvoir fournir le contenu exact du fichier .htaccess.
  2. Servir des copies HTML statiques à partir d'un service de pré-rendu s'il s'agit d'un bot/scraper. Google "prérendering" si vous cherchez des alternatives.
  3. Servir la version Javascript originale si le trafic ne provient pas d'un robot ou d'un serveur.

Avec cette solution, Fetch as Google fonctionne normalement, les titres et les méta-descriptions sont affichés dans les recherches et le contenu de la page est inclus dans les analyses. De plus, nous n’avons apporté aucune modification à l’application originale Ember, ce qui supprime le risque de perturbation de celle-ci.

Des choses que nous avons essayées en cours de route et qui n'ont pas fonctionné

  • Installation de Fastboot pour implémenter le rendu côté serveur (ce n’était pas prêt pour la production et a causé des erreurs).
  • Différents correctifs pour essayer de rendre l'exploration de l'application Ember régulière:
    • S'assurer que l'application fonctionne dans Chrome 41 (actuellement, le service de rendu Web de Googlebot est basé sur cette version spécifique). Nous avons trouvé un bogue qui empêchait l'application de se charger dans cette version. Mais même après avoir résolu ce problème, les pages n'étaient toujours pas explorées correctement.
    • Déplacement de Ember actifs (images, par exemple) vers le serveur d'API.
    • Optimisation de la TTFB pour l'application Ember.
1
Niels Rask