Angular Universal meta tags not being seen by Facebook

Viewed 1194

I'm trying to get the relevant meta tags to show on my article pages for Facebook sharing. I'm using Angular Universal and it's Server-side rendering. Google Indexing works, and the meta tags appear in the page source, so I know SSR is working, However, the Facebook Crawler for reason can't see them.

Solutions I've tried are using the Meta module from @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 });

I also found ngx-meta - https://github.com/fulls1z3/ngx-meta/

Which worked if you added the meta data within the route, e.g (taken from their npm page)

...
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!'
          }
        }
      }
    ]
  }
  ...
];

But this solution doesn't work for me, as I need the data to be added dynamically, which seems to be a known issue - https://github.com/fulls1z3/ngx-meta/issues/118, or at least someone else has reported the same problem.

I've spent far too long on this, and an interim hack solution would also be fine, thinking my server.ts (which was automatically generated) could be updated somehow?

server.ts file for reference

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);
        }
      });
    });
1 Answers

ngx-meta work only for root urls not for dynamics urls, like you isn't work for facebook linkedin, ... .

But Meta of @angular/platform-browser work better when inspecting my générated page i find my metas.

Related