Making Ionic4 SEO Friendly

Ionic 4 is a single page application on the web. All routing is handled clientside, which makes it difficult for some search engines to follow links and render dynamic content.

Linkbots that display social media tags - such as Slack, Facebook, and Twitter - will not parse any JavaScript on the page. You will need to implement server-side rendering (SSR) to have your content rendered by these bots.

Google Search will parse and index JavaScript apps like Ionic and Angular. You do not need SSR to get content rich pages picked up by search

Build an SEO Service

Content rich sites should have a unique title for each page and possibly metatags that can be read by social media cards like Twitter, Facebook, Slack, etc. Let’s create a service that will allow us update this data on any page consistently.

ionic generate service seo

For now, we will have our service update the title and set some metatags for a Twitter Card.

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class SeoService {
  constructor(private title: Title, private meta: Meta) {}

  addTwitterCard(title, description, img) {
    // Set HTML Document Title
    this.title.setTitle(title);

    // Add Twitter Card Metatags
    this.meta.updateTag({ name: 'twitter:card', content: 'summary' });
    this.meta.updateTag({ name: 'twitter:site', content: '@angularfirebase' });
    this.meta.updateTag({ name: 'twitter:title', content: title });
    this.meta.updateTag({ name: 'twitter:description', content: description });
    this.meta.updateTag({ name: 'twitter:image', content: img });
  }
}

Set Metatags on Ionic Pages

Now we can inject the SEO service into any Ionic page and render the title and tags with just a few arguments.

import { Component, OnInit } from '@angular/core';
import { SeoService } from '../seo.service';

@Component(...)
export class HippoPage  {
  constructor(seo: SeoService) {
    seo.addTwitterCard(
      'Hippos are rad!',
      'This is an Ionic Page about hippos',
      '/some-img-url.jpeg'
    );
  }
}

Options for SSR

At this point, serverside rendering of an Ionic a challenge. The shadow DOM is not easily parsed to plain HTML, so using something like Puppeteer will not work out of the box. Prerendering web components in Stencil is currently possible, so there’s a good chance we will see solid SSR options for Ionic in the future.