Добавить метатег с изображением и заголовком в проект 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 property="og:image" content="https://somethingsomething.png">
<meta property="og:title" content="Results for: Test Graph v3">

РЕДАКТИРОВАТЬ

Я реализовал код с помощью setAttribute, но пока ничего не происходит.

РЕДАКТИРОВАТЬ 2

Я попытался добавить все метатеги с атрибутами имени и свойства, но также не работал.Это код для остальных тегов (все они создаются в разделе заголовка):

    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

property является проприетарным атрибутом, используемым Facebook, поэтому он не является стандартным атрибутом DOM и, следовательно, не входит в определения типов Typescript для используемого вами DOM. Вы можете использовать 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);
}

Answer 2

Насколько мне известно,

Метатег принимает только два свойства 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>

Ссылочная ссылка