如何使這個AngularJS應用程序搜索引擎友好？

Question

我正在開發一個小博客應用程序。 該應用程序有一個后端（用PHP制作），可以吐出JSON。

這些由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友好： 檢查單個帖子正確顯示其所有呈現的代碼， 查看源（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

祝好運。