Basic HTML Tags and Search Engine Optimization

March 9, 2010 | Posted by Carma | Filed Under How To, Learning Center, seo

I just posted this article about HTML tags and search engine optimizaton and thought it would make a good addition to the Learning Center.

Basic HTML Tags and Search Engine Optimization

Did you know you can improve your search engine results just by using simple HTML tags more effectively? In this article, I’ll share those you can use today to improve search engine rankings… even if you’re not a webmaster.

Click here to read more …


SEO and Accessibility: Ways to Use the “ALT” Attribute

January 3, 2010 | Posted by Carma | Filed Under How To, Learning Center, images

It is simple enough to do, but so many people (myself included) forget to do it: use the “alt” attribute in their image tags.

This attribute isn’t required for the image to show up clearly, but it is required for website usability. And, on top of that, it can give your website a search engine boost.

Let me explain.

Google Image Search
Google is now displaying image results when people search for information. So, you can use the alt tag to add key words and phrases to your web pages. In fact, adding the alt tag can enhance your on-page search engine optimization.

Use the Tag Wisely
The alt attribute is an attribute of the “img” tag and was created as an alternative for non-visual browsers when they come across images. In other words, the text is meant to be used when the image is not visible on the page. Instead, what is displayed (or read) is the alternative text.

In addition, many browsers display the alt text when the customer rests their mouse on the image.

So, you don’t want to put a string of key words in the alt tag. You want that text to be easy to read and describe the image in some way.

How To Use the Alt Tag
Adding alt text is simple:

Picture 1

Some Quick Tips for Writing Alt Tags

Be Concise
An alt tag that is too long can be broken by some browsers. Also, if you try to stuff too many keywords in your alt tag, you’ll get penalized by Google. Basically, your alt tag text should include only those words that will help put the image in context — not be a full description of the image.

Be Clear
Of course, you don’t want to be so concise that your alt tag text has no meaning or is confusing. Remember, it is not only the search engines that will be reading your alt tag text, but real people, as well. For example:

  • Dog – decent
  • Swedish Valhund – Better
  • Swedish Valhund with red scarf and a tilted head – probably a bit too much

Remember Context
Don’t describe the image if the image is part of the context. For example, the alt text for your company logo would be your company name … not “Company Name Logo”.

Disregard Non-Essential Page Elements
You don’t need to include alt tags for images that aren’t important for the context of the page, such as spacer images, bullets and the like.


Want to Pimp Your WordPress Blog Yourself?

September 24, 2009 | Posted by Carma | Filed Under How To, Learning Center, WordPress

picture-2I just discovered a handy little guide from LifeHacker that explains the basics of “Tricking Out Your WordPress Blog” here: lifehacker.com/5365600/the-beginners-guide-to-tricking-out-your-wordpress-blog.

It covers initial configuration and some good plugins, too. If you’re a beginner, this post could really help you DIY.


Wrapping Words Around an Image In WordPress

July 10, 2009 | Posted by Carma | Filed Under How To, Learning Center, WordPress, images

Something I’ve noticed in the newer versions of Wordpress has really been giving my less tech savvy clients a hard time: wrapping words around an image.

There are two basic ways images are handled by WordPress:

  1. Through the theme’s CSS file
  2. Individually in each post or page

Since I tend to use images quite frequently and put them in different places, I usually remove most the the formatting from the CSS style sheet and place images by hand in the posts and pages. But if you’re using the Visual Mode rather than the HTML Mode, you might find that your images are not doing what you want them to do. Here is how to fix it.

First, you will need to use HTML Mode for some of this, so you’re going to have to get comfortable with HTML. But don’t be afraid, you’ll only need to look for specific code that I’m going to show you.

Step One: Upload/Insert your image by clicking on this image:

uploadinsert

Step Two: Select the image file you want to upload and up load it.

selectfiles

Step Three: Set your preferences for that image.

preferences

Most of the time, you won’t touch the Title, Caption and Description areas, so I won’t talk about them here. But I will go over the rest.

Link URL:

This lets you make the image a link or not.

  • If you want the image to be a live link to the image file, click on the “File URL” button and it will automatically fill in that field.
  • If you want the image to be a life link to the post, click on the “Post URL” button.
  • If you don’t want the image to be a link at all, click on the “None” button.
  • If you want the image to link to some other URL you have in mind, you can either delete the URL that is there or click the “None” button, then type in your chosen URL.

Most of the time, I just click the None button. WordPress remembers the last preferences you set, so you won’t have to do that again.

Alignment:

This aligns the image in relation to the spot you are inserting it.

  • None = no alignment. The image will be level with where you placed it.
  • Left = aligns the image to the left. Words will wrap around on the right.
  • Center = aligns the image in the center with words wrapping to the left and right.
  • Right = aligns the image to the right. Words will wrap around on the left.

Size:
When WordPress uploads an image, it automatically creates two or more versions at different sizes. You can define the parameters for Thumbnail, Medium and Large under Settings/Media. The Thumbnail you can see in the upper left of the window next to the date. The full size is the actual size of the file you uploaded.

Step Four: Insert the image.

Click on the “Insert into Post” button.

insert

Step Five: Fix the word wrapping

Once you’ve inserted an image, it might look something like this in Visual Mode:

visualmode

But look like this when you preview the post:

actualpost

Why is that?

For some reason, WordPress is using a “class” to wrap the image and the browser just doesn’t recognize it. So you have to go into the code and fix it.

When you look at the code for an image you’ll see something like this:

origcode

You want to replace the “offending” code, highlighted below,

offendingcode

with code that browsers will understand, as illustrated here:

thefix

In this example, I aligned the image to the right. To align it to the left, just change “right” to “left.”

To center an image, the best way is to put the image code in between center alignment div tags like so:

aligncenter

WARNING: When you go back into Visual Mode, it may erase some of the work you did in HTML Mode. So I recommend HTML Mode being your last stop. Save your post from there, otherwise, you’ll have to go back and fix everything again.


HONESTe Online Member Seal Click to verify - Before you buy!