Angular 如何在共享我的网站链接时显示图像缩略图_Angular

Angular 如何在共享我的网站链接时显示图像缩略图

angular

Angular 如何在共享我的网站链接时显示图像缩略图,angular,Angular,我用angular创建了一个网站，但当我在skype或其他社交媒体上共享时，图像缩略图不会显示，也不会显示网站上的任何文本。我必须做些什么才能显示网站的文本和图像缩略图。meta标记由这些应用程序推断出来添加meta标记以获取它们。类似这样的： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>SiddAjmeraDev

我用angular创建了一个网站，但当我在skype或其他社交媒体上共享时，图像缩略图不会显示，也不会显示网站上的任何文本。

我必须做些什么才能显示网站的文本和图像缩略图。

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>


西达杰梅拉德夫
为了便于参考，您需要使用服务a添加正确的元，然后实现。默认情况下，angular是客户端框架，这意味着它是客户端（浏览器）上的JS，用于构建页面和元数据
但是大多数Sharebot不会呈现JS，这意味着当您共享页面时，唯一可用的html是index.html
文件中的内容，因此他们不会看到任何元或组件内容。这就是为什么需要使用服务器端呈现（使用Angular universal），它将呈现任何页面的最终html（已经呈现组件和元数据）。这可以被机器人用来获取正确的元数据和页面内容（用于SEO）
已经在感谢中得到了回答…尽管有一个问题。。当我共享链接时，将这些添加到角度前端是否足以显示图像和描述的预览？还是必须同时执行角度通用？不一定要使用角度通用来执行此操作。在前端添加元足够显示图像和描述的预览，当我共享链接时，还是必须执行此操作要做angular universal。@zuyi您必须使用angular universal，否则大多数共享机器人不会呈现javascript，如上所述，我有点困惑，我只是希望当我在社交媒体上共享链接时，desc和thumb应该是雪白的。我也需要角万向吗。我不在乎谷歌或搜索机器人。