search

paduchurikowsik / ionic4-angular-firebase-PWA

A PWA (Progressive Web App) with Ionic 4, Anuglar, firebase with @angular/fire
6 stars 3 forks source link

meta tags not displaying when testing with Facebook Sharing Debbuger #1

Open maseranw opened 5 years ago

maseranw commented 5 years ago

Hi, I cloned and deploy on firebase, and copy the protected page link to Facebook Sharing Debbuger and its not showing og:image etc.

paduchurikowsik commented 5 years ago

change the function metaData as follows

metaData(name: string, description: string, image:string) {
    this.metaDataService.setMetaData({
      title: name,
      description: description,
      image:image
    });
  }

use the functions as follows metaData(title,description,image)

this show add the og:image to the tags

And also change the appImage variable in services\meta-data.service.ts so that the default image can be taken if no imageUrl is griven

maseranw commented 5 years ago

It is still showing Ionic App as title when i share the link on facebook.

paduchurikowsik commented 5 years ago

The issue is with not having a prerender of our pages, i.e, facebook crawler finishes before we update the meta tags of the page. This can be solved using pre-rendering.

Please look at the below links for more details https://medium.com/@corymc/angular-seo-and-pre-rendering-with-netlify-c68b86a2ffd1

In that article @Cory McArthur explains how to use preRender for twitter and facebook cards and google bots.