將帶有圖像和標題的元標記添加到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 ，如您在圖像中看到的：

Answer 1

據我所知，

元標記僅接受name和content兩個屬性。

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

您可以嘗試用name替換property關鍵字，然后再次檢查。

<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>

參考鏈接

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);
}