Question

我创建了一个有角度的网站，但是当我在Skype或其他社交媒体上共享它时，图像缩略图不会显示，也不会显示该网站的任何文本。我该怎么做才能显示网站上的文本和图像缩略图。

Answer 1

这些应用程序会推断出

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>

使用this Articles作为参考。

Answer 2

您需要使用Meta服务a添加正确的元，然后实现Angular Universal。默认情况下，angular是一个客户端框架，这意味着它是客户端（浏览器）上的JS，用于构建页面和元数据。

但是大多数sharebot不会渲染JS，这意味着当您共享页面时，唯一可用的html是index.html文件中的内容，因此它们将看不到任何元数据或组件内容。这就是为什么您需要使用服务器端渲染（使用Angular Universal），它将渲染任何页面的最终html（组件和元数据已经渲染）。然后，bot可以使用它来获取正确的meta和页面内容（用于SEO）

共享我的有角网站的链接时如何显示缩略图

2 个答案: