Article metadata
  • Copyright CC BY-SA 4.0. See licensing for additional details
  • Author
  • Created 2013-03-23
  • Last updated: 2015-03-01
  • Changes
    • 2015-03-01: Transfered from old doc repo and converted to markdown
    • 2015-03-01: Update with current configuration

Semantic Web

Various techniques to include metadata both in web pages and source code to simplify autogeneration, licensing, etc

Markup

This site currently uses three standards to convey semantic information about the pages

HTML5 Semantic Elements1

The new HTML5 semantic elements help to convey information about the content in the page. To the greatest extent possible each page will utilized the semantic tags instead of the non-semantic ones.

RDFa Lite 1.12

RDFa Lite is a light weight microdata format for HTML5 created by the W3C. It is my prefered method for marking up semantic information and will be used by default

Meta

The HTML meta tag is used to convey some information that appears to be standardly parsed and also to convey non-visible RDFa Lite information

Ontologies

Schema.org

The Schema.org microdata schema is sponsored by Google, Inc., Yahoo, Inc., and Microsoft Corporation.

  • It allows search engines to better identify the content.
  • Its site is laid out in a an easy to understand manner with plenty of examples

  • Proper markup can be tested from the Google Testing Tool

  • declaration (default): <html vocab="http://schema.org/" ...>

foaf (Friend of a Friend)

  • declaration: <html ... prefix="foaf: http://xmlns.com/foaf/0.1/ ...">

wot (Web of Trust)

  • declaration: <html ... prefix="... wot: http://xmlns.com/wot/0.1/">

data-vocabulary.org

  • Appears to be slowly replaced by Schema.org > Since June 2011, several major search engines have been collaborating on a new common data vocabulary called schema.org.3
  • Still needed for at least BreadCrumbs by Google
  • declaration: <div ... prefix="v: http://rdf.data-vocabulary.org/#">

MetaData Used

Every page

  • Formatting
    • Character Representation is UTF-8: <meta charset="utf-8"/>
    • Mobile Friendly4
      • <meta name="HandheldFriendly" content="true" />
      • <meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes,minimum-scale=0.5" />
  • Web Page information
    • Generator: <meta name="generator" content="CurrentGeneratorAndVersion"/>
    • Only put origin in referrer on cross origin reqeusts5: <meta name="referrer" content="origin-when-crossorigin"/>
    • Description: <meta name="description" content="YAMLSummary"/>
    • Authors: <meta property="foaf:maker" content="YAMLAuthorURL">
    • Title: <title property="foaf:name">YAMLTitle</title>

    • Breadcrumbs: Used by Google for Rich Snippet breadcrumb display6

      <div id="breadcrumb" prefix="v: http://rdf.data-vocabulary.org/#" >
  <span typeof="v:Breadcrumb">
    <meta property="v:title" content="CrumbYAMLTitle">
    <a property="v:url" href="CrumbURL">CrumbYAMLTitle</a>
  <span>
  ... Repeat for each breadcrumb ...
</div>

  • HTML5 Semantic Structure

    <head>
  <meta.../>
  <title.../>
</head>
<body>
  <header>
    <div id="google"/>       <!-- Google ads and Custom search -->
    <nav id="menu"/>         <!-- Top level navigation menu -->
    <div id="breadcrumb">    
     ... Breadcrumbs ...
    </div>
  </header>
  <main id="content">
     ... Different content described below ...
  </main>
  <footer/>
</body>

Tech Article

TBS

Blog

TBS

Person

TBS

References

“Data-Vocabulary.org.” Accessed March 2, 2015. http://www.data-vocabulary.org/.

Google. “Rich Snippets - Breadcrumbs - Webmaster Tools Help.” Accessed March 1, 2015. https://support.google.com/webmasters/answer/185417?hl=en.

Multiple. “Html - Tips for Optimizing a Website for Android’s Browser? - Stack Overflow.” Accessed March 1, 2015. http://stackoverflow.com/questions/548892/tips-for-optimizing-a-website-for-androids-browser.

W3C. “RDFa Lite 1.1.” Accessed March 2, 2015. http://www.w3.org/TR/rdfa-lite/.

———. “Referrer Policy.” Accessed March 1, 2015. http://www.w3.org/TR/referrer-policy/.

w3schools. “HTML5 Semantic Elements.” Accessed March 2, 2015. http://www.w3schools.com/html/html5_semantic_elements.asp.

  1. W3schools, “HTML5 Semantic Elements.” ↩

  2. W3C, “RDFa Lite 1.1.” ↩

  3. “Data-Vocabulary.org.” ↩

  4. Multiple, “Html - Tips for Optimizing a Website for Android’s Browser?” ↩

  5. W3C, “Referrer Policy.” ↩

  6. Google, “Rich Snippets - Breadcrumbs - Webmaster Tools Help.” ↩