如何使这个 AngularJS 应用程序搜索引擎友好？

Question

我正在开发一个小型博客应用程序。该应用程序有一个输出 JSON 的后端（用 PHP 制作）。

这些由 AngularJS（1.7.8 版）前端管理和显示。

index.html 文件如下所示：

<!-- Header -->
<header id="header">
  <div class="logo"><a href="/">{{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>

帖子列表和单个帖子模板通过$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: '/'
    })
}])

posts.html 文件：

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

singlepost.html 文件：

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

该应用程序运行良好，但它确实有一个缺陷：它对 SEO 不友好：虽然 inspecting 单个帖子正确显示了其所有呈现的代码，但 查看 源代码（Chrome 中的 [CTRL] + [U]）显示：

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

我一直无法找到一种方法来显示页面源代码中的所有内容，而不仅仅是在 Chrome 检查器中。

Seositecheckup.com 给了我这个预览：

换句话说，我正在AngularJS中寻找服务器端渲染方法。我怎样才能做到这一点？

Answer 1

虽然 Angular（当前版本 7x）可用作为此目的呈现的服务器端，但您显示的代码适用于 Angularjs（v 1.9x）。这将使您的工作更加努力地对 SEO 友好。

现在我建议您阅读并测试 prerender.io 中间件/服务，它将为您的应用程序提供在该领域的超级能力，我可以说这将是解决方案，但它可能会帮助甚至成为您的解决方案正在寻找。

您在服务器上安装的 Prerender.io 中间件将 检查每个请求以查看它是否是来自爬虫的请求。如果它是一个 来自爬虫的请求，中间件将向 Prerender.io 用于该页面的静态 HTML。如果没有，请求 将继续使用您的正常服务器路由。爬虫永远不知道 您正在使用 Prerender.io，因为响应总是通过 你的服务器。 -- prerender.io

检查：https://prerender.io

祝你好运。