是否有 W3C 标准元标记来确定用于表示网站的封面图像?

Is there a W3C standard meta tag to determine the cover image used to represent a website?

"screenshot" 用于反感网络应用程序的封面图片并不总是受欢迎

我注意到各种浏览器和其他软件正在使用 "screenshot" 他们想要在 GUI 中表示为快捷方式的网站,并将其用作元素/图标/按钮的封面图像快速导航到该站点。

最近我注意到我正在开发的网络应用程序的实时实例已保存到 Chrome 的仪表板,并且 "screenshot" 使用的封面图像显示了我的页面,就像加载屏幕正在转换一样out 来显示页面,导致封面图像不令人满意。

Apple 为此接受非标准标签

此外,iOS 允许将页面添加为带有应用程序图标的 Web 应用程序,并且默认情况下还将使用页面的屏幕截图作为应用程序图标,但它们确实有自己专有的元标记这允许开发人员选择用于表示 Web 应用程序的图标图像。

是否有标准的元标记?

很好,但我的问题是,是否存在或是否有 W3C 标准覆盖元标记的计划,该标准将允许开发人员传达 all[=25= 的首选封面图像] 包含站点图标或按钮图像的应用程序?

简短的回答是。 Facebook 通过开放图表获得 og:image。 Twitter 有 twitter:image。我确定还有 100 个其他竞争标准。

W3C「Manifest for a web application」标准草案

最接近这个问题中描述的(新)标准是一个名为 Manifest for a web application 的规范(aka Application Manifest):

This specification defines a JSON-based manifest that provides developers with a centralized place to put metadata associated with a web application: the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application.…

下面的示例 JSON 清单显示了如何为应用程序指定一组图标以及一组一个或多个 启动画面 和其他属性。

清单示例
{
  "lang": "en",
  "name": "Super Racer 2000",
  "short_name": "Racer2K",
  "icons": [{
        "src": "icon/lowres",
        "sizes": "64x64",
        "type": "image/webp"
      }, {
        "src": "icon/hd_small",
        "sizes": "64x64"
      }, {
        "src": "icon/hd_hi",
        "sizes": "128x128",
        "density": 2
      }],
  "splash_screens": [{
        "src": "splash/lowres",
        "sizes": "320x240"
      }, {
        "src": "splash/hd_small",
        "sizes": "1334x750"
      }, {
        "src": "splash/hd_hi",
        "sizes": "1920x1080",
        "density": 3
      }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}

要将清单与 Web application/document 相关联,您可以使用 <link rel=manifest>:

如何将 Web app/document 与清单关联的示例
<!doctype>
<html>
<title>Store finder - search</title>

<!-- Startup configuration -->
<link rel="manifest" href="manifest.webmanifest">

<!-- Fallback application metadata for legacy browsers -->
<meta name="application-name" content="Store Finder">
<link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico">
<link rel="icon" sizes="512x512" href="hi_def.png">
…

这是一个相对较新的规范,仍在完善和在浏览器中实现的过程中,因此它不是这里问题中问题的直接解决方案。但是作者来自 Mozilla 和 Google,以及英特尔,我认为您可以期待在不久的将来至少会看到对它的支持被添加到 Firefox 和 Chrome;两种浏览器都存在功能错误: