将带有图像和标题的元标记添加到Angular 6项目

Question

在我的项目中发送一页的URL时，我试图添加图像和标题，并且我正在寻找最佳方法。这是我尝试过的：

createMetaTag() {
    const meta = document.createElement('meta');
    meta.setAttribute('property', 'og:image');
    meta.content = '' + this.activeCampaignModel.thumbnail;
    document.getElementsByTagName('head')[0].appendChild(meta);


    const meta2 = document.createElement('meta');
    meta2.setAttribute('property', 'og:title');
    meta2.content = 'Results for: ' + this.activeCampaignModel.name;
    document.getElementsByTagName('head')[0].appendChild(meta2);

}

现在，当我共享链接时，什么都没有发生，例如，我在Skype上发送了链接，该页面具有带有标题和图像的meta标签，但是什么也没有发生...在skype中，没有图像和标题。这是meta标签的样子：

<meta property="og:image" content="https://somethingsomething.png">
<meta property="og:title" content="Results for: Test Graph v3">

编辑

我使用setAttribute实现了代码，但仍然没有任何反应。

编辑2

我尝试添加所有带有名称和属性属性的meta标签，但效果不佳。这是其余标签的代码（所有代码均在开头部分创建）：

    const meta3 = document.createElement('meta');
    meta3.setAttribute('name', 'og:type');
    meta3.content = 'website';
    document.getElementsByTagName('head')[0].appendChild(meta3);

    const meta4 = document.createElement('meta');
    meta4.setAttribute('name', 'og:url');
    meta4.content = '' + environment.resultsUrl;
    document.getElementsByTagName('head')[0].appendChild(meta4);

    const meta5 = document.createElement('meta');
    meta5.setAttribute('name', 'og:description');
    meta5.content = ' ';
    document.getElementsByTagName('head')[0].appendChild(meta5);

编辑3

找到了问题，但没有解决。元标记是稍后生成的，当组件加载时，当您查看页面源代码时看起来完全不同，而元标记不存在，只是app-root，没有脚本/链接，如您在图像中看到的：< / p>

Answer 1

据我所知

元标记仅接受两个属性name和content。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

您可以尝试用名称替换属性关键字，然后再次检查。

<script type='text/javascript' data-cfasync='false'>
  createMetaTag() {
      var link=document.createElement('meta');
      link.name="og:image";
      link.content = '' + this.activeCampaignModel.thumbnail;
      document.getElementsByTagName('head')[0].appendChild(link);
 }
</script>

Reference Link

Answer 2

property是Facebook使用的专有属性，因此它不是标准的DOM属性，因此不在您正在使用的DOM的Typescript类型定义中。您可以使用setAttribute在HTML元素上设置任意属性。

createMetaTag() {
    const meta = document.createElement('meta');
    meta.setAttribute('property','og:image'); //this line is the issue
    meta.content = '' + this.activeCampaignModel.thumbnail;
    document.getElementsByTagName('head')[0].appendChild(meta);
}