Is there a way to change the meta-tags (Title, Description, Keywords) in the head of my progressive web app html - page?
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);
}
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);
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:
It is not working on my side. is it working on localhost dev?
What do you mean with your side?
meta tags not updated correctly. I see no changes.
Some code would be helpful.
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 ?
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
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
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
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 ?
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.
