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

时间:2015-09-08 16:42:50

标签: html w3c

用于重新发布网络应用的“屏幕截图”封面图片并不总是有利的

我注意到各种各样的浏览器和其他软件正在将网页的“屏幕截图”用作GUI中的快捷方式,使用它作为元素/图标/按钮的封面图像以快速导航到该网站。

最近我注意到我正在开发的网络应用的实时实例已保存到Chrome的信息中心,并且使用的“屏幕截图”封面图像显示我的页面,就像加载屏幕正在转换显示页面一样,导致一个不令人满意的封面图片。

Apple接受此

的非标准标记

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

是否有标准元标记?

这很好,但我的问题是,是否存在或者是否存在涵盖元标记的W3C标准的计划,该标准将允许开发人员为所有应用程序传递优先封面图像该网站的图标或按钮图像?

2 个答案:

答案 0 :(得分:3)

W3C「Web应用程序的清单」草案标准

与此问题中描述的最接近的(新)标准是名为Manifest for a web application的规范( aka 应用程序清单):

  

此规范定义了一个基于JSON的清单,为开发人员提供了一个集中放置与Web应用程序关联的元数据的位置:Web应用程序的名称,图标链接以及用户启动Web时要打开的首选URL应用程序。...

下面的示例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应用程序/文档相关联,请使用<link rel=manifest>

如何将Web应用程序/文档与清单相关联的示例
<!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和谷歌,以及英特尔,我认为你可以期待在不久的将来至少增加对Firefox和Chrome的支持;两个浏览器都有功能错误:

答案 1 :(得分:1)

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