Ionic2+ with seo support


#1

SEO web for Ionic2+

Is there case study or example for implement ionic 2+ seo support?

I try on PWA + lazy load


#2

I know with https://universal.angular.io/ it is possible, but I never tried it. Maybe it helps you.


#3

What does that mean exactly?


#4

@Sujan12

I want to know about bot crawling or any other way to make ionic2+ as web can be search by google.

Thank you.


#5

I think there is no out of the box support for server side rendering yet.

Are you sure Google isn’t already smart enough to handle the JS of an Ionic app?


#6

I try to find article.

I see this link. but I try to find more information or any example seo support.


#7

Here are some steps that I make to make my app working with google search console.

At the start google renders only the home.html correct.

Every other page must be pre rendered.

Google reads this normal user be redirected to the app.


#8

@Jacktoolsnet
Is this prerender?

ionic2+ html5mode, how to do this?


#9

Just read the topic he linked to. It contains the information if this is prerendering and also how to do this.


#10

No. Prerendering means that you use a tool that calls your app as a web browser and save the result as a html file. I use Phantomjs and php-phantomjs on my Server for this.

Change the Import section of your app.module.ts to


  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, {
      locationStrategy: 'path'
    })
  ],

#11

Thank you. I will try. If you have any suggestion for more seo friendly in ionic2+, please post here.


#12

Ahh I think you have to use lasy loading to set the path to your page…


@IonicPage({
  name: 'clothing_detail',
  segment: 'cdetail/:_id'
})

Segment is the path and Parameter for the page.

This is a screenshot from my Server. The number in the Folder is the prerendert html with id as filename without Extension. Klick on the Image to see the files: Example link

http://weeklystyle.de/cdetail/738


#13

I think also that IonicPage ([see here] (https://ionicframework.com/docs/api/navigation/IonicPage/)) makes the PWA SEO-friendly. To confirm !


#14

Hello,

I want to explain how can i solved this issue. I followed @Jacktoolsnet 's suggestion but google bot was not crawl my pages correctly then i found puppeteer for server-side rendering. Then my site made by ionic 3 PWA then start to crawled by Google. You can find result below image.

image


#15

Tank’s for sharing the link.

In the meanwhile my backend is running under ExpressJS so this sounds promising