Question

我正在尝试获取相关的元标记以显示在我的文章页面上，以进行Facebook共享。我正在使用Angular Universal，它是服务器端渲染。 Google索引有效，并且meta标记显示在页面源中，所以我知道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);
        }
      });
    });

Answer 1

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

但是@ angular / platform-browser的Meta在检查我的générated页面时会更好地工作。

Facebook无法看到Angular Universal元标记

1 个答案: