Блог

Я пытаюсь добавить изображение и заголовок при отправке 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, на странице есть мета-теги с заголовком и изображением, но ничего не происходит… В skype изображение и заголовок не отображаются. Вот как выглядят мета-теги:

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

Редактировать

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

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

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

     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 без скриптов / ссылок, как вы можете видеть на изображении:

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

Мета-тег принимает только два свойства name и content .

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

Вы можете попробовать заменить ключевое слово property на name и проверить еще раз.

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

Справочная ссылка

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