Ответ 1

Open Graph OG Тэги должны быть внутри исходного кода!

Вам нужно предоставить статическую HTML-страницу, содержащую теги открытого графика, такие как og: image, og: title и og: description в исходном коде html, поскольку facebook, twitter и co просто очищают обычный html, не отображая его через javascript. Angular динамически обновляет dom через js, и поэтому сканеры просто получают исходный index.html.

Существует несколько способов обслуживания html-страниц, содержащих теги с открытым графиком, и решение вашей проблемы:

• Серверный рендеринг с угловым универсальным
• использовать прокси рендеринг вашей страницы
• перезаписывает index.html на лету, заменяя теги og
• обслуживание статических html-страниц (не уверен, поддерживается ли это angular)

Я полагаю, вы уже используете что-то вроде ngx-meta для добавления тегов og?

Angular Universal - Рендеринг на стороне сервера с метатегами в Angular 2/3/4/5

Я думаю, что рендеринг на стороне сервера является наиболее подходящим способом решения вашей проблемы. Для этого вы можете разместить сервер узла или использовать, например. AWS Lambda. Недостатком этого является то, что ваше приложение должно активно размещаться и больше не может обслуживаться статически. В любом случае это, кажется, лучший способ, так как он также улучшает SEO. Angular Universal - это термин для поиска:

• Угловой универсальный
• Угловой универсальный стартер
• Универсальная угловая PWA с серверным рендерингом без сервера с лямбда-шаблоном aws

Универсальная угловая Prerendering при сборке

Вы также можете предварительно обработать определенные маршруты в процессе сборки и использовать angular в качестве статического приложения с несколькими предварительно обработанными файлами index.html. Если у вас есть только несколько статических маршрутов, это прекрасно работает. Думая о более общих маршрутах с динамическими частями, это не решение. Перейти на стороне сервера рендеринга. Угловой универсальный шаблон также содержит пример для этого. Смотрите prerender.ts

Альтернативные решения

Предварительный рендеринг Angular с прокси для предоставления тегов OG

Если вы хотите избежать реализации серверного/предварительного рендеринга во время процесса сборки (настройка angular universal иногда является проблемой для не очень хорошо структурированных приложений.), Вы можете попробовать использовать прокси-сервис, предварительно отображающий вашу страницу. Взгляните на например. prerender.io.

Перезапись index.html

Перенаправьте все запросы в скрипт, который перезаписывает теги og :. Например. Использование PHP и .htaccess для перезаписи тегов og это возможно и в современных средах. Например. Вы можете использовать облачный фронт/API-шлюз и лямбда-функцию. Еще не видел пример для этого.

Кэш Facebook и отладка открытого графика

Имейте в виду, что кэши, возможно, все еще кэшировали информацию об открытом графике при первом сканировании. Убедитесь, что ваш исходный код самый последний, и все кэши, обратные прокси, такие как nginxx, cloudfront, очищены.

Используйте отладчик Facebook для отладки кэшей с открытым графом и очистки кэша с открытым графом Facebook

Ответ 2

Попробуйте это (используя fb API: v2.12):

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  action_properties: JSON.stringify({
    object : {
      'og:url': 'url', // your url to share
      'og:title': 'title',
      'og:site_name':'site_name',
      'og:description':'description',
      'og:image': 'image Url',//
      'og:image:width':'250',//size of image in pixel
      'og:image:height':'257'
    }
  })
}, function(response){
  console.log("response is ",response);
});

Ответ 3

Если вы используете Angular 4, почему бы не создать серверную страницу страниц с помощью Angular Universal - таким образом вы можете программно создавать теги HEAD до того, как страница будет загружена браузером

https://universal.angular.io/

Ответ 4

Попробуйте prerender.io

Позволяет вашему сайту Javascript отлично сканировать поисковые системы.

Ответ 5

В угловых 6 динамический метатег не отражается в index.html

Так что единственный способ получить динамический мета-контент с помощью .htaccess.

Если вы хотите визуализировать динамический контент, который вам нужен, воспользуйтесь .htaccess.

RewriteCond% {HTTP_USER_AGENT} facebookexternalhit/1.1 | Twitterbot | Pinterest | linkedinbot | WhatsApp | Viber | SkypeUriPreview | Google. * Фрагмент [NC, OR]

Для получения дополнительной информации:

https://gist.github.com/thoop/8072354

https://www.winhelp.info/create-browser-whitelist-with-htaccess.html

Ответ 6

По состоянию на 2018/19 гг., И если ваша главная цель - SEO (или, возможно, более "SMO" - Оптимизация в социальных сетях - поскольку робот Google отлично справляется с оценкой JavaScript, но большинство ботов в социальных сетях этого не делают), возможно, ваше предпочтительное решение по БСО должно не быть Angular Universal, а то, что использует безголовый браузер.

Это подпадает под категорию "прокси" от ответа Мануэля, но так как я еще не видел, чтобы они опубликовали здесь два (полтора) действительно хороших решения:

Rendertron

Он поддерживается самой командой Google Chrome и является просто отличной конечной точкой для рендеринга вашего приложения и его возврата.

Rendora

Как и в Rendertron, но в этом есть промежуточное программное обеспечение (то есть, где и как вы решаете, какие запросы будут обработаны, а какие нет), уже встроено, а также поставляется с некоторыми более продвинутыми, но удобными функциями, такими как кеширование. Поэтому он действительно очень близок к цели "необходима нулевая конфигурация" и даже проще в настройке, чем Rendertron.

кукольник

Снова поддерживаемая командой Google Chrome (и фактически используемая Rendertron), Puppeteer предоставляет основанный на узле API высокого уровня для Chrome без головы. Так что, если предыдущие проекты для вас трудны, вы, вероятно, сможете реализовать подходящее решение с помощью Puppeteer, но, очевидно, это будет больше работы, чем просто использование Rendertron или Rendora.

По сравнению с Angular Universal эти решения имеют огромное преимущество: ваш проект приложения может оставаться полностью независимым от используемого инструмента SSR (он может даже использовать любую другую технологию, кроме Angular). И это, очевидно, дает вам не только большую гибкость для вашего собственного кода, но и для выбора пакетов, поскольку вам не нужно беспокоиться о том, совместимы они с Angular Universal или нет. Их недостатком может быть небольшое снижение производительности, но если вы просто нацелены на ботов, это, вероятно, не будет иметь значения. И если вы используете кеширование Rendora, это может даже не быть правдой, и у вас может быть увеличение производительности. Однако, если бы это было сопоставимо с увеличением производительности, которого вы можете достичь с помощью Angular Universal, я не знаю. Но имейте в виду, что когда мы говорим об увеличении производительности от SSR, мы всегда говорим только о времени загрузки первой страницы. Поэтому, как правило, важность этого не слишком высока, поскольку ваши пользователи будут намного больше взаимодействовать с вашим приложением после его первой загрузки. Если они этого не делают, и у вас есть в основном анонимные пользователи, которые просто проверяют одну страницу, а затем уходят, вы, вероятно, в первую очередь создадите не PWA, а классическую веб-страницу...

TL; Dr просто посмотрите Rendora и Rendertron, они могут быть тем, что вы ищете, и доставят вас туда очень легко и быстро.