Semantic HTML – 5 Content Markup Tips

Semantic markup for semantic web against semantic search..

Semantic HTML

Semantic markup is not a ranking factor then why one should bother about it?

{Semantic markup} › {Enhance existing SERP listing} › {Improve CTR (click through rate)}

However, as you know, too much of anything could destroy the actual purpose.

{Inappropriate implementation of schema markup} › {Used all available schema} › {Become spam in nature to search engines}

So essentially I had to select with which ones, I should start implementation?

Here are they –

Facebook Open Graph..

<meta property=”og:url” content=”” />
<meta property=”og:image” content=”” />
<meta property=”og:title” content=”” />

It controls the appearance of page/content in Facebook and other Open Graph supported platforms.

Breadcrumbs..

<span itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”” itemprop=”url” />
<span itemprop=”title”></span></a>
<span itemscope itemprop=”child” itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”” itemprop=”url”>
<span itemprop=”title”></span></a>

Make the display URL on SERP’s organic search section more appealing and clickable; also transmit certain information about the site structure.

Products/Ratings..

<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<div>
<i title=””><img alt=”” height=”″ src=”” width=”″>
</i>
<meta itemprop=”ratingValue” content=”″>
</div>
<span class=”review-count rating-qualifier”>
<span itemprop=”reviewCount”></span> reviews</span>
</div>

Simply provide valuable information about and around the product itself such as ratings, price, reviews etc.

And two more which are now become less effective because of manipulation by us –

Google Authorship..

<link href=”” rel=”author” />

Help to establish G+ profile as an industry expert and make the SERP more clicks worthy.

VideoObject Schema..

<div id=”cols” itemprop=”video” itemscope itemtype=”http://schema.org/VideoObject” />
<meta itemprop=”name” content=”” />
<meta itemprop=”playpageUrl” content=”” />
<meta itemprop=”discussionUrl” content=”” />
<meta itemprop=”thumbnailUrl” content=”” />
<meta itemprop=”url” content=”” />
<meta itemprop=”logo” content=”” />
</div>

Communicate better with visitors since the snippet will have a thumbnail of video on to the webpage.

Now start giving importance to LSI (latent semantic indexing)!

Advertisements

Suggestion on Favicon Usage

Inserting a favicon.ico code to HTML web page.. why and how?

Favicon Code

A letter to an eligible designer..

Hi,

Can you please check whether the use of favicon has been passed compatibility issues? Currently, the web pages have the following link elements –

<link rel=”icon” type=”image/icon” href=”http://www.example.com/system/application/images/favicon.ico”&gt;
<LINK REL=”SHORTCUT ICON” href=”http://www.example.com/system/application/images/favicon.ico”&gt;

Conventionally, the default favicon.ico file has to be at the root of website since browsers will go looking for the file there by default. However, which is not the case here. The favicon.ico file is not at the website’s root. That’s why I’m enquiring. I prefer to have the above two link elements in the following manner respectively –

<link rel=”icon” href=”/favicon.svg” type=”image/svg” />
<link rel=”shortcut” href=”/favicon.ico” type=”image/x-icon” />

Here, we can consider a designer’s thought as well in order to take informed decision.

Regards,

🙂

_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Reply from an eligible designer..

There is no need of two links for favicon icon. The (rel=”shortcut icon”) support in all browsers just we need to add type=”image/icon” which is missing currently in the link. Please use following corrected link for the site.

<LINK REL=”SHORTCUT ICON” type=”image/icon” href=”http://www.example.com/system/application/images/favicon.ico”&gt;

Regards,

🙂

_/_/_/_/_/_/_/_/_/_/_/_/_/_/

So, are you fine with this?

NB: Stay careful while adding favorite.ico icons to the website!

List of Most Popular Rel Attributes in SEO Community

HTML link tag, various rel attributes, and a short SEO cheat sheet..

How to use various rel attributes?

Rel attribute is supported by all modern day browsers and used by search crawlers to get more information about the entity on which the rel attribute has applied.

For telling search bots that don’t follow the entity..

rel=”nofollow”

For setting a preferred URL for my content..

rel=”canonical”

For indicating paginated content..

rel=”prev” and rel=”next”

For language and international/regional URL declaration in line with hreflang..

rel=”alternate”

For establishing content authority and linking with my G+ page..

rel=”author” and rel=”me” and rel=”publisher”

For assigning tags to easier understand the site structure and entity identity..

rel=”tag”

This is a good way of adding authority to web pages and major search crawlers will love rel attributes while extracting data about link tags.

Robots find easier to index the content and get back to the users against their queries more appropriately.

Using HTML Meta Tags for SEO

List of meta tags that are useful in 2015 per my understanding..

HTML Meta Tags that Search-bots Recognizes

But, first thing first – using metadata is not for gaining rank, I only use to get the best possible first impression of my content on social/search platforms.

So, for organic search..

Page title

<title>Create illustrative page title</title>

Meta description

<meta name=”description” content=”Create fine meta description.” />

Meta robots

<meta name=”robots” content=”noindex, follow” /> | <meta name=”robots” content=”index, nofollow” /> | <meta name=”robots” content=”noindex, nofollow” />

For social channels..

Facebook’s OpenGraph

<meta property=”og:title” content=”” />
<meta property=”og:type” content=”” />
<meta property=”og:image” content=”” />
<meta property=”og:url” content=”” />
<meta property=”og:description” content=”” />

Twitter Cards

<meta name=”twitter:card” content=”” />
<meta name=”twitter:url” content=”” />
<meta name=”twitter:title” content=”” />
<meta name=”twitter:description” content=”” />
<meta name=”twitter:image” content=”” />

Google+

<html itemscope itemtype=””>
<meta itemprop=”name” content=”” />
<meta itemprop=”description” content=”” />
<meta itemprop=”image” content=”” />

Google supports..

<meta name=”description” content=”” />
<title></title>
<meta name=”robots” content=”” />
<meta name=”googlebot” content=”” />
<meta name=”google” content=”” />
<meta name=”google-site-verification” content=”” />
<meta http-equiv=”Content-Type” content=”; charset=” />
<meta charset=”” />
<meta http-equiv=”refresh” content=”; url=” />

Bing supports..

Title tag
Meta description tag

This is it.. some of my favorite HTML meta tags (that leading search-bot recognizes too) every internet marketer should consider using in 2015. Tell me if I’m overlooking anything obvious.