Progressive Web App - Metatags


#1

Is there a way to change the meta-tags (Title, Description, Keywords) in the head of my progressive web app html - page?


Ionic and html5mode (google search console)
#2

Ok.

Titel is easy using tag.

For other meta tags in the head section of the html page this Code works for me.

ionViewWillEnter(){
	// Try to remove META-Tags
	try{
	  document.querySelector("meta[name='description']").remove();
	} catch (e){

	}
	try{
	  document.querySelector("meta[name='keywords']").remove();
	} catch (e){

	}

	// Add the new META-Tags
	var description = document.createElement('meta');
	description.name = "description";
	description.content = "Weeklystyle - Die neueste Mode, Musik und Events. Täglich aktualisierte Daten und ausgesuchte Produkte. Viel Spass beim stöbern und träumen.";
	document.getElementsByTagName('head')[0].appendChild(description);

	var keywords = document.createElement('meta');
	keywords.name = "keywords";
	keywords.content = "Mode, Musik, Events";
	document.getElementsByTagName('head')[0].appendChild(keywords);
}


#3

Ah works dynamic to:

    // Try to remove META-Tags
    try{
      document.querySelector("meta[name='description']").remove();
    } catch (e){

    }
    try{
      document.querySelector("meta[name='keywords']").remove();
    } catch (e){

    }
    // Add the new META-Tags
    var description = document.createElement('meta');
    description.name = "description";
    description.content = this.clothingDetail.description;
    document.getElementsByTagName('head')[0].appendChild(description);

    var keywords = document.createElement('meta');
    keywords.name = "keywords";
    keywords.content = this.clothingDetail.name + ", " + this.clothingDetail.brand;
    document.getElementsByTagName('head')[0].appendChild(keywords);


#4

I put all together in a Service Provider. Including struktured data.

import { Injectable } from '@angular/core';

/*
  Generated class for the HtmlheadService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/

@Injectable()
export class HtmlheadService {

  constructor() {
	console.log('Hello HtmlheadService Provider');
  }

  clearHead(){
	// Try to remove all META-Informaiton
	this.removeDescription();
	this.removeKeywords();
	this.removeStructuredData();
	// Add standard structured data
	this.addStructuredDataWebSite();
	this.addStructuredDataOrganisation();
  }

  removeDescription(){
	// Try to remove META-Tags
	try{
	  document.querySelector("meta[name='description']").remove();
	} catch (e){

	}
  }

  addDescription(content){
	// Add the new META-Tags
	var description = document.createElement('meta');
	description.name = "description";
	description.content = content;
	document.getElementsByTagName('head')[0].appendChild(description);
  }

  removeKeywords(){
	// Try to remove META-Tags
	try{
	  document.querySelector("meta[name='keywords']").remove();
	} catch (e){

	}
  }

  addKeywords(content){
	var keywords = document.createElement('meta');
	keywords.name = "keywords";
	keywords.content = content;
	document.getElementsByTagName('head')[0].appendChild(keywords);
  }

  removeStructuredData(){
	// Remove all Structured Data
	try{
	  while (document.querySelector("script[type='application/ld+json']")){
		document.querySelector("script[type='application/ld+json']").remove();
	  }
	} catch (e){

	}
  }

  addStructuredDataWebSite(){
	var script = document.createElement('script');
	script.type = "application/ld+json";
	script.innerText = '{"@context": "http://schema.org","@type": "WebSite","name": "Weeklystyle.de","alternateName": "Weeklystyle","url": "http://www.weeklystyle.de","sameAs": ["https://twitter.com/weeklystylede","https://www.pinterest.de/weeklystylede/"]}';
	document.getElementsByTagName('head')[0].appendChild(script);
  }

  addStructuredDataOrganisation(){
	var script = document.createElement('script');
	script.type = "application/ld+json";
	script.innerText = '{"@context": "http://schema.org","@type": "Organization","url":"http://www.weeklystyle.de","logo":"http://weeklystyle.de/assets/img/weeklyStyle/category.png"}';
	document.getElementsByTagName('head')[0].appendChild(script);
  }

}

Here is the call in the page:

ionViewWillEnter(){
	// Try to remove META-Tags
	this.htmlheadService.clearHead();

	// Add the new META-Tags
	this.htmlheadService.addDescription("Weeklystyle - Die neueste Mode, Musik und Events. Täglich aktualisierte Daten und ausgesuchte Produkte. Viel Spass beim stöbern und träumen.");
	this.htmlheadService.addKeywords("Mode, Musik, Events");
  }

And this is the result:


Change meta tags in PWA
#5

It is not working on my side. is it working on localhost dev?


#6

What do you mean with your side?


#7

meta tags not updated correctly. I see no changes.


#8

Some code would be helpful.


#9

Hello @Jacktoolsnet,

I add your code to my page ionViewWillEnter() methods and then i serve the code and when looked localhost i didn’t see any change when i looked view page source.

My Code is

ionViewWillEnter() {
try {
document.querySelector(“meta[name=‘description’]”).remove();
} catch (e) {}
try {
document.querySelector(“meta[name=‘keywords’]”).remove();
} catch (e) {}

var description = document.createElement('meta');
description.name = "description";
description.content = "I am a description";
document.getElementsByTagName("head")[0].appendChild(description);

var keywords = document.createElement('meta');
keywords.name = "keywords";
keywords.content = "Code, Learn, Respect";
document.getElementsByTagName("head")[0].appendChild(keywords);

}

Do you have any idea why don’t work for me ?


#10

Looks good. What do you mesn with looked at view page source.

You should see the Changes when you inspect the HTML in your browser

Hit F12 key in Chrome to see the HTML code


#11

Yes when i inspect the page i saw the the tags but when i right click the page and click the view page source i don’t see the tags. Is that problem. How google bots looks the metatags ?

Thanks


#12

Ah OK over the context menu.

Yes this is a problem. Google can’t see this.

Prerender is the right keyword for you. If you Google for Prerender angular app you will find some hints


#13

Okey thanks for help but i don’t understand if you don’t put this metatags for SEO what is the reason to put them ?

If it is possible could you please help for how to remove and add title in head section ?


#14

The problem is that the Google crawler doesn’t execute the Java script code. So he look at a blank page.

Prerendering seems to be the only way for seo in angular apps.


#15

Hello,

My site doesn’t crawled by Google at the end i found the how can we solve this issue. I used puppeteer for server-side rendering and deploy to firebase. My site is starting to crawl by google as you can see at below image. I hope this help others.

image