Динамический og: изображение angular2

Question

Мы хотим разделить указатель на Angular 2 в социальных сетях. Например, Facebook и Skype.

на нашем веб-сайте, на этом URL-адресе отображается динамическое изображение в зависимости от фактических параметров URL-адреса и строк запросов, которые мы установили.

Например, если http://oursite.com/#/show/5448sd84f8d4sf8 будет отображать /images/5448sd84f8d4sf8.png.

Делясь ссылку, кажется, как Facebook и Skype использовать Open Graph мета og:image, чтобы отобразить эскиз или снимок сайта:

<meta name="og:image" content="http://example.com/image.png"> 

Есть ли способ, чтобы установить динамический OG: изображение в зависимости от URL-адрес, как и объяснить ниже: увязка наш URL покажет

<meta name="og:image" content="http://oursite.com/images/5448sd84f8d4sf8.png"> 

и затем, как убедиться, что Facebook и Skype, например, на самом деле синтаксического анализа динамического изображения?

Answer 1

Вы можете использовать ng2-metadata, его легко реализовать.

https://www.npmjs.com/package/ng2-metadata

Answer 2

Я также получил этот же вопрос. Угловое приложение браузера 2 работает на стороне клиента. Чтобы исправить эту проблему, нам нужно обработать эту сторону сервера форм, когда запрос пришел от клиента. (Простой ответ обновление с OG мета-теги)

есть несколько вариантов:

• идут для угловых Юниверсал: немного трудно подход

• простой ручкой это через URL переписывания (веб-сервер): это что я использовал

это мой веб-конфигурации для URL Rewrite: Я взял динамический ог имя изображения из параметра запроса (..og = [имя файла])

<rewrite> 
 
\t <outboundRules rewriteBeforeCache="true"> 
 
\t <rule name="Add tracking script" preCondition="" patternSyntax="ECMAScript"> 
 
    <match filterByTags="None" pattern="ogimagepath" /> 
 
    <conditions> 
 
    <add input="{QUERY_STRING}" pattern="[^]*og=([0-9]+)" /> 
 
    </conditions> 
 
    <action type="Rewrite" value="{C:1}" /> 
 
    </rule> 
 
</outboundRules> 
 
</rewrite>

Answer 3

Вы можете использовать Meta службу ANGULAR, чтобы изменить мета-теги:

import { Title, Meta } from '@angular/platform-browser'; 

export class MyClass { 
    constructor(
    private metaService: Meta 
) { 
    // Build and change the og:image meta 
    const baseUrl = window.location.protocol + '//' + window.location.hostname; 
    const imageUrl = baseUrl + '/path/to/image.png'; 

    this.metaService.addTag({ property: 'og:image', content: imageUrl }); 
    // or it it already exists, use this 'updateTag' 
    // this.metaService.updateTag({ property: 'og:image', content: imageUrl }); 
    } 
}