Я хочу, чтобы мой код Angular7 взял URL-адрес, содержащий маршрут, и представил желаемые обновленные мета-теги в Twitter, чтобы Twitter отображал правильную социальную карту.
Следуя стандартной практике для мета-тегов, которая включает объявлениев заголовке index.html и обновлении в конструкторах страниц, загруженных маршрутами, я вижу правильные обновленные значения в консоли браузера, но twitter игнорирует эти обновления и использует первые метатеги из index.html.
Fromindex.html ...
<head>
<title>My Title</title>
<!-- Other Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@myAccountName">
<meta name="twitter:title" content="My Title">
<meta name="twitter:description" content="A detailed description of the site">
<meta name="twitter:image" content="https://www.oursite.com/welcome.png">
Из app.module.ts…
import { mySubComponent } from './components/mySub/mySub.component';
...
const appRoutes: Routes = [
...
{ path: 'mySubPage', component: mySubComponent },
...
Из файла .ts для модуля, загруженного www.oursite.com/mySubPage ...
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-mySub',
templateUrl: './mySub.component.html',
styleUrls: ['./mySub.component.css']
})
export class mySubComponent implements OnInit {
...
constructor(
...
public meta: Meta, public title: Title) {
meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
meta.updateTag({ name: 'twitter:site', content: '@myAccountName});
meta.updateTag({ name: 'twitter:title', content: 'My Sub Title' });
meta.updateTag({ name: 'twitter:description', content: 'The descript of the sub page' });
meta.updateTag({ name: 'twitter:image', content: 'https://www.oursite.com/mySubPageLogo.png' });
}
Когда я запускаю это в браузере и вручную набираю полный URL с маршрутом (www.oursite.com/mySubPage, инспектор консоли показывает все правильные настройки ...
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@myAccountName">
<meta name="twitter:title" content="My Sub Title">
<meta name="twitter:description" content="The descript of the sub page">
<meta name="twitter:image" content="https://https://www.oursite.com/mySubPageLogo.png">
Но для валидатора твиттерной карты, настроенного на тот же суб-URL, отображается карта из основного index.html, и, похоже, он полностью игнорирует обновления с маршрута.
Кстати, я сделал все шаги, чтобы очистить кеш твиттера, и даже ждал дольше 12 часов и пытался снова.Но я могу внести изменения в основные теги, и изменение показывается, так что это не проблема кеша с твиттером.