如何使用 Angular Precomposition 在 Google 上显示页面标题？答案

【问题标题】：How to show page title on Google with Angular Precomposition?如何使用 Angular Precomposition 在 Google 上显示页面标题？
【发布时间】：2017-08-13 06:07:09
【问题描述】：

基于超级响应here 我已经设置了一个没有 Hashbangs 和 html5Mode(true) 的 Angular 1 应用程序，并依靠 Google 来执行 javascript。该页面已被 Google 编入索引，但动态标题和描述标签并未被编入索引。

我的 index.html 头如下：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <base href="/">

    <meta name="author" content="me">
    <meta name="robots" content="index,follow">

    <title ng-bind="meta.title">Temp Title</title>
    <meta name="description" content="{{meta.description}}">

    <!-- Scripts & CSS -->
</head>

标题和说明已正确加载，但未在 Google 上显示。

我该怎么做？

这种技术也适用于 Facebook 和其他社交网络吗？谢谢。

【问题讨论】：

也许为爬虫预先呈现您的页面会更有效，但我想知道是否有更简单的方法。
@neptune 是的，我正在尝试评估是否有可能避免这种方法并最终获得对 SEO 友好的 SPA。

标签： angularjs html seo search-engine google-search

【解决方案1】：

其实超光回复here有解决办法。 HTML 页头必须由服务器完全解析。

所以为了让这个解决方案发挥作用，我不得不在服务器端复制角度路由并发送解析的信息。

我没有使用普通的 html 视图，而是更改为 .ejs 并将标题更改为如下内容：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <base href="/">

    <meta name="robots" content="index,follow">

    <script type="text/javascript"> 
        window.title = <%- JSON.stringify(precomposition) %>.title;
    </script> 

    <title ng-bind="title"><%= precomposition.title %></title>
    <meta name="description" content="<%= precomposition.description %>">
    <!-- More meta information -->
    <!-- Scripts & CSS -->
</head>

现在，当网站受到直接点击时（最初由服务器而不是 Angular 解决，爬虫总是如此）我处理请求服务器端：

//Express route
app.route('/').get(precomposition.render);

//precomposition
exports.render = function (req, res) {
    const precomposition = {title: 'tile', description: 'description'};
    res.locals.precomposition = precomposition;
    res.render('index.ejs');
};

如果不是直接命中，Angular 会处理标题更新（因为其他信息不会显示给用户）。

它当然有一些缺点，但自 2015 年 10 月以来，Google 推荐这种方法，而不是“_escaped_fragment_ URLs”。此外，我认为它比自托管的预渲染替代方案消耗的资源少得多，并且比付费的替代方案更便宜。

【讨论】：

【解决方案2】：

为什么你不使用这样的东西？

https://github.com/steeve/angular-seo

【讨论】：

我正在尝试评估是否有可能避免这种方法并最终获得对 SEO 友好的 SPA。