Confirmed users
394
edits
FirefoxOS/Pin the Web/Optimising Content: Difference between revisions
FirefoxOS/Pin the Web/Optimising Content (view source)
Revision as of 14:10, 14 July 2015
, 14 July 2015Added Open Graph and Schema examples
Benfrancis (talk | contribs) m (tweaked RDFa desscription) |
Benfrancis (talk | contribs) (Added Open Graph and Schema examples) |
||
| Line 32: | Line 32: | ||
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. | 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 = | ||