AngularJS SEO pour les pages Web statiques (S3 CDN)

voici un aperçu complet de la façon de rendre votre application conviviale sur un service de stockage tel que S3, avec de belles urls (no #) et tout avec grunt avec la commande simple à effectuer après la construction:

grunt seo

c'est toujours un puzzle de solutions, mais ça marche et c'est le mieux que vous puissiez faire. Merci à @ericluwj et à son blogpost qui m'a inspiré.

vue d'ensemble

L'objectif et de la structure de l'url

le but est de créer 1 fichier html par état dans votre application angulaire. La seule hypothèse majeure est que vous supprimez le ' # ' de votre url en utilisant html5history (ce que vous devriez faire !) et que tous vos chemins sont absolus ou utilisant des États angulaires. Il y a beaucoup de billets expliquant comment le faire.

Url terminer par une barre oblique comme ceci http://yourdomain.com/page1 /

Personnellement, j'ai fait en sorte que http://yourdomain.com/page1 ( no slash arrière) atteint également sa destination, mais c'est hors sujet ici. J'ai aussi fait en sorte que chaque langue ait un état différent et une url différente.

Le SEO logique

notre objectif est que lorsque quelqu'un atteint votre site Web par le biais d'une demande http:

• si c'est un moteur de recherche crawler: gardez-le sur la page qui contient le html requis. La page contient également la logique angulaire (par exemple pour démarrer votre application), mais le crawler ne peut pas lire cela, il est donc intentionnellement coincé avec le html que vous lui avez servi et va indexer cela.
• pour les humains normaux et les machines intelligentes: assurez-vous angular est activé, effacer le html généré et démarrer votre application normalement

Le grognement des tâches

Ici, nous allons avec le grognement des tâches:

  //grunt plugins you will need:
  grunt.loadNpmTasks('grunt-prerender');
  grunt.loadNpmTasks('grunt-replace');
  grunt.loadNpmTasks('grunt-wait');
  grunt.loadNpmTasks('grunt-aws-s3');

  //The grunt tasks in the right order
  grunt.registerTask('seo', 'First launch server, then prerender and replace', function (target) {
    grunt.task.run([
      'concurrent:seo' //Step 1: in parrallel launch server, then perform so-called seotasks
    ]);
  });

  grunt.registerTask('seotasks', [
    'http', //This is an API call to get all pages on my website. Skipping this step in this tutorial.
    'wait', // wait 1.5 sec to make sure that server is launched
    'prerender', //Step 2: create a snapshot of your website
    'replace', //Step 3: clean the mess
    'sitemap', //Create a sitemap of your production environment
    'aws_s3:dev' //Step 4: upload
  ]);

Étape 1: Lancement du serveur local avec concurrent: seo

nous devons d'abord lancer un serveur local (comme Grunt serve) afin que nous puissions prendre des instantanés de notre site web.

//grunt config
concurrent: {
  seo: [
    'connect:dist:keepalive', //Launching a server and keeping it alive
    'seotasks' //now that we have a running server we can launch the SEO tasks
  ]
}

Étape 2: Créez un instantané de votre site Web avec grunt prerender

les plugins grunt-prerender vous permettent de prendre un instantané de n'importe quel site Web en utilisant PhantomJS. Dans notre cas, nous voulons prendre un instantané de toutes les pages du localhost site internet, nous venons de lancer.

//grunt config
prerender: {
  options: {
    sitePath: 'http://localhost:9001', //points to the url of the server you just launched. You can also make it point to your production website.
    //As you can see the source urls allow for multiple languages provided you have different states for different languages (see note below for that)
    urls: ['/', '/projects/', '/portal/','/en/', '/projects/en/', '/portal/en/','/fr/', '/projects/fr/', '/portal/fr/'],//this var can be dynamically updated, which is done in my case in the callback of the http task
    hashed: true,
    dest: 'dist/SEO/',//where your static html files will be stored
    timeout:5000,
    interval:5000, //taking a snapshot of how the page looks like after 5 seconds.
    phantomScript:'basic',
    limit:7 //# pages processed simultaneously 
  }
}

Étape 3: Nettoyer le mess avec grunt remplacer

si vous ouvrez les fichiers rendus, ils fonctionneront pour les crawlers, mais pas pour les humains. Pour les humains qui utilisent chrome, vos directives se chargeront deux fois. Par conséquent, vous devez rediriger les navigateurs intelligents vers votre page d'accueil avant angular obtient activé (i.e., juste après la tête).

//Add the script tag to redirect if we're not a search bot
replace: {
  dist: {
    options: {
      patterns: [
        {
          match: '<head>',
          //redirect to a clean page if not a bot (to your index.html at the root basically).
          replacement: '<head><script>if(!/bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent)) { document.location = "/#" + window.location.pathname; }</script>'
          //note: your hashbang (#) will still work.
        }
      ],
      usePrefix: false
    },
    files: [
      {expand: true, flatten: false, src: ['dist/SEO/*/**/*.html'], dest: ''} 
    ]
  }

assurez-vous également d'avoir ce code dans votre index.html sur votre élément ui-view, qui efface toutes les directives html générées avant le démarrage angulaire.

<div ui-view autoscroll="true" id="ui-view"></div>

<!-- this script is needed to clear ui-view BEFORE angular starts to remove the static html that has been generated for search engines who cannot read angular -->
<script> 
  if(!/bot|googlebot|crawler|spider|robot|crawling/i.test( navigator.userAgent)) { document.getElementById('ui-view').innerHTML = ""; }
</script>

Étape 4: Télécharger aws

vous téléchargez d'abord votre dossier dist qui contient votre build. Ensuite, vous l'écrasez avec les fichiers que vous avez créés et mis à jour.

aws_s3: {
  options: {
    accessKeyId: "<%= aws.accessKeyId %>", // Use the variables
    secretAccessKey: "<%= aws.secret %>", // You can also use env variables
    region: 'eu-west-1',
    uploadConcurrency: 5, // 5 simultaneous uploads
  },
  dev: {
    options: {
      bucket: 'xxxxxxxx'
    },
    files: [
      {expand: true, cwd: 'dist/', src: ['**'], exclude: 'SEO/**', dest: '', differential: true},
      {expand: true, cwd: 'dist/SEO/', src: ['**'], dest: '', differential: true},
    ]
  }
}

C'est ça, vous avez votre solution ! Les humains et les robots seront en mesure de lire votre Web-app