Question

因此，我拥有一个网站，并且在放置URL的各个地方都不会显示预览。有人告诉我在网站上放一个网站图标，我这样做了，但是那没用。

我尝试使用不同的代码变体，那些似乎也不起作用。

这是索引页的主要部分：

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-142179954-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-142179954-1');
    </script>

    <title>Dieselworks</title>
    <link rel="shortcut icon" href="/files/favicon.png" type="image/x-icon">
</head>

只希望此站点在链接的任何地方显示预览。

Answer 1

我认为您的网站图标语法看起来不错。我支持的大多数网站图标都为PNG格式，它们不必位于某些特殊的图标目录中。任何Web目录都可以。

收藏夹或网站图标将显示在移动设备上的浏览器标签和浏览器热门网站标签中。如果您发现图标在移动显示器上像素化，则需要一个视网膜版本（2x）。

返回预览。我假设您的意思是社交媒体预览，例如 FB 和 Twitter 。如果您使用的话，也许是WhatsApp。

FB引入了Open Graph协议并将其用于这些预览。在这里阅读更多。 https://developers.facebook.com/docs/sharing/webmasters

您可以在任何具有预览功能的网站上查看源文件。在“ og：”上搜索，您将看到它们的Open Graph标记，这些标记会在FB中生成预览。

这是一个开放图标记，例如取自FB开发页面。

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />

Twitter是另一种野兽。获取有关为其预览生成 Twitter卡的所有详细信息。 https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html

如果您的网站位于 WordPress 上， Yoast 会为您解决此问题。只需在Yoast插件的“社交共享”标签中填写您的网站详细信息即可。

希望有帮助！

Answer 2

请尝试使用以下URL来生成您的网站图标。

它还提供了一些简单的步骤来确定需要在代码中添加图标的位置。

https://realfavicongenerator.net/

Answer 3

对不起，我的回复很晚，有点忘了这篇文章。但是，我确实解决了问题，这是我所做的：

<title>text</title> --title that goes on the tab and the preview
<meta name="description" content="text"> --description for the preview
<meta property="og:image" content="imageurl" /> --image to put on the preview

感谢您的帮助！

为什么我的网站链接不显示预览？

3 个答案: