Tag Archives: html

Shatter.js Image Shattering

Shatter.js – Make things explode in JavaScript

Sometimes I feel the need to break things.  We all get that feeling sometimes after a rough day at work, or after a day of dealing with pushy clients, or maybe your cat threw up on your face while you were taking a nap. The point is, we all need to release some steam and take out our frustrations sometimes.

Now, you could pick up the flower vase sitting by your computer-you know, the one that’s been sitting there with the dried out remains of a dead plant in it for the last 2 years-and toss it across the room. But then you have to deal with little shards of glass all over your floor and you’ll have to explain to your roommate that you did not, in fact, just have a psychotic episode.

Aside from that, we now live in a digital world. I imagine most people wake up in the morning and their first instinct is to go straight to the bathroom…and take a picture of themselves in the mirror to post to facetwitgram before they post their daily half eaten breakfast photo.

So what better way than to break stuff digitally? And with today’s hottest new technology, JavaScript!

Shatter.js is a small little library that can help you do just that! Use your JavaScript programming skills to add and image to the dom, give it to Shatter.js and it will return to you your image all nice and shattered and packaged up for you to do with it what you will.

“That sound’s incredible! But, wait, how much is this going to cost me?”, you say.

Well, that’s a great question, and my answer to that is that it’s completely open source and free! Do with it what you will! It’s licensed under the MIT license and available on Github for you to download, fork, branch, pull, push, rm -rf, or whatever you desire!

Check it out on GitHub or view the examples on the project page.

Hugs - Painting by Cory Gugler

Let’s talk about HTML basics for SEO again.

Alright, so maybe my previous post on html wasn’t the ‘least amount’ you should know. You can never know too much about anything. The more you know about the underlying structure of your website the easier it is to optimize every single detail. Let’s go further down the HTML rabbit hole and learn more about some important tags and attributes.

Write an attention grabbing title!

The <title> tag in your html document always resides within the <head> tag. If you haven’t guessed by now, the title tag determines what is displayed on your browser title bar. This will also be the text that search engines link to your site-the text people will first see when a page on your site shows up in their search results.

Website title in search results

It should be pretty obvious that you want your titles to be attention grabbing and descriptive of the content. They should be concise and to the point, and sometimes maybe a little surprising.

For SEO, titles should be less than 80 characters long. Anything longer is likely to get cut off or not used at all in a search  result. Your targeted keywords should be as close to the beginning of the title as possible. When your page comes up in a search result, users are more likely to notice and click on links with their keywords more prominently placed near the beginning of the result.

Each title should be unique. It’s alright to have a few words in the title on all your pages, like your company name, etc… You should not however have any duplicated titles across your site. Similar or duplicate titles will be confusing for your visitors, search engines, and yourself. Duplicate content is something to be avoided like the plague.

I wrote a meta tag describing my meta tags, meta!

Meta tags are used to tell browsers and search engine crawlers specific information about a page. Meta tags are placed within the <head> of your html page. There are only two meta tags you need to concern yourself with in regards to SEO.

Meta description

The meta description tag tells the search  engine what your page or site is about. It should be a well written human readable description less than 155 characters. On a Google search result page this description is the text displayed beneath the title of the result displayed.

Website meta description

It must be written for a normal human to understand and not just a list of keywords. Google’s algorithm will analyze this description and may not use it at all if it’s determined to not represent the page it’s describing.

Here’s an example of a meta tag:

<meta name="description" content="Great Choice Dog food is a well-balanced nutritional food for your favorite pet. Serve your best friend only the tastiest treats and make him or her a happy dog!">

Writing a great description will also help you get more people to click through to your site. Users usually scan through the first search result page and an enticing description will be much more effective than one generated by the search engine itself.

The robots are taking over

Robot telling a human to get to work

The robots meta tag is something you won’t likely have to concern yourself with, but it is important to know about nonetheless. If you would like a page not to show up on a search engine results page this is the tag you would use.

The robots tag can be used to give a search engine crawler some rules regarding how it can use the content on the page. Most major search engine crawlers will respect these rules but they don’t necessarily have to. What this means is that a spam crawler, or other malicious web crawlers may ignore all robot rules and do what it pleases.

By default, without a robots tag on your page, a search engine will index your page and use it in it’s search results. You can specify ‘noindex’ in a robots tag to tell the search engine you do not want the page to show up in their search results.

The robots meta tag looks like this:

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

You can read a little more about the other available options to use in the robots meta tag over at Google developers.

Headings, sub-headings, sub-sub-headings, oh my!

We already talked a bit about headings in the article about content hierarchy but I think we should revisit them briefly.

Often your content management system will use an <h1> heading to represent the title of your blog post or page. This same content is often what is also automatically placed in your <title> tag as well.

In WordPress you can use a plugin, such as the Yoast SEO Plugin to tweak the title of your page and make it completely different than the title of your article. You will want to keep your <title> still closely related to your page or post title, but often it’s a good idea to tweak it just a bit to move keywords closer to the beginning of the line or rephrase it target more keywords.

Screenshot of Yoast SEO Plugin

Since most people scan documents before reading, you should split your content up into easily digestible parts and important points. Using layers of headings and sub-headings to split up sections and direct their attention where you want it.

As with any document, online or offline, your headings are just title’s for sections of content. You should treat them like you would the title. They should be well written, descriptive, and have keywords near the beginning. When someone is scanning through an article they will generally read the headings and the first sentence or two before deciding whether to more thoroughly read through it.

If your post or article title is and <h1>, your content will split up into various <h2> sub-headings and <h3> sub-sub-headings. Of course, you can continue to go <h4> and above this depends what you’re writing about.

The following is a heading hierarchy example (albeit not a great one).

<h1>Ways to get around town!</h1>
  <h2>Get around town in style on wheels</h2>
    <h3>Two wheeled transportation is economical</h3>
      <h4>Fast lightweight bikes for rent</h4>
    <h3>Four wheeled transportation for comfort and style</h3>
      <h4>Try a car</h4>
        <h5>Compact cars for fuel efficiency</h5>
        <h5>Mid-Size cars for extra room</h5>
  <h2>Get around town on Foot</h2>
    <h3>Wear comfortable sneakers for long walks</h3>
    <h3>Boots are best in the rain</h3>

Conclusion

There are many html tags, and to ensure search engine crawlers and humans alike understand your content, you must understand how to correctly use them. I can’t go over all of them in this one post, so I’ll continue to talk more about the different tags available, their semantic meaning, and how to use them correctly.

Next week: Images.

Until then, keep it semantic. 😉