All posts in HTML

Old Phone 2Every business owner with an online presence, marketer, and SEO knows about the “2-3% myth.” That is, the average conversion rate for ecommerce sites is 2-3 percent. As one blogger put it, tracking the source of this data is a bit like tracking Big Foot. In any case, even if this is an accurate rate, you don’t want to shoot for it. A 10-20% conversion rate is a worthy goal –and an achievable one. One method which can yield significant results is implementing a click-to-call feature. What do you need to know?

Appeal to the Mobile Market

Sites that have a click-to-call button see:

  • Improved conversion rates.
  • Increased average orders.
  • Higher sales.

In addition, consider mobile users. Six billion people have access to cellphones and smartphones. Research shows that mobile searchers prefer to call businesses for which they’ve searched. Here’s just one scenario: a visitor queries local theaters, looking for good shows. He opts to call one to get information on show times. Click-to-call facilitates the process, making it convenient and easy.

According to Google, 69% of mobile users would use click-to-call if the feature were available. And, sites that implemented this functionality saw an 8% increase in conversion rates.

Click-to-Call for Your Website

Twitter is currently testing click-to-call in ads for certain brands, and you can enable it in your Adwords campaign. Here are a few quick steps to adding a click-to-call to your mobile site.

  1. Use this code:

<a href=tel: 112233334444”> 11-22-3333-4444</a>

(The numbers are simply your telephone numbers!)

  • Add a call to action to highlight this feature and let users know they can click the link to make a call.

<a href=”tel: 112233334444”>Click HERE to Call: 11-22-3333-4444</a>

When a user clicks this link, he or she will see a prompt: “Call 11-22-3333-4444? Yes/No. They know that they will be connected to your business. It’s as easy as that.

The good, old-fashioned telephone still wields a lot of power in today’s mobile world!

Help Me :)

Your Quick Help Guide for Semantic Markup

If you haven’t embraced the concept of Semantic Markup yet, then you are likely missing out on a lot of internet traffic.  Why?  In order to answer the question, a quick Google search of “Bananas Foster” led to the following top two results:

Which of the two are you more likely to click on?  Why?

It’s a pretty safe bet that you would click on the second link because of the image and the clear five star rating.  This is a very good picture of what semantic markup can do for you, when it is used correctly.  To make the most of it on your website, consider the following tips.

Get Help If you are not familiar with HTML code or you find the whole idea of semantic update overwhelming, then consider using a free service, like Structured Data Markup Helper to get you started.  The major benefit of sites like these is, of course, the help creating the HTML strings that you need to achieve the look of the Google search result discussed above.  The downside is that there are some limits to the types of markup that this service assists with.  Nevertheless, it can be a great place to start.

Express Your Authorship If nothing else, help your branding efforts by tying your work and your name to your photo.  This can be done with authorship markup.  Your photo or logo will appear beside your content in search results if you include the right markup on your website.  In order to do this, you will need:

  • A Google+ Profile
  • An email account hosted by your domain (this can be averted with another method of markup.  Directions can be found on Google’s Authorship page)
  • A ‘by line’ on all articles and blog posts that you author on the domain.

When these things have been accomplished, you can simply submit your email address to Google here and test the results of your markup here.

Make Your Local Business Known There are a number of markups that can be used to improve local business search result snippets.  The best bet for those trying to implement such markups, is to visit Schema.org, which lays out the appropriate Semantic Markup tags.  It is also wise for businesses operating in multiple towns or cities to make use of breadcrumb coding.  Think of this as a picture of the site structure, so users can quickly make sense of the hierarchy and get to the most relevant destination – the appropriate branch’s local site.  Markups here can help Google make sense of the map as well and will result in direct links to the subpages searchers may find more valuable.

 

 

 

Ipad And Iphone

There are more mobile devices on earth than there are people. More than half of us have smartphones, and for half of mobile phone users, their device is their primary internet source. Just one more statistic for you: more than a quarter of all internet searches are conducted on a mobile device. A few years ago, you could get away with a desktop-based site. Not today. To reach your audience, you have to go where they are, and they are on the go. Here are the three ways you can accommodate mobile users.

Separate Mobile Site

With this option, you maintain a desktop version of your site and a separate mobile version. This has a few benefits: you can create a fully customised experience for your users. If, for instance, A/B or multivariate testing reveals your mobile users prefer infinite scrolling while your desktop users like vertical. You can also pare down your “big” version and create a simplified, streamlined mobile site that loads faster. Another plus is that you can employ HTML5 and other technologies without having to worry about compatibility.

Why not opt to create a separate mobile site? Well, it costs more, and that’s certainly a big consideration. Another issue is that if you have users who rely on both traditional and mobile versions (think of an Amazon shopper who likes to search for gifts at a coffee shop and then purchase at home), they may dislike having two separate experiences. It may create a disconnect and reduce the efficacy of the mobile site. Think about SEO, too. While having a separate site does not have to hurt your rank,  you will have to be on top of your redirects to make sure.

Dynamic Serving

With this option, you use the same URL, regardless of what type of device is attempting to access your website. So, how does a site load optimally for, say, a desktop, an iPhone, and a Galaxy? The specific devices employ User Agents. When the user agents request the site from the server, the server delivers the correct HTML for that particular device. This is beneficial because you only need one URL.

On the downside, Google  may not recognize the mobile HTML set, so you have make sure that you point the content out to the bots. The bots will need to crawl the content with different user agents, and redirecting them can be tricky. Check out Google’s help page for more information on that, if you choose dynamic serving. Another issue is that you have to continually update user agent strings for new mobile devices as they come on the market. Finding this information can be difficult, especially when the devices are brand new.

Responsive Web Design

This is the method that web design experts typically recommend. The website uses only one URL and responds to the type of device on which it is viewed. All devices read the same HTML. How does it work? CSS changes the page dimensions and the layout to fit smaller screens. Googlebot and Googlebot Mobile need to be able to crawl your CSS, Javascript, and images, and this reconfiguration process is automatic. No page redirects mean sites load faster; there is just one URL; and bots can crawl more efficiently and index more often; and mobile experiences are the same as desktop. This can be a big plus for many users who want that continuity.

The downside is cost and technical difficulty. Responsive web design is highly technical in terms of implementation, so an experienced web developer is an invaluable asset.

How are you going mobile?

Blue Website Buttons 3

In 2011, Google, Yahoo, Bing, and, later, Yandex (the largest search engine in Russia) teamed up to create Schema.org, a common vocabulary that webmasters and SEOs can use to markup their data. Structured data is becoming much more important as we move further into the “entity search” world. Using the schemas, users can essentially describe their content in a way that makes it more visible and relevant to search engines. Following are a few helpful tips for working with Schema.org.

Get some help. You do not necessarily need to know how to code to use Schema, but it helps. While it would take years to learn coding, you can get a crash course and at least learn the common terms and constructions to make marking up your text easier. CodeAcademy is one free, interactive resource that you can check out.

Know your <div> from your <span>. These are two very common elements that you’ll need. <div> can group sections of code and format them with CSS. <span>s are used to group inline elements.  Here is an example of each:

 

<div id=”content” style=”background-color:#0000FFheight:225px;width:450px;float:right;”>
Content goes here</div>

<span itemprop=”author”>Jack Smith</span>

Get familiar with Schema.org. Look at the types, properties, and hierarchies. Let’s say you have a men’s clothing shop. Your hierarchy looks like this:

Thing>Organization>LocalBusiness>FoodEstablishment>Bakery.

You would then open a text editor or HTML editor to markup your pages. Here’s how we would tell the search engines our business type and pertinent information:

<div itemscope itemtype=“http://schema.org/Bakery”>
<h1> Bakery </h1>
<p>Intro Text</p>
<p>Address: <span itemprop=”address”>555 Bakery Avenue, London, UK  E4454</span></p>
<p>Phone: <span itemprop=”telephone”> 444-555-3333</span></p>
</div>

Use the schemas to markup other areas of content. If you have a recipe on your bakery website, for instance,

<div itemscope itemtype=”http://www.xys.uk/Recipe”><h1 itemprop=”name”>zucchini bread</h1>

By <span itemprop=”author”<Bill Smith</span>

Published: <time itemprop=”published” datetime=”2013-09-25”>September 25, 2013</time>

<span itemprop=”summary”>A wonderful, moist zucchini bread recipe, perfect for cold fall days.</span>

<span itempropr=”rating”>4.8</span> stars based on

<span itemprop=”count”>210</span> reviews

Marking up your text ensures that search engines have detailed information about your website. It takes some time to complete, but once you have the basics, the rest is easy!

Blue & Chrome Website Buttons 1Web searchers are much more likely to click on a result that includes a picture, an author’s byline, a great review, or a preview of a delicious restaurant menu. These glimpses into the website give searchers confidence that their question will be answered or their curiosity satisfied, and this results in a higher click-through rate for sites that employ rich snippets. Rich snippets give search engines more information about your site, and by extension, give searchers the information they need to make the right clicks.

Rich snippets benefit megasites and small local businesses alike. In fact, they can be a great boon to local businesses. Given the ubiquity of mobile devices, and the fact that mobile searchers are also very likely local searchers, it is important to mark up your content to make it more visible.

Google supports a variety of snippets. Let’s look at one that will help differentiate your local business, “Organisation.”  You can enter the following properties:

  • Name.
  • URL.
  • Address.
  • Telephone.
  • Location (longitude and latitude).

So, let’s say we are Sally’s Seashell Emporium. Our HTML would look like this:

<div>

Sally’s Seashell Emporium

Located at 458 Seashell Lane, London, UK.

Phone: 555-555-5555

<a href=http://sallysseashells.com.http://seashells.com</a>

</div>

 

Our microdata markup would look like this:

 

<div itemscope itemtype="http://schema.org/Organization">
   <span itemprop="name">Sally’s Seashell Emporium</span>
   Located at
   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">458 Seashell Lane</span>,
      <span itemprop="addressLocality">London</span>,
      <span itemprop="addressRegion">UK</span>.
   </div>
   Phone: <span itemprop="telephone">555-555-555</span>
   <a href="http://seashell.com/"
itemprop="url">http://seashells.com</a>
</div>

 

We might also add snippets to describe our best-selling products, to introduce readers to our blogger, Sally, or to provide reviews or ratings. This information gives searchers reason to click through to our site in addition to making it more visually pleasing in the search results pages.

You can do this yourself or use a rich snippet generator (there are a variety available online). Google also provides a few tools, including the structured data markup helper (try it!) structured data testing tool (use it!).

Stopwatch 1

Quality content is the single most important factor in your search rankings, but a host of other aspects of web design, development, and performance play into how you appear in the SERPS. Speed is one of them, and it is critical because it so heavily impacts the user experience. One technique you can use is minifying HTML. This allows you to speed up your load times, reduce page size, and reduce network delays.

What does it mean to “minify” HTML? It basically removes whitespace, comments, and other non-essential elements. At the same time, it does not interfere with the content structure. The result is cleaner, speedier sites. The BBC, for instance, has a hefty site of 77,054 bytes. When it is minified, though, it drops 55,324 bytes, a 28.2 percent reduction. For a site that is so heavy on content and media, this is a tremendous difference.

There are several great online tools that you can use to minify your HTML. (Note: It is important to also minify CSS and JavaScript as well. Why not drop as much weight as possible?)

These minifiers offer a quick and easy solution to minifying your HTML code. When you can compress and cut out the excess weight, you can offer a lean, mean site for Google to index and for visitors to enjoy.