I’ve been looking at how to provide metadata for social sharing for Plume blog and want to share some of the worms falling out of this can, and invite any advice, comment etc from those who know a bit about this stuff!
Refs
Useful refs I’ve collected:
- Solid CMS - options for document creation and management (forum post)
- HTML Metadata: List of Usable HTML Meta and Link Tags (github list)
- RDFa Specification (w3c)
Live Example
I took a look at what @RubenVerborgh uses on his blog for inspiration (below).
Ruben specifies the semantic vocabularies he’s using in the HTML/prefix attribute (in accordance with RDFa). I’m not sure this is necessary as it doesn’t seem to be referred to in articles I’ve seen, but looks like the ‘proper’ way to do this!
<html
lang=en
prefix="schema: http://schema.org/
og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
article: http://ogp.me/ns/article#
bibo: http://purl.org/ontology/bibo/
sioc: http://rdfs.org/sioc/ns#
bio: http://purl.org/vocab/bio/0.1/
time: http://www.w3.org/2006/time#"
resource="/blog/2018/12/28/designing-a-linked-data-developer-experience/"
typeof="schema:WebPage">
<head>
<meta charset=utf-8>
<title>Designing a Linked Data developer experience | Ruben Verborgh</title>
<link rel=stylesheet href="/styles/main.css">
<link rel=alternate type="application/atom+xml" href="/blog/latest.xml" title="Ruben Verborgh’s blog">
<link rel=alternate type="application/rss+xml" href="//rubenverborgh.disqus.com/designing_a_linked_data_developer_experience/latest.rss" title="Comments on “Designing a Linked Data developer experience”">
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=.5">
<meta property="dc:title" content="Designing a Linked Data developer experience"/>
<meta property="og:type" content=article>
<meta property="og:title" content="Designing a Linked Data developer experience">
<meta property="og:description" content="Making decentralized Web app development fun ◆ While the Semantic Web community was fighting its own internal battles, we failed to gain traction with the people who build apps that are actually used: front-end developers. Ironically, Semantic Web enthusiasts have failed to focus on the Web; whereas our technologies are delivering results in specialized back-end systems, the promised intelligent end-user apps are not being created…">
<meta property="og:image" content="https://ruben.verborgh.org/images/blog/front-end-devs.jpg">
<meta property="og:url" content="https://ruben.verborgh.org/blog/2018/12/28/designing-a-linked-data-developer-experience/">
<meta property="article:author" content="https://ruben.verborgh.org/profile/#me">
<meta property="article:published_time" content="2018-12-28T16:30:00+01:00">
<meta property="twitter:card" content=summary>
<meta property="twitter:site" content="@RubenVerborgh">
<meta property="twitter:creator" content="@RubenVerborgh">
Metadata for Social Sharing
Random articles on the topic suggest something like the following is appropriate, so this is what I’m thinking of doing for Plume, maybe with extras from Ruben’s example.
Let me know if you agree or have any suggestions.
Minimum to cover twitter and fb:
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">
More:
<meta property="og:type" content="article" />
<meta name="twitter:creator" content="@author_handle">
WebID:
I haven’t seen any use of WebID yet. Would it make sense to use the WebID profile document URI like this, or in some other way:
<link rel=”author” href=”https://thewebalyst.solid.community/profile/card”/>
I haven’t decided what would be best for Plume yet, so if you have any thoughts or advice please share them.