Универсальные метатеги Angular не видны Facebook - PullRequest
Новая
       8

Универсальные метатеги Angular не видны Facebook

0 голосов
/ 06 января 2019

Я пытаюсь отобразить соответствующие метатеги на страницах своей статьи для публикации в Facebook. Я использую Angular Universal, и это серверный рендеринг. Индексирование Google работает, и мета-теги появляются в исходном коде страницы, поэтому я знаю, что SSR работает. Однако сканер Facebook по причине не может их увидеть.

Решения, которые я пробовал использовать модуль Meta из @angular/platform-browser

import { Meta } from '@angular/platform-browser';

this.meta.updateTag({ property: 'og:type', content: 'article' });
this.meta.updateTag({ property: 'og:site_name', content: 'AdriaOffer' });
this.meta.updateTag({ property: 'og:title', content: config.title });
this.meta.updateTag({ property: 'og:description', content: config.description });
this.meta.updateTag({ property: 'og:image', content: config.image });
this.meta.updateTag({ property: 'og:url', content: config.slug });

Я также нашел ngx-meta - https://github.com/fulls1z3/ngx-meta/

Что сработало, если вы добавили метаданные в маршрут, например (взяты из их страницы npm) 

...
import { MetaGuard } from '@ngx-meta/core';
...
export const routes: Routes = [
  {
    path: '',
    canActivateChild: [MetaGuard],
    children: [
      {
        path: 'home',
        component: HomeComponent,
        data: {
          meta: {
            title: 'Sweet home',
            description: 'Home, home sweet home... and what?'
          }
        }
      },
      {
        path: 'duck',
        component: DuckComponent,
        data: {
          meta: {
            title: 'Rubber duckie',
            description: 'Have you seen my rubber duckie?'
          }
        }
      },
      {
        path: 'toothpaste',
        component: ToothpasteComponent,
        data: {
          meta: {
            title: 'Toothpaste',
            override: true, // prevents appending/prepending the application name to the title attribute
            description: 'Eating toothpaste is considered to be too healthy!'
          }
        }
      }
    ]
  }
  ...
];

Но это решение не работает для меня, поскольку мне нужно, чтобы данные добавлялись динамически, что, кажется, является известной проблемой - https://github.com/fulls1z3/ngx-meta/issues/118, или, по крайней мере, кто-то еще сообщил об этой проблеме.

Я потратил слишком много времени на это, и временное решение для взлома также подойдет, думая, что мой server.ts (который был сгенерирован автоматически) может быть каким-то образом обновлен?

файл server.ts для справки 

import 'zone.js/dist/zone-node';
    import 'reflect-metadata';
    import {enableProdMode} from '@angular/core';
    import {ngExpressEngine} from '@nguniversal/express-engine';
    import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';

    import * as express from 'express';
    import * as bodyParser from 'body-parser';
    import * as cors from 'cors';
    import * as compression from 'compression';
    import {join} from 'path';

    enableProdMode();

    export const app = express();

    app.use(compression());
    app.use(cors());
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    // const DIST_FOLDER = join(process.cwd(), 'dist');

    const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

    app.engine('html', ngExpressEngine({
      bootstrap: AppServerModuleNgFactory,
      providers: [
        provideModuleMap(LAZY_MODULE_MAP)
      ]
    }));

    app.set('view engine', 'html');
    app.set('views', './dist/browser');

    app.get('/redirect/**', (req, res) => {
      const location = req.url.substring(10);
      res.redirect(301, location);
    });

    app.route('/sitemap.xml')
    .get((req, res) => {
      const DIST_FOLDER = join(process.cwd(), 'dist');
      res.sendFile(join(DIST_FOLDER,'sitemap.xml'));
    });


    app.get('*.*', express.static('./dist/browser', {
      maxAge: '1y'
    }));

    app.get('/*', (req, res) => {
      res.render('index', {req, res}, (err, html) => {
        if (html) {
          res.send(html);
        } else {
          console.error(err);
          res.send(err);
        }
      });
    });
...