Как показать название страницы в Google с помощью Angular Прекомпозиция?

На основе суперсветовой реакции здесь Я настроил приложение 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 и другими социальными сетями? Спасибо.

ОТВЕТЫ

Ответ 1

На самом деле суперсветовой ответ здесь имеет решение. Заголовок страницы HTML должен быть отправлен полностью разрешенным сервером.

Итак, чтобы это решение работало, мне пришлось реплицировать маршруты angular на стороне сервера и отправить информацию.

Вместо использования простого представления 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 обрабатывает обновление заголовка (потому что другая информация не отображается пользователю).

У него есть некоторые недостатки, но Google с октября 2015 года рекомендует этот подход вместо "_escaped_fragment_ URLs". Также я думаю, что это намного меньше ресурсов, чем самозанятые предварительные варианты рендеринга и более дешевые, чем платные.