5
edits
FirefoxOS/Pin the Web/Optimising Content: Difference between revisions
FirefoxOS/Pin the Web/Optimising Content (view source)
Revision as of 14:26, 21 July 2015
, 21 July 2015Undo revision 1085843 by Gmarty (talk)
Benfrancis (talk | contribs) (Initial overview of how to optimise content for Pin the Web) |
|||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 25: | Line 25: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>My Page</title> | <title>My Page</title> | ||
<link rel="icon" type="image/png" href="icon.png" sizes="64x64"> | <link rel="icon" type="image/png" href="icon.png" sizes="64x64"> | ||
<meta name="description" content="This is my page"> | <meta name="description" content="This is my page"> | ||
<meta name="theme-color" content="#0000ff"> | <meta name="theme-color" content="#0000ff"> | ||
</head> | </head> | ||
In order to create a more interesting and useful card which goes beyond the basic template, you can specify a type for your content and provide additional metadata using RDFa style meta tags and the popular Open Graph vocabulary. [http://www.w3.org/TR/rdfa-core/ RDFa] is a W3C Recommendation | In order to create a more interesting and useful card which goes beyond the basic template, you can specify a type for your content and provide additional metadata using RDFa style meta tags and the popular Open Graph vocabulary. [http://www.w3.org/TR/rdfa-core/ RDFa] is a W3C Recommendation which can be used to embed metadata in HTML and [http://ogp.me/ Open Graph] is a simple vocabulary for RDFa style meta tags which is already widely used on the web and consumed by social networks like Facebook and Twitter. | ||
Article example: | |||
<html prefix="og: http://ogp.me/ns#"> | |||
<head> | |||
<meta property="og:type" content="article" /> | |||
<meta property="og:title" content="My Article" /> | |||
<meta property="og:description" content="This is my article." /> | |||
<meta property="og:url" content="http://example.com/articles/my_article.html" /> | |||
<meta property="og:image" content="http://example.com/images/my_image.jpg" /> | |||
</head> | |||
Video example: | |||
<html prefix="og: http://ogp.me/ns#"> | |||
<head> | |||
<meta property="og:type" content="video.other" /> | |||
<meta property="og:title" content="My Video" /> | |||
<meta property="og:url" content="http://example.com/videos/my_video.html" /> | |||
<meta property="og:image" content="http://example.com/images/my_thumbnail.jpg" /> | |||
</head> | |||
== Advanced (JSON-LD) == | == Advanced (JSON-LD) == | ||
For more advanced use cases like representing complex structured data, linked resources and associated actions, we will have limited support for JSON-LD and the Schema.org vocabulary. [http://www.w3.org/TR/json-ld/ JSON-LD] is a W3C Recommendation for how to express metadata in JSON and [http://schema.org/ Schema.org] is a popular vocabulary already in wide use on the web and consumed by search engines like Google, Yahoo, Bing and Yandex. | For more advanced use cases like representing complex structured data, linked resources and associated actions, we will have limited support for JSON-LD and the Schema.org vocabulary. [http://www.w3.org/TR/json-ld/ JSON-LD] is a W3C Recommendation for how to express metadata in JSON and [http://schema.org/ Schema.org] is a popular vocabulary already in wide use on the web and consumed by search engines like Google, Yahoo, Bing and Yandex. | ||
Person Example: | |||
<head> | |||
<script type="application/ld+json"> | |||
{ | |||
"@context": "http://schema.org", | |||
"@type": "Person", | |||
"address": { | |||
"@type": "PostalAddress", | |||
"addressLocality": "Seattle", | |||
"addressRegion": "WA", | |||
"postalCode": "98052", | |||
"streetAddress": "20341 Whitworth Institute 405 N. Whitworth" | |||
}, | |||
"email": "mailto:jane-doe@xyz.edu", | |||
"image": "janedoe.jpg", | |||
"jobTitle": "Professor", | |||
"name": "Jane Doe", | |||
"telephone": "(425) 123-4567", | |||
"url": "http://www.janedoe.com" | |||
} | |||
</script> | |||
</head> | |||
= Site/App Metadata = | = Site/App Metadata = | ||