Adding semantic markup to any Web site requires access to the raw HTML. Most blogging platforms provide at least basic access to portions of the source code, and the level of access you have will determine how granular your semantic markup can get. Weebly's robust WYSIWYG editor with drag-and-drop content elements precludes marking up the actual page content. However, the theme editor provides comprehensive access to the templates that scaffold the site presentation which is enough to add basic semantic markup to the entire site.
One of the best tools for quickly checking the state of your semantic markup is RDFa / Play. Entering HTML source code for any Web page into the box on the left side of the page produces a semantic markup visualization and the raw semantic data in Turtle, or Terse RDF Triple Language. Turtle is an easy to read serialization of the Resource Description Framework (RDF) data model which is the backbone of the semantic web. Before I started with the markup process, I ran the code for my home page through RDFa / Play and discovered that Weebly automatically creates some semantic data using Facebook's OpenGraph protocol. Here's a look at the basic OpenGraph triples for my site:
@prefix og: <http://ogp.me/ns#> .
<http://rdfa.info/play/>
og:site_name "Andrew Weidner";
og:title "Andrew Weidner - Portfolio";
og:description "Andrew Weidner's Professional Portfolio";
og:image "http://andrewweidnerportfolio.weebly.com/uploads/6/8/9/2/6892195/3628371.jpg?132";
og:image "http://c.statcounter.com/8378456/0/22056081/1/";
og:url "http://andrewweidnerportfolio.weebly.com/" .
It's great that Weebly is making an effort to provide semantic markup for their clients, but I'd like enhance this data with different styles of markup and more data about my site. I chose to add semantic markup defined by four different vocabularies:
All of these ontologies are widely used, and each adds value to the content in different ways. The flexible framework provided by RDFa allows us to mix and match vocabularies within semantic groupings to better describe our Web resources.
To begin, I added the @prefix attribute to the <head> tag which allows me to specify which vocabulary a particular semantic tag belongs to. These are the prefixes that I added:
<head prefix="
dc: http://purl.org/dc/terms/
schema: http://schema.org/
foaf: http://xmlns.com/foaf/0.1/
cc: http://creativecommons.org/ns#
">
<span
typeof="schema:WebPage"
resource="http://andrewweidnerportfolio.weebly.com/#site"
>
<meta property="schema:name"
content="Andrew Weidner - Portfolio" />
<meta property="schema:description"
content="Andrew Weidner's Professional Portfolio" />
<meta property="dc:creator"
content="Andrew Weidner" />
<meta property="dc:rightsHolder"
content="Andrew Weidner" />
<meta property="cc:license" resource="http://creativecommons.org/licenses/by/3.0/deed.en_US" />
The second logical grouping provides detailed information about me, the site's creator, in the Friend of a Friend format. Here is the code in its entirety:
<span typeof="foaf:Person" resource="http://andrewweidnerportfolio.weebly.com/#me">
<meta property="foaf:firstName" content="Andrew" />
<meta property="foaf:lastName" content="Weidner" />
<meta property="foaf:homepage" content="http://andrewweidnerportfolio.weebly.com/" />
</span>
And here is the entire data set in Turtle, minus the original OpenGraph triples:
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix schema: <http://schema.org/> .
@prefix dc: <http://purl.org/dc/terms/> .
@prefix cc: <http://creativecommons.org/ns#> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
<http://andrewweidnerportfolio.weebly.com/#site>
rdf:type schema:WebPage;
schema:name "Andrew Weidner - Portfolio";
schema:description "Andrew Weidner's Professional Portfolio";
dc:creator "Andrew Weidner";
dc:rightsHolder "Andrew Weidner";
cc:license <http://creativecommons.org/licenses/by/3.0/deed.en_US> .
<http://andrewweidnerportfolio.weebly.com/#me>
rdf:type foaf:Person;
foaf:firstName "Andrew";
foaf:lastName "Weidner";
foaf:homepage "http://andrewweidnerportfolio.weebly.com/" .