Facebook看不到Angular Universal元标记

Question

我正在尝试将相关的元标记显示在我的文章页面上，以进行Facebook共享。我正在使用Angular Universal，它是服务器端渲染。 Google索引可以工作，并且meta标记会出现在页面源代码中，所以我知道SSR可以工作，但是，Facebook Crawler出于某种原因无法看到它们。

我尝试过的解决方案正在使用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);
        }
      });
    });

Answer 1

ngx-meta仅适用于根URL，不适用于动态URL，就像您不适用于FacebookLinkedin，...。

但是，当检查我的分类页面时，我发现我的元数据，@ angular / platform-b​​rowser的元数据工作得更好。