Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Social websites are not showing updated meta tags on share?

See original GitHub issue

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I am using meta service for meta tags update. I am able to update the default tags with meta service in index.html , and I am able to see the updated tags in inspect element console. social sites are showing default meta tags only. but these updated tags are not showing up in the social websites sharing.

Expected behavior

Updated meta tags are there in the index.html . I need to show the updated meta tags on social share. I am not able to succeed on that. Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior? I need to show the dynamic meta tags on the social sites like fb and twitter etc

Please tell us about your environment:

Operating system : windows 10 Server: apache server backend : Spring Rest API

Angular version: 4.0.X

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]
Node (for AoT issues): node --version =6.9.1

index.html with default static meta tags

<html>
<head>
<meta charset="utf-8">
<title>Angular App</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@michlbrmly">
<meta property="twitter:title" content="Grace">
<meta property="twitter:description" content="Grace is the only complete studio album by Jeff Buckley, released on August 23, 1994..">
<meta property="twitter:image" content="https://example.com/vod/images/125/03022017/flight1486153663429_play1.gif">
<meta property="twitter:url" content="https://example.com/AngularApp/#/embed-video/PRIVATE/3867c8e2-85ba-4ca9-9804-b28769e67746">
<meta property="og:title" content="Angular App">
<meta property="og:site_name " content="My Favourite Albums">
<meta property="og:url " content="https://example.com/AngularApp/#/embed-video/PRIVATE/3867c8e2-85ba-4ca9-9804-b28769e67746">
<meta property="og:description" content="Grace is the only complete studio album by Jeff Buckley, released on August 23, 1994..">
<meta property="og:image" content="https://example.com/vod/images/125/03022017/flight1486153663429_play1.gif">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body > <app-root>Loading..</app-root> </body>
</html>

Component for updated tags: I am changing the tags dynamically and its updating in the index.html. added screenshots below.

import { Component, ElementRef, OnInit, OnDestroy, Input, Inject, AfterViewInit, Renderer} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Meta, MetaDefinition } from '@angular/platform-browser';

@Component({
  selector: 'app-share-video',
  templateUrl: './share-video.component.html',
})
export ShareVideoComponent implements ngOnInit{
constructor(private router: Router,private metaService: Meta){
}
ngOnInit(){
	this.metaService.updateTag({ content: 'New Updated tags info'}, "property='og:title'");
	this.metaService.updateTag({content:'Embed videos'}, "property ='twitter:card'");
}
}

After loading this component, these two tags (‘og:title’ and ‘twitter:card’) are updating with with new content. but in the social share fb and other websites are taking default meta tags from index.html when i share the url. these old tags are updated with new tags I am seeing in the inspect element console. I am not seeing the new meta content in the scocial websites. followed this Meta Code How can i show the updated meta tags in the social websites? default meta tags in index.html: before update tags updated meta tags in index.html after updated tags

facebook is taking default tags not updated tags. old tags

Issue Analytics

State:
Created 6 years ago
Comments:13

Top GitHub Comments

2reactions

Sathishcharycommented, Feb 7, 2018

@parthkharecha, No, We are not using angular universal for now, we ended up this issue with creating simple spring web application, we are just sending meta tags from client application to simple web application, there we are generating new url and from that we will redirect to angular app. But this is not good idea. We are looking to change this to angular universal. thanks

0reactions

angular-automatic-lock-bot[bot]commented, Sep 13, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}