是否有W3C标准元标记来确定用于表示网站的封面图片? [英] Is there a W3C standard meta tag to determine the cover image used to represent a website?

查看:91
本文介绍了是否有W3C标准元标记来确定用于表示网站的封面图片?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



我注意到各种浏览器和其他软件都采用了屏幕截图的网站,他们想要代表作为快捷方式在图形用户界面使用作为元素/图标/按钮快速导航到该网站的封面图片。



最近我注意到我正在开发的一个Web应用程序的实例已保存到Chrome的仪表板中,并且使用的屏幕截图封面图像显示了我的页面,就像加载屏幕正在转换显示页面一样,导致不满意的封面图像。



Apple为这个



接受一个非标准标记。另外,iOS允许将页面添加为Web Apps使用应用程序图标,默认情况下也会使用该页面的屏幕截图作为应用程序图标,但它们具有自己的专有元标记,允许开发人员选择用于表示Web应用程序的图标图像。

是否有标准元标记?



这很好,但我的问题是,是否存在或者是否有W3C标准的计划涵盖元标记,这将允许开发人员为包含网站的图标或按钮图像的所有应用程序传达提供的封面图像? 与此问题最接近的(新)标准是一个称为 网络清单应用程序清单

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

下面的示例JSON清单显示了如何指定一组图标以及一组或多组飞溅屏幕和应用程序的其他属性。



示例清单

  {
lang:en,
name:Super Racer 2000,
short_name:Racer2K ,
图标:[{
src:icon / lowres,
sizes:64x64,
type:image / webp
},{
src:icon / hd_small,
sizes:64x64
},{
src:图标/ hd_hi,
sizes:128x128,
density:2
}],
splash_screens:[{
src: splash / lowres,
sizes:320x240
},{
src:splash / hd_small,
sizes:1334x750
$ b $ s $ b $ s $ b $ s $ b $ size $ s
$ b $ s
$ s $ bscope:/ racer /,
start_url:/racer/start.html,
display:全屏,
orientation:风景,
theme_color:aliceblue,
background_color:red
}

要将清单与Web应用程序/文档相关联,您可以使用< link rel = manifest>

如何将Web应用程序/文档与清单关联的示例
$ b

 <!doctype> ; 
< html>
< title>商店搜寻器 - 搜寻< /标题>

<! - 启动配置 - >
< link rel =manifesthref =manifest.webmanifest>

<! - 传统浏览器的后备应用程序元数据 - >
< meta name =application-namecontent =Store Finder>
< link rel =iconsizes =16x16 32x32 48x48href =lo_def.ico>
< link rel =iconsizes =512x512href =hi_def.png>
...

这是一个相对较新的规范,目前仍在完善和实施过程中浏览器,所以它不是这个问题的直接解决方案。但作者来自Mozilla和谷歌以及英特尔,并且我认为您可以期待在不久的将来能够支持它至少添加到Firefox和Chrome中;这两个浏览器都有功能缺陷:


A "screenshot" cover image used to resent web apps isn't always favorable

I've noticed various browsers and other softwares out there are taking a "screenshot" of websites that they want to represent as a shortcut in a GUI using that as a cover image for an element / icon / button to quickly navigate to that site.

Recently I noticed my live instance of a web app I'm developing saved to the dashboard of Chrome, and the "screenshot" cover image used showed my page just as the loading screen was transitioning out to display the page, resulting in an unsatisfactory cover image.

Apple accepts a non-standard tag for this

Also, iOS allows pages to be added as Web Apps with an app icon, and by default will also use a screenshot of the page as the app icon, but they do have their own proprietary meta tag which allows the developer to choose the icon image used to represent the web application.

Is there a standard meta tag for this?

That's good, but my question is, does there exist or is there a plan for a W3C standard covering a meta tag which will allow developers to communicate the preffered cover image for all applications which incorporate an icon or button image for the site?

解决方案

W3C「Manifest for a web application」draft standard

The (new) standard that’s closest to what’s described in this question is a specification called 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.…

The example JSON manifest below shows how to specify a set of icons as well as a set of one or more splash screens and other properties for an application.

Example manifest

{
  "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"
}

To associate a manifest with a Web application/document, you use <link rel=manifest>:

Example of how to associate a Web app/document with a manifest

<!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">
…

It’s a relatively new spec and still in the process of being refined and implemented in browsers, so it’s not an immediate solution to the problem in the question here. But the authors are from Mozilla and Google, along with Intel, and I think you can expect to see support for it getting added at least to Firefox and Chrome in the near future; there are feature bugs open for both browsers:

这篇关于是否有W3C标准元标记来确定用于表示网站的封面图片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆