如何使用 Angular 预合成在 Google 上显示页面标题？

Question

基于超级响应 here 我已经设置了一个 Angular 1 应用程序，没有 Hashbangs 和 html5Mode(true) 并依靠 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 和其他社交网络吗？谢谢。

Answer 1

你为什么不用那样的东西？

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

Answer 2

其实超光速反应here有解决办法。 HTML 页头必须由服务器完全解析发送。

因此，为了使此解决方案起作用，我被迫在服务器端复制 angular 路由并发送已解析的信息。

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

<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 处理标题更新（因为其他信息不会显示给用户）。

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

如何使用 Angular 预合成在 Google 上显示页面标题？

How to show page title on Google with Angular Precomposition?

html

seo

search-engine

google-search

angularjs