sonofbluerobotFront-End Engineering With Standards

Archive for the ‘meta’ Category

Using Dublin Core HTML Markup for Increased Accessibility

Posted on: No Comments

Dublin Core is a set of metadata elements that provide a fundamental group of text elements through which most resources can be described and catalogued. A Dublin Core metadata record is intended to be used for cross-domain information resource description and have become standards in the fields of library science and computer science.

Dublin Core Metadata Initiative (dcmi) was incorporated as in independent entity, providing an open forum for developing interoperable metadata standards ecompassing a broad range of purposes and business models.

The Dublin Core standard includes two levels: Simple and Qualified. Simple Dublin Core comprises 15 elements, while Qualified Dublin Core includes three additional elements and qualifiers that refine the semantics of the elements so they are useful in resource discovery. The context of this blog post will focuses on the Simple Dublin Core Metadata Element Set in conjunction with a related link element.

Utilizing Dublin Core meta elements provides ways for a document to be indexed using several distinct, searchable fields. Thus, the document can be searched by said fields meaning it can be located more specifically than documents not using Dublin Core, therefore increasing findability, searchability and locatability.

Simple Dublin Core Metadata Element Set

The Simple Dublin Core Metadata Element Set (DCMES) consists of 15 metadata elements, listed below:

Title Markup Description

Each Dublin Core element is optional and may be repeated. The DCMI has established standard ways to refine elements and encourage the use of encoding and vocabulary schemes. There is no prescribed order in Dublin Core for presenting or using the elements.

Contributor meta name="DC.Contributor" content="publisher-name" / An entity responsible for making contributions to the resource. Examples include a person, organization or service. Typically, the name of a Contributor should be used to indicate the entity.
Coverage meta name="DC.Coverage" content="World" / Spatial or temporal topic of the resource, spacial applicability of the resource or the jurisdiction under which the resource is relevant. Spatial topic and spatial applicability may be a named place or a location specified by geographic coordinates. Temporal topic may be a name period, date or date range. Jurisdiction may be a named administrative entity or a geographic place to which the resource applies. Best practice here is to used a controlled vocabulary such as the tgn. If appropriate, named places or time periods can be used in preference to numeric identifiers (such as sets of coordinates or date ranges).
Creator meta name="DC.Creator" content="Administrator" / An entity primarily responsible for making the resource, like a person, organization or service. Typically, the name of a Creator should be used to indicate the entity.
Date meta name="DC.Date" scheme="W3CDTF" content="2004-01-01"/ Point or period of time associated with an event in the lifecycle of a resource. May be used to express temporal information at any level of granularity. Best practice is to use an encoding scheme for Date.
Description meta name="DC.Description" lang="en" content="publisher-name" / Account of the resource; may include (but not limited to) an abstract, a table of contents, graphical representation, or a free-text account of the resource.
Format meta name="DC.Format" scheme="IMT" content="text/html" / File format, physical medium or dimensions of the resource. Examples of dimensions include size and duration. Best practice is to use a controlled vocabulary, as in this example using mime types.
Identifier meta name="DC.Identifier" scheme="uri" content="http://catalog.loc.gov/67-26020" / An unambiguous reference to the resource within a given context. Best practice is to identify said resource by means of a string conforming to a formal identification system.
Language meta name="DC.Language" content="en" / Language of the resource. Best practice is to use a controlled vocabulary.
Publisher meta name="DC.Publisher" content="publisher-name" / Entity responsible for making the resource available, including a person, service or organization. Typically the name of a Publisher should be used to indicate the entity.
Relation meta name="DC.Relation" content="publisher-name" / Related resource; best practice is to identify by means of a string conforming to a formal identification system.
Rights meta name="DC.Rights" content="http://example.org/legal-terms-of-use.html" / Information about rights held in and over the resource, typically including various property rights (including intellectual property rights) associated with the resource.
Source meta name="DC.Source" content="/meta-tags/" / Related resource from which described resource is derived; may be derived from the related resource in whole or in part. Best practice is to identify the related resource by means of a string conforming to a formal identification system.
Subject meta name="DC.Subject" lang="en" content="Heart Attack" / Topic of the resource, typically represented by keywords, key phrases or classification codes. Best practice is to use a controlled vocabulary. To describe the spatial or temporal topic of the resource use the Coverage element.
Title meta name="DC.Title" lang="en" content="Hamlet in Iceland; being the Icelandic romantic Ambales saga" / Resources given name, typically the name by which a resource is formally known.
Type meta name="DC.Type" scheme="DCMIType" content="Text" / Nature or genre of the resource, best practice is to use a controlled vocabulary, this example uses the dcmi Type Vocabulary. To describe file format, physical medium or the resources dimensions, use the Format element.

Note: as a general rule, element names may be mixed-case but should always have a lower-case first letter, commonly called camelCased.

Note: the value of the content attribute is defined to be cdata.

Authors need to use the link element to reference the definitions comprised by the element schema, like so:


<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/">

Authors can express Dublin Core metadata using simple meta and link elements, which describe how a Dublin Core metadata description set can be encoded in (x)html, which is also an html meta data profile as defined by the html specification. Utilizing Dublin Core is an extremly easy and extensible way for authors to make their content more findable, searchable, and locatable, thus increasing their content’s overall accessibility.

Making Your AJAX Driven Site Crawlable

Posted on: No Comments

The only reason I’ve ever been against an ajax driven site is because the content is not accessible to the bots, thus seriously limiting your seo and findability capabilities. Google has come up with a solution to make ajax driven sites crawlable, and by following their easy guide, my reasoning against ajax sites is completely misguided. Below is my interpretation of the guide, but you can check it out in its entirety here.

Supporting ajax Crawlability Scheme

You need to let the bots know that you support ajax crawlability scheme, and you do this simply by adding a ! after the hash fragment. Simply adding ! after the # in your url completes your sites adoption of the scheme and your site is now considered ajax Crawlable.

Add _escaped_fragment_ Support to Your Server

You need to provide html snapshots of your url so the bots can see your content. Essentially we want the bots to see the url www.example.com/ajax.html?_escaped_fragment_=key=value instead of what users see www.example.com/ajax.html#!key=value. We accomplish this by using 1 of 3 methods;

  1. Recreate your content using a headless browser
  2. Recreate your content by replacing your client-side JavaScript with server-side code
  3. Create a static version of your page(s) offline

Regardless of your method, it needs to be tested using Fetch as Googlebot.

Enable Crawlability in Pages Without Hash Fragments

In order to make pages without hash fragments crawlable, simply add this meta element in the document’s head section. It tells the bots to crawl the ugly version of this url.


<meta name="fragment" content="!" />

Update Your Sitemap

Update your existing sitemap so that all of the crawlable urls that you want indexed are indicated there. See, I told ya’ll this was easy.

Using OpenID With Your Domain(s)

Posted on: No Comments
myOpenID

Setting up OpenID to work with your own domains is super easy. Add the following markup to your documents head.


<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://youraccount.myopenid.com/" />
<link rel="openid2.local_id" href="http://youraccount.myopenid.com" />
<link rel="openid2.provider" href="http://www.myopenid.com/server" />
<meta http-equiv="X-XRDS-Location" content="http://www.myopenid.com/xrds?username=youraccount.myopenid.com" />

That’s it….now you can log into OpenID enabled sites with myOpenID as your OpenID server.

meta name="robots"Element

Posted on: No Comments

<meta name="robots"

<meta name="robots" provides instructions to all search engines.

The meta name="robots" element can be used to tell robots not to index the content of a page, not to follow the links in a page, or both.

Robots can and will ignore the meta name="robots" element; do not worry about directing malware bots to your content; the meta name="robots" element is for standards-compliant, well-behaved bots.

Multiple values are allowed in a single meta name="robots" element; if you are not preventing bots from your content, don’t worry about meta name="robots" element, the default (not using one) is content="index, follow".


<meta name="robots"

meta name="robots" content="noindex,nofollow" />

Tells the bots not to index the page’s contents nor follow its links.


<meta name="robots" content="noindex,nofollow" />

meta name="robots" content="noodp" />

To prevent all search engines (that support the meta tag) from using this information for the page’s description, use the following:

content="noodp" stands for No Open Directory Project; Google sometimes uses descriptions from the Open Directory Project to generate the title and description snippets that can be seen in serps; this is telling all Search Engines to not use anything from the Open Directory Project.


<meta name="robots" content="noodp" />

<meta name="robots" content="noindex" />

content="noindex" tells search engines to deny the page from being indexed.


<meta name="robots" content="noindex" />

<meta name="robots" content="nofollow" />

content="nofollow" tells search engines to not follow any links on the page.


<meta name="robots" content="nofollow" />

<meta name="robots" content="noarchive" />

content="noarchive" tells search engines to not provide a cached copy of page in search results.


<meta name="robots" content="noarchive" />

<meta name="robots" content="nosnippet" />

content="nosnippet" tells search engines to not include a description of the page in search results as well as prevents caching of the page.


<meta name="robots" content="nosnippet" />

<meta name="robots" content="none" />

content="none" the same as using content="noindex, nofollow". Note: don’t confuse content="none" as an indicator of no robots restrictions. It will block all search engines from your content.


<meta name="robots" content="none" />

<meta name="robots" content="noimageindex" />

<meta name="robots" content="noimageindex" />tells Google Images Search results not to use your site as a referring page. Note: images on the page may still be included in the image index if they are linked to by other pages.


<meta name="robots" content="noimageindex" />

<meta name="googlebot"

<meta name="googlebot" provides instructions to only Googlebot.


<meta name="googlebot"

Googlebot by default indexes pages and follows links, so you don’t need to add content="index" or content="follow". What about other search engines/bots?

If you use conflicting values, Googlebot will follow the most restrictive.

meta name="googlebot" content="noodp" />

To specifically prevent Googlebot from using this information for a page’s description, use the following:

This is telling Google specifically not to use anything from the Open Directory Project.


<meta name="googlebot" content="noodp" />

If you use the robots meta element for other directives, you can combine those. For instance:


<meta name="googlebot" content="noodp, nofollow" />

<meta name="googlebot" content="noindex,noarchive,nofollow" />

Tells the googlebot not to index the page’s content, not to follow its links and not to provide a cached copy of the page in serps.


<meta name="googlebot" content="noindex,noarchive,nofollow" />

<meta name="googlebot" content="noimageindex" />

<meta name="googlebot" content="noimageindex" />tells googlebot not to include your images in Google Images Search results not to use your site as a referring page. Note: images on the page may still be included in the image index if they are linked to by other pages.


<meta name="googlebot" content="noimageindex" />

<meta name="msnbot" content="noindex,nofollow" />

Tells MSNbot not to index your page content and not to follow your links.


<meta name="msnbot" content="noindex,nofollow" />

<meta name="robots" content="noydir" />

Tell all bots not to use a Yahoo! Directory title or Yahoo! Directory description.


<meta name="robots" content="noydir" />

<meta name="slurp" content="noydir" />

Specifically tell Yahoo! bot name="slurp" to not crawl your page.


<meta name="slurp" content="noydir" />

meta name="apple-mobile-web-app-capable" content="yes" Element

Posted on: No Comments

meta Element for Bookmarked Sites

If a user has added your web application to their springboard, the following meta element can remove the top bar from the browser:


<meta name="apple-mobile-web-app-capable" content="yes" />

And that’s all! The address bar is hidden until the user swipes down near the top bar of the application. With the address bar hidden, your web app can look just like a native app!

meta name="viewport" content="target-densitydpi=" Element

Posted on: No Comments

Targeting Android and hdpi


<meta name="viewport" content="target-densitydpi=high-dpi" />

Use hdpi as the target dpi. Medium and low density screens scale down as appropriate.

Targeting Android and mdpi


<meta name="viewport" content="target-densitydpi=medium-dpi: />

Use mdpi as the target mdpi. High density screens scale up and low density screens scale down. This is also the default behavior.

Targeting Android and ldpi


<meta name="viewport" content="target-densitydpi=low-dpi: />

Use ldpi as the target ldpi. Medium and high density screens scale up as appropriate.

meta name="viewport" content="target-densitydpi=device-dpi"

Posted on: No Comments

Stops Android from performing scaling; that means that you will have to make the necessary adjustments for each density via css and JavaScript.


<meta name="viewport" content="target-densitydpi=device-dpi" />

If you want to modify your web page for different densities, by using the -webkit-device-pixel-ratio css media query and/or the window.devicePixelRatio dom property, then you should set the meta name="viewport" content="target-densitydpi= to device-dpi. This stops Android from performing scaling in your web page and allows you to make the necessary adjustments for each density via css and JavaScript.

meta http-equiv="X-UA-Compatible" Element

Posted on: No Comments

Amongst ie8‘s stellar accomplishments (nice logo) comes the proprietary header x-ua-compatible which grants magical control over the rendering mode the browser uses.

Don’t use it! For reals! But if you find yourself in that fun situation that you have no control over, change the header on your server so you do not get an html5 validtion eror.


<meta http-equiv="X-UA-Compatible" content="IE=edge" />

meta name="viewport" Element

Posted on: No Comments

Setup the Viewport for Mobile Devices


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

width=device-width sets the width of the viewport to the devices actual width.

initial-scale=1.0, maximum-scale=1.0 sets the scale of pixels to 1px per actual pixel (1:1) .

user-scalable=0 disables the users ability to scale the pixels.