Динамически добавлять метатеги в index.html для предварительного просмотра общей ссылки

Question

У меня есть угловая страница, которая отображает богатый контент (PDF, изображения, видео и т. Д.). Мне нужно создать разделяемую ссылку на эту HTML-страницу с правильными метатегами, чтобы правильный заголовок и описание отображались в предварительном просмотре расширенных ссылок (когда его отображают другие службы, такие как Facebook, Twitter, SMS и т. Д.). Совместно используемая ссылка содержит все данные, необходимые для моего проекта для извлечения содержимого HTML-страницы. Как динамически добавить правильные метатеги на страницу index.html моего углового проекта, чтобы предварительный просмотр совместно используемой ссылки правильно отображался в других службах?

Пример того, как я хочу, чтобы предварительный просмотр ссылки отображался при публикации на других платформах: https://i.stack.imgur.com/ZRJ8X.png

Answer 1

Чтобы метатеги работали, они должны быть на HTML-странице ссылки до запуска любого javascript.Некоторые платформы могут запускать некоторые javascript на внешнем сайте при генерации предварительного просмотра ссылки, но в целом , метатеги должны быть на html-странице до угловой загрузки, поэтому код на стороне клиента на данной странице не будет работать для этой цели.

Для моих целей я обнаружил, что наиболее эффективным способом достижения этого эффекта является предоставление разделяемых ссылок отдельно от углового проекта, как перенаправления HTML.

Например, вы можете сделать так, чтобы ваши общедоступные ссылки действительно ссылались на ваш API, а API передавал данные при перенаправлении.Вместо example.com/article?id=2&exampleParam=123 у вас будет api.example.com/share?id=2&exampleParam=123.Конечная точка API /share вернет HTML-файл с правильными метатегами, а также метатег, который будет перенаправлять в ваше приложение: <meta http-equiv="refresh" content="0; URL='https://example.com/article?id=2&shareableParam=123'" />

Вам просто нужно, чтобы ваша общедоступная ссылка привела кHTML-страница с правильными метатегами с перенаправлением на фактический URL-адрес вашего приложения.Насколько мне известно, не существует более простого способа сделать это, учитывая, что мета-теги должны присутствовать до запуска angular.Рендеринг угловых проектов на стороне сервера - это совершенно другая игра, но я предполагаю, что большинство людей, сталкивающихся с этой проблемой, будут использовать только рендеринг на стороне клиента.