Month: January 2016

How to Keep Tabs on Your SEO in 2016 – Part 1

Today’s SEO is becoming more important than ever, but the algorithms change at a constant rate. According to AMA.org, Google undergoes at least 500 algorithm changes a year. Due to the changes in the SEO algorithm, it’s always good to know how to conform to these changes. Well, we’re here to help with that. Here are some basic rules to keep in mind when you’re writing content during 2016:

Write Original and Relevant Content

I’m going to start with the most important rule in SEO: write original and relevant content. This rule really hasn’t changed all that much over the years, but the algorithm behind it has. Because of this, it’s important to keep the basics in mind; of course having original content was important, but its importance has grown exponentially. After all, there are a ton of articles out there that have been published. Sad to say, no one’s willing to view the same content. If they find a creator’s video and gather the information they’ve been seeking, your content will remain unseen.

Editorial Calendar
(Image Courtesy of WordPress.org)

When it comes to catering to people, it’s helpful to create an editorial calendar that keeps track of your content. This way, you’re also able to gather the interests of your audience. You are allowed, for instance, to curate content, as long as you provide credit where credit is due and elaborate on the curated content in order to make it original.

Original Content
This here’s an example of original content: a review exclusively written for a video game.

When you’re writing original content, you must keep in mind that your title must be parallel to the information you’re feeding your audience. For instance, say that your title is, “How to Wash a Puppy.” People are going to expect instructions on washing a puppy. If they click on the link and instead see instructions on washing a cat, you know they’re going to smack that “Back” button, which is going to hurt your site more than help. After all, Google keeps track of how the users interact with the site. This is why relevancy is key to ranking nowadays as search engines are a lot smarter than in previous years.

It’s also essential to understand that you shouldn’t always write content that’s easy to digest, i.e. “listicles.” Sure, they’re easy on the eyes, but at the same time, search engines aren’t going to pick them up well since lists aren’t incredibly in-depth. So if you’re writing a list, keep in mind that they need to be deep and highly informative if they’re going to rank high on search engines.

Optimize for Mobile

Yes, in the year 2016, mobile optimization is more important than ever. More people are relying on their mobile phones to view web pages, so if your website looks unprofessional from a mobile standpoint, you can expect the user to avoid the site, which means you’re losing out on rankings. To increase your rankings on Google, simply optimize your website and pages for mobile. This includes increasing page speed via optimizing images, minimizing code and reducing redirects. You also need to ensure that all your content, including images, are able to be viewed. Moz offers plenty of tips and tricks to help you optimize your site for mobile viewership.

Mobile Vs. Standard
(Image Courtesy of Your Web Solutions)

Keep in Mind the Content’s Length

Yup, size matters nowadays when information is a-flowing. Bite-sized pieces are lurking among internet pages, but these pieces are falling behind on Google’s rankings. Nowadays, larger articles–those with a word count between 1,200 to 1,500–manage to find more traffic.  However, it’s important to keep in mind that great walls o’ text prove daunting for the reader, so it’s a good idea to break up longer articles with bullet points, images, videos and more. This type of formatting will make articles far easier to read; not to mention Google will love them because these articles contain far more keywords and images that benefit ranking. There is a second reason as to why Google loves longer articles: in the age of rampant social media, people are linking to longer articles more frequently, which raises the rank of a page.

Keep in mind though that the information in a long article needs to be relevant and chock full of information, of which the user will be able to digest and understand easily.

And that’s where we stop here. There are a few more tricks to keep in mind when delving into the world of SEO, so be sure to look out for them in Part 2 of this article coming next week.

Simple Image Rollover Navigation in JQuery

This tutorial illustrates how to create a simple Image Rollover Navigation in JQuery. I know, I know, why aren’t you using CSS for this?!

Well, there are just certain use cases out there that require images as I found out the hard way a few years back so I decided to post this article on how to set it up because sometimes you need a bit of code without loading in a massive JQuery plugin. I’m sure many of us have been there. Of course most JQuery Pro’s can tackle this without a sweat but for the JQuery Novice out there, this bit of code is for you.

First you’ll need some very basic HTML:

<ul class="nav">
    <li><a id="nav1"></a></li>
    <li><a id="nav2"></a></li>
    <li><a id="nav3"></a></li>
</ul>

Like most, I tend to build my menu’s using a list. But since we’re using graphics instead of CSS for our buttons, we need to assign ID’s to each link.

Here’s some CSS:

.nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.nav a {
    display: inline-block;
    cursor: pointer;
    height: 43px;  
}

#nav1 {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_help.jpg') no-repeat;
    width: 93px;
}

#nav1:hover {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_help_over.jpg') no-repeat;
    width: 93px;
}

#nav2 {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_product_info.jpg') no-repeat;
    width: 91px;
}

#nav2:hover {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_product_info_over.jpg') no-repeat;
    width: 91px;
}

#nav3 {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_ship_pay.jpg') no-repeat;
    width: 90px;
}

#nav3:hover {
    background: url('https://googledrive.com/host/0B6JoOY-U2ZgaWHZnLVM0LXJsdXc/tab_ship_pay_over.jpg') no-repeat;
    width: 90px;
}

Since we’re making our graphic rollover a background inside a link, the two most important things here are making sure the link is set to display: block and you’ll also need to define each link’s height and width to have the graphics show properly. Here, my menu had a uniform height but not so with the width. Depending on the graphics you use, this could be different.

Then your JQuery Image Navigation Rollover code:

$(document).ready(function() {
    // Click Event
    $('.nav a').click(function() {  
        // Grab value of id attribute
        var $id = $(this).prop('id');
        // Find the id dynamically and find the current bg image of the hover state
        var $hov = $('#' + $id + ':hover').css('background-image');
        // Set an inline style with the hover state's bg
        $('#' + $id).attr('style', 'background-image: ' + $hov).addClass('selected');

        // After selecting a new tab, iterate through prior tabs and remove their bg images
        $('.nav li').find('a').each(function() {
            if ($(this).prop('id') != $id ) {
                $(this).removeAttr('style').removeClass('selected');
            }
        });
    });
});

Basically we’re grabbing the ID of the link, pulling the :hover state and assigning it as an inline style for the clicked element. We then iterate through all links that don’t equal the clicked link and remove their inline style and class.

While there’s probably other ways this can be done, this was pretty simple and concise to me. Lastly, you can check out the working Demo in our JS Fiddle here.

This was tested and should work in JQuery 1.6 and above.