Ionic 3 PWA SEO & Sharing Problem

Ionic Framework ionic-v3
1

Hello,

I’m developing a new application for browser as pwa with Ionic 3. I have a situation about generating tags. Im generating these tags in OnInit function. However when someone copy link and paste on Facebook, Facebook crawler cannot get new meta tags because of lifecyle (as you know, OnInit run after server rendering). I need to generate these tags before before rendering. Maybe any event that works in server rendering process? Any idea? (Btw. Im getting meta tags data with http post.)

Thans for advance.

2

First of all:

Facebook use the og tags (http://ogp.me) to build their cache for sharing. Just in case, but I guess you knows it

Then about your question and the fact that the tags are ignored:

Summarized:

The problem is that Javascript is evaluated on the browser side. SEO crawler doesn’t evaluate Javascript. Therefore the tags you are setting dynamically in your javascript code (ngOnInit) aren’t seen by crawler. This is the case for Google Crawler or the Facebook one

Solutions:

  • Server Side Rendering (SSR) - Problem, might be not possible with Ionic 3, at least so far I didn’t found a way but I didn’t tried that hard neither

  • Using a service to cache your web app like prerender.io (for my website I had a look but went with the Angular Universal (SSR) solution instead, not sure it actually works with Angular >= 2 and neither with Ionic 3)

In conclusion, actually, you might face a dead end with Ionic 3 on that subject. Maybe the solution is at least to add static tag in index.html

3

Hi, I am facing the same issue, did you manage to fix it?

4

same problem here. i want to host pwa at firebase. did you find any solutions?

5

@Masera and @JeongJun I have not found any solution but I found Mike Harlington’s (from Ionic Team) tweet. He said that they will solve issues before Ionic 4 final.

Apart from it, Adam Bradley post a tweet in february, and he said that “Hoping to ship ionic with ssr and prerendering soon!”