Ember App und Google Crawler

Question

Ich versuche, meine Ember-Anwendung crawlable zu machen. Wie ich weiß, unterstützt Google jetzt JS, CSS und AJAX (ab Oktober 2015). Aber wenn ich meine Website testen, indem „Abruf wie durch Google“ Ich bekomme leere Seite mit Hintergrund: https://gyazo.com/2b28487ac1a25e11e2e87888779e3f2a

Im wirklichen natürlich habe ich Inhalt und Seite sieht ganz anders aus: https://gyazo.com/009a5a9719f80aef70fc22bc3d777cba

Was mache ich falsch?

Answer 1

Nach einem Tag der Untersuchung fand ich zwei Probleme, die Crawling verhindert.

1. Eingabe-Validierungskomponente.

import Ember from 'ember'; 

const { 
    computed, 
    observer, 
    defineProperty, 
    run 
} = Ember; 

export default Ember.Component.extend({ 
    classNames: ['form-group', 'has-feedback', 'validated-input'], 
    classNameBindings: ['isValid:has-success', 'showErrorClass:has-error'], 
    isValid: false, 
    model: null, 
    value: null, 
    rawInputValue: null, 
    type: 'text', 
    valuePath: '', 
    placeholder: '', 
    attributeValidation: null, 
    isTyping: false, 

    didValidate: computed.oneWay('targetObject.didValidate'), 

    showErrorClass: computed('isTyping', 'showMessage', 'hasContent', 'attributeValidation', function() { 
    return this.get('attributeValidation') && !this.get('isTyping') && this.get('showMessage'); 
    }), 

    hasContent: computed.notEmpty('rawInputValue'), 

    isValid: computed.and('hasContent', 'attributeValidation.isValid'), 

    isInvalid: computed.oneWay('attributeValidation.isInvalid'), 

    inputValueChange: observer('rawInputValue', function() { 
    this.set('isTyping', true); 
    run.debounce(this, this.setValue, 500, false); 
    }), 

    showMessage: computed('attributeValidation.isDirty', 'isInvalid', 'didValidate', function() { 
    return (this.get('attributeValidation.isDirty') || this.get('didValidate')) && this.get('isInvalid'); 
    }), 

    setValue() { 
    this.set('value', this.get('rawInputValue')); 
    this.set('isTyping', false); 
    }, 

    init() { 
    this._super(...arguments); 
    var valuePath = this.get('valuePath'); 
    defineProperty(this, 'attributeValidation', computed.oneWay(`model.validations.attrs.${valuePath}`)); 
    this.set('rawInputValue', this.get(`model.${valuePath}`)); 
    defineProperty(this, 'value', computed.alias(`model.${valuePath}`)); 
    } 
}); 

Ich ersetzte diese Komponente durch neuere.

2.Dieser Stück Code (Ich schrieb es für Performance-Optimierung):

ingredients: function() { 
    var self = this; 
    return DS.PromiseArray.create({ 
     promise: new Promise((resolve, reject) => { 
     let loadedIngredients = self.store.peekAll('ingredient'); 
     if (loadedIngredients && loadedIngredients.get('length') > 0) { 
      let mappedIngredients = self.get('recipe').get('ingredientsWithQuantities').map(function(item) { 
      return { 
       name: self.store.peekRecord('ingredient', item.ingredientId).get('name'), 
       quantity: item.quantity 
      }; 
      }); 
      resolve(mappedIngredients); 
     } else { 
      this.store.findAll('ingredient').then(function() { 
      let mappedIngredients = self.get('recipe').get('ingredientsWithQuantities').map(function(item) { 
       return { 
       name: self.store.peekRecord('ingredient', item.ingredientId).get('name'), 
       quantity: item.quantity 
       }; 
      }); 
      resolve(mappedIngredients); 
      }) 
     } 
     }) 
    }); 
    }.property('recipe.ingredientsWithQuantities') 

ich diese beide Sache festgelegt und jetzt Google bietet die Lage, meine app zu machen.

Answer 2

können Sie Ember Fastboot verwenden - https://www.ember-fastboot.com/ oder einen Service wie http://www.emberjsseo.com/

Viel Glück verwenden!