Как отображать миниатюру изображения при обмене ссылками на мой веб-сайт angular

Я сделал веб-сайт в angular, но когда я делюсь им в скайпе или других социальных сетях, миниатюра изображения не отображается и не отображается текст с веб-сайта. Что мне нужно сделать, чтобы отображался текст с веб-сайта и миниатюра изображения.

Уже ответили на stackoverflow.com/questions/19778620/…

— 19.06.2019 10:12

angular

19.06.2019 10:02

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

3 534

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

meta теги выводятся этими приложениями для этого.

Добавьте теги meta, чтобы получить их. Что-то вроде этого:

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8" />
    <title>SiddAjmeraDev</title>
    <base href = "/" />

    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <meta
      name = "description"
      content = "Siddharth Ajmera is a FullStack JavaScript Developer. He's a Google Developer Expert for Angular and Web Technologies. You can find him anywhere with SiddAjmera."
    />

    <meta property = "og:type" content = "website" />
    <meta
      property = "og:title"
      content = "Siddharth Ajmera - FullStack JavaScript Developer"
    />
    <meta
      property = "og:description"
      content = "Siddharth Ajmera is a FullStack JavaScript Developer. He's a Google Developer Expert for Angular and Web Technologies. You can find him anywhere with SiddAjmera."
    />
    <meta
      property = "og:image"
      content = "https://firebasestorage.googleapis.com/v0/b/siddajmera-dev.appspot.com/o/Avatar.jpg?alt=media&token=ba992ea4-3198-4971-b4ee-5454ec2b3cbd"
    />
    <meta property = "og:url" content = "www.siddajmera.dev/" />
    <meta
      property = "og:site_name"
      content = "Siddharth Ajmera - FullStack JavaScript Developer"
    />

    <meta
      name = "twitter:title"
      content = "Siddharth Ajmera - FullStack JavaScript Developer"
    />
    <meta
      name = "twitter:description"
      content = "Siddharth Ajmera is a FullStack JavaScript Developer. He's a Google Developer Expert for Angular and Web Technologies. You can find him anywhere with SiddAjmera."
    />
    <meta
      name = "twitter:image"
      content = "https://firebasestorage.googleapis.com/v0/b/siddajmera-dev.appspot.com/o/Avatar.jpg?alt=media&token=ba992ea4-3198-4971-b4ee-5454ec2b3cbd"
    />
    <meta name = "twitter:site" content = "@SiddAjmera" />
    <meta name = "”twitter:creator”" content = "@SiddAjmera" />

    <meta name = "category" content = "Education" />

    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <link rel = "icon" type = "image/x-icon" href = "favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Используйте это статьи для своего реф.

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

— 19.06.2019 10:27

Не обязательно делать это с помощью Angular Universal.

— 19.06.2019 10:43

19.06.2019 10:07

Вам нужно добавить правильную мета с помощью службы Мета a, а затем реализовать Угловой универсальный. По умолчанию angular является фреймворком на стороне клиента, что означает, что это JS на стороне клиента (браузера), который создает страницу и мета.

Но большинство общих ботов не будут отображать JS, а это означает, что когда вы делитесь своей страницей, единственный доступный html — это то, что находится в файле index.html, поэтому они не увидят метаданные или компонентный контент. Вот почему вам нужно использовать рендеринг на стороне сервера (с универсальным Angular), который будет отображать окончательный HTML-код любой страницы (с уже обработанными компонентами и метаданными). Затем это может использоваться ботами для получения правильной метаданных и контента страницы (для SEO).

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

— 19.06.2019 10:32

@zuyi Вы должны использовать angular universal, иначе большинство ботов не будут отображать javascript, как описано выше.

— 19.06.2019 10:33

Я немного сбит с толку, я просто хочу, чтобы, когда я делюсь ссылкой в социальных сетях, desc и thumb были снегом. Нужен ли мне угловой универсальный для этого тоже. Меня не волнует гугл или поисковые роботы.

— 19.06.2019 10:36

19.06.2019 10:15