Skip to content

Latest commit

 

History

History
 
 

metadata-enhanced-semantics

README.md

Metadata & enhanced semantics

There are a bunch of standards to enhance the semantics of our websites. Search engines look for these semantics, infer information from them, and adapt their search results to them. Also, when people link to your website from social media sites you can provide defaults for the displayed content.

Structured data

⬇ Download sample Microdata person · ⬇ Download sample Microdata recipe

There are three major standards for structured data: Microdata, Microformats, and RDFa Lite. Microdata is quickly becoming the most popular and is the format that Google encourages authors to use.

Using structured data, we can enhance the semantics of our website so search engines more thoroughly understand our content.

The Microdata extends all the semantics you choose in HTML—concentrate on choosing the best HTML tags first then add Microdata.

Here’s an example person/contact marked up with Microdata:

<div itemscope itemtype="http://schema.org/Person">
	<h1 itemprop="name">Sir John A. Macdonald</h1>
	<span itemprop="jobTitle">Prime Minister of Canada</span>
	<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">24 Sussex Dr.</span>
		<br>
		<span itemprop="addressLocality">Ottawa</span>,
		<span itemprop="addressRegion">ON</span>,
		<span itemprop="addressCountry">Canada</span>
		<br>
		<span itemprop="postalCode">K1A 0A3</span>
	</p>
	<dl>
		<dt>E-mail:</dt><dd><a href="mailto:[email protected]" itemprop="email">[email protected]</a></dd>
		<dt>Tel:</dt><dd><a href="tel:+16139416900" itemprop="telephone">613-941-6900</a></dd>
		<dt>Website:</dt><dd><a href="http://canada.ca/" itemprop="url">http://canada.ca/</a></dd>
	</dl>
</div>

There are a few attributes to understand:

  • itemtype—what kind of thing you’re marking up, there’s a big list
  • itemscope—defines the HTML element that surrounds all the content related to the item
  • itemprop—defines a single piece on content for the item

Links

Validators

Examples

Social semantics

The web is an inherently social place. To encourage finding and understanding social connections we can define them in HTML using the relationship (rel) attribute.

Relationships

⬇ Download example relationships

Relationships can be defined in HTML using the rel attribute. These relationships semantically connect people together on the web.

<!-- Linking to `me` -->
<a href="http://thomasjbradley.ca" rel="me">Thomas J Bradley</a>
<!-- Linking to my `spouse` -->
<a href="http://elizabethandjane.ca" rel="spouse">elizabeth&amp;jane photography</a>
<!-- Linking to a `friend` and a `colleague` -->
<a href="http://jedlooker.com/" rel="friend colleague">Jed Looker</a>
<!-- Linking to an `external` website -->
<a href="http://gmpg.org/xfn/creator" rel="external">XFN Creator</a>
<!-- Defining a link that represents the `home` page of your website -->
<a href="/index.html" rel="home">Home</a>
<!--
	Defining that the linked item is a download using `enclosure`
	Using the `download=""` attribute, the file will be downloaded to the computer instead of opening
	The content inside the download attribute can define its final file name
-->
<a href="/files/download.pdf" download="Download.pdf" rel="enclosure">Download Now!</a>
<!-- Linking to the `license` for this document -->
<a href="https://github.com/algonquin-design/html-css/tree/gh-pages/LICENSE" rel="license">License</a>

Links

Authorship

In Google you can define whom the author of a website is by connecting your Google+ profile.

<head>
	⋮
	<link href="https://plus.google.com/{{YOUR PERSONAL GOOGLE+ PROFILE HERE}}" rel="author">
	⋮
</head>

Links

Facebook Open Graph

⬇ Download sample Facebook Open Graph

Facebook uses the Open Graph Protocol to extract information from your website when a user links to it.

You can control the information in the share preview box using the Facebook meta tags.

Four tags are required to support the Open Graph Protocol:

<head>
	⋮
	<meta property="og:type" content="article">
	<meta property="og:title" content="Title of this page, same as title tag">
	<meta property="og:url" content="http://fullurl.com/to-this/page/">
	<!-- Image dimensions: minimum 200x200; recommended 1500x1500 -->
	<meta property="og:image" content="http://fullurl.com/to-this/image.jpg">
	<!-- `og:site_name` is optional but highly recommended -->
	<meta property="og:site_name" content="Name of your website">
	<!-- `og:description` is also optional, but could easily be filled with the meta description -->
	<meta property="og:description" content="Description of this page, same as meta description">
	⋮
</head>

There are plenty of optional tags for descriptions, author info—and more specific forms of content like: music, video, books, etc.

Links

Twitter Cards

⬇ Download sample Twitter Card

Twitter Cards allow designers to attach supplemental information to tweets when people link to your website.

You can control the information in the Twitter Card box using the Twitter meta tags.

The default card is the “summary” card; it requires four tags:

<head>
	⋮
	<meta name="twitter:card" content="summary">
	<meta name="twitter:title" content="Title of this page, same as title tag">
	<meta name="twitter:url" content="http://fullurl.com/to-this/page/">
	<meta name="twitter:description" content="Description of this page, same as meta description">
	<!-- The image should be 120x120 pixels in dimension -->
	<meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">
	⋮
</head>

There are many optional tags for larger images and different types of content like: photos, galleries, apps, media, and products.

Links