Comment puis-je rendre cette application AngularJS compatible avec les moteurs de recherche ?

Question

Je travaille sur une petite application de blogging. L'application a un backend (fait en PHP) qui crache des JSONs.

Celles-ci sont gérées et affichées par un frontend AngularJS (version 1.7.8).

Le fichier index.html ressemble à ceci :

<!-- Header -->
<header id="header">
  <div class="logo"><a href="stackoverflow.com/">{{siteTitle}}</a></div>
</header>

<!-- Main -->
<section id="main">
  <div class="inner" ng-view></div>
</section>

<!-- Footer -->
<footer id="footer">
  <div class="container">
    <ul class="icons">
      <li><a href="{{twitter}}" target="_blank" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
      <li><a href="{{facebook}}" target="_blank" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
      <li><a href="{{instagram}}" target="_blank" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
      <li><a href="mailto:{{company_email}}" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
    </ul>
    <ul class="icons">
      <li ng-repeat="page in pages">
        <a href="pages/page/{{page.id}}">{{page.title}}</a>
      </li>
    </ul>
  </div>
  <div class="copyright">
    &copy; {{companyName}}. All rights reserved. Design by <a href="https://templated.co" target="_blank">TEMPLATED</a>
  </div>
</footer>

En liste des postes y poste unique sont affichés par l'intermédiaire du $routeProvider

angular.module('app', [
    'ngRoute',
    'app.controllers',
    'ngSanitize'
]).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl: 'themes/caminar/templates/posts.html',
        controller: 'PostsController'

    }).when('/:slug', {
        templateUrl: 'themes/caminar/templates/singlepost.html',
        controller: 'SinglePostController'

    }).otherwise({
        redirectTo: '/'
    })
}])

En posts.html fichier :

<div class="spotlight" ng-repeat="post in posts" ng-if="$index > 0" ng-class="{ '': $even , 'alt': $odd }">
    <div class="image flush">
        <a href="{{post.slug}}">
            <img ng-src="api/assets/img/posts/{{post.post_image}}" alt="{{post.title}}" />
        </a>
    </div>
    <div class="inner">
        <h3>{{post.title}}</h3>
        <p>{{post.description}}</p>
        <div ng-class="{ 'text-right': $even , 'text-left': $odd }">
            <a href="{{post.slug}}" class="button special small">Read More</a>
        </div>
    </div>
</div>

En singlepost.html fichier :

<div class="content">
    <h2>{{post.title}}</h2>

    <p class="meta clearfix">
        <span class="pull-left">By <a href="posts/byauthor/{{post.author_id}}" title="All posts by {{post.first_name}} {{post.last_name}}">{{post.first_name}} {{post.last_name}}</a></span>

        <span class="pull-right">Published on {{post.created_at  | dateParse | date : "MMMM dd y"}} in <a href="categories/posts/{{post.cat_id}}" title="All posts in {{post.category_name}}">{{post.category_name}}</a></span>
    </p>

    <div class="image fit">
        <img ng-src="api/assets/img/posts/{{post.post_image}}" alt="{{post.title}}">
    </div>

    <div class="post-content" ng-bind-html="post.content"></div>
</div>

L'application fonctionne bien, mais elle a un défaut : elle n'est pas adaptée au référencement. inspecter le message unique affiche correctement tout son code rendu, visualisation de la source ([CTRL] + [U] dans Chrome) révèle :

<section id="main">
    <div class="inner" ng-view></div>
</section>

Je n'ai pas réussi à trouver un moyen d'afficher tout le contenu de la page d'accueil. source de la page et pas seulement dans l'inspecteur de Chrome.

Seositecheckup.com me donne cet aperçu :

En d'autres termes, je cherche un rendu côté serveur dans AngularJS. Comment puis-je y parvenir ?

Answer 1

Alors qu'Angular (versions actuelles 7x) peut être utilisé comme rendu côté serveur à cette fin, le code que vous montrez est pour Angularjs (v 1.9x). Cela rendra votre travail plus difficile pour le référencement.

Maintenant, je vous recommande de lire et de tester le middleware / service prerender.io, il donnera à votre application des pouvoirs supplémentaires dans ce domaine, je ne peux pas dire que ce sera la solution, mais il pourrait aider ou même être la solution que vous recherchez.

Le middleware Prerender.io que vous installez sur votre serveur va vérifiera chaque requête pour voir s'il s'agit d'une requête d'un crawler. Si c'est le cas d'un crawler, le middleware enverra une requête à l'adresse suivante Prerender.io pour obtenir le HTML statique de cette page. Sinon, la requête continuera sur les routes normales de votre serveur. Le crawler ne sait jamais que vous utilisez Prerender.io puisque la réponse passe toujours par votre serveur. votre serveur. -- prerender.io

Vérifiez : https://prerender.io

Bonne chance.