SEM-SEO'BIM

As a frontend developer we can do a few things when it comes to SEO. I was recently asked by a client if I could help them implement some SEO improvments to a site and that put me on my journey into an old but intereting subject of matter which I'd like to share. I am not going to go indepth with SEO. However, I do want to highlight perhaps a little known thing called Search Engine Marketing (SEM). SEM is a practice in Search Engine Optimization to promote websites internally and externally, and through paid or free advertisements; in contrast to Pay-Per-Click ads.

“Bad programmers worry about the code.
Good programmers worry about data structures and their relationships.”

• Linus Torvalds; https://lwn.net/Articles/193245/

Brief history

In the 1990s, meta elements had a large effect on web search results. Since then, their significance has been decreasing, partly because of the unethical tricks that have been used to manipulate search engine rankings. A good example is keyword stuffing, which was used to load a web page with popular keywords that were not necessarily relevant to the page content, either in the meta tags or in the content. In the latter case, the keywords were often hidden, but the web page that contained them was indexed by search engines. Such tricks made it possible for developers to achieve higher ranking on search results but significantly increased the number of irrelevant links on search result lists. Although they are less important nowadays, meta tags still should be used to provide information on web page contents for search engines. The meta tags in HTML/XHTML can define a variety of metadata, for example, content type, author, publication date, keywords, page content description, character encoding, and so on. These tags were introduced in HTML 2.0 and are still current.

Machine-Readable Metadata

To improve the processability of web sites, formal knowledge representation standards are required, that can be used not only to annotate markup elements for simple machine-readable data, but also to express complex statements and relationships in a machine-processable manner. Also known as Structured data markup, the four most popular structured data markup annotation formats can be summarized as follows (by order of introduction):

• Microformats, publishes structured data about basic concepts such as people, places, events, recipes, and audio through core (X)HTML attributes
• RDFa, expresses RDF in markup attributes that are not part of the core (X)HTML vocabularies
• HTML5 Microdata, extends the HTML5 markup with structured metadata (a HTML5 Application Programming Interface)
• JSON-LD, adds structured data to the markup as JavaScript code

I am not going to explain each annotation format as I am sure you can find interesting reads on them. But I would like to make a quick comparison and thereby highlight perhaps a little less known and lastly introduced format of JSON-LD.

Markup Without Structured Data

<h1>John Doe</h1> 
< img src="johndoe.jpg" alt="John's picture" />
<a href="http://www.john-doe.com">John’s website</a>

---

Markup With Microformats

<div class="vcard">
  <h1 class="fn">John Doe</h1>
  <i mg src="johndoe.jpg" alt="John's picture" class="photo" />
  <a href="http://www.john-doe.com" class="url">John’s website</a>
</div>

---

Markup With HTML5 Microdata

  <h1 itemprop="name">John Doe</h1>
  < img src="johndoe.jpg" alt="John's picture" itemprop="image" />
  <a href="http://www.john-doe.com" itemprop="url">John’s website</a>
</div>

---

Markup With RDFa

  <h1 property="name">John Doe</h1>   
  < img src="johndoe.jpg" alt="John's picture" property="image" />
  <a href="http://www.john-doe.com" property="url">John’s website</a>
</div>

---

Markup With JSON-LD

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Person",   
    "image": "johndoe.jpg",
    "name": "John Doe",
    "url": "http://www.john-doe.com" 
  }
</script>

JSON-LD

Now lets highlight JavaScript Object Notation for Linked Data (JSON-LD). In contrast to other annotation formats JSON-LD is described as JavaScript code rather than markup elements and attributes. As a result, JSON-LD is completely separate from the markup code. One of the advantages of this lightweight Linked Data format is that it is easy for humans to read and write. JSON-LD transports Linked Data using the JavaScript Object Notation (JSON), a standard format which inherently is human-readable text. If the JSON-LD code is written in a separate file rather than the markup, the de facto file extension is .jsonld. The Internet media type or mimetype of JSON-LD is application/ld+json and, if written in the markup, the JSON-LD code is delimited by curly braces between a <script> tag.

In Summary

This became a lengthy first post, so let me re-cap the important bits —
The JSON-LD API provides a way to transform JSON-LD documents to be more easily consumed by specific applications just like the other annotation formats. However, I love the fact that JSON-LD doesn't clutter the markup or introduces proprietary attributes which violates validation rules.

Well, on top of producing semantic markup and all, we should all be considering some sort of annotaion format to highlight and make parts of our data more machine friendly. In my opinion JSON-LD is probably the simplest way to do so, this data 'optimization' can be added without much effort and even at a later point in project.

An interesting page is provided by Google to get you started with SEM'ing or Structured Data Markup. I would recommend you looking into Rich Snippets, Breadcrumbs, or a Sitelinks Search Box.

Well, that's my $0.02 worth, over and out :)