I just learned something new today that I thought I’d share, because I’m sure there are others like myself that are learning this stuff. This is pretty cool for those that are new to creating SEO friendly code, like myself. With this code you can create buttons with link text that is readable by the search engines, plus you can also create buttons that are reusable rather than having to create a button for each variation of the same button that you want to put different text into.
Let me give you an example of this. I had two buttons on one of my pages. They were exactly the same except for the text. One button I wanted to read “Compare” and the other read “Reviews”. Plus it would be extremely helpful if the search engines actually read that text and followed my link to those pages.Now normally you’d say just create two buttons, one for each with graphical text embedded into the button, and you can do that and it’ll work just fine. However, with a normal button with the text embedded into the button itself, the search engines can not and will not read that “compare” or “review” text… thus you loose potential SEO power. With the code I’m proposing, you will actually be creating a css style, and wrapping the “<a href>” tag around the div to accomplish the same thing, but now the search engines will see it as a link and follow it.(if you choose to allow them)
So first, here is the code that actually goes into you page: (or in my case my page to show my compare and review buttons)
<a class=”lower_button” href=”<your website location here>”>
<div class=”compare_review_button” onmouseover=”this.className=’compare_review_button_hover’”
onmouseout=”this.className=’compare_review_button’”>
COMPARE </div>
</a>
———————
this is the code for the review button:
<a class=”lower_button” href=”http://<your website location here>”>
<div class=”compare_review_button” onmouseover=”this.className=’compare_review_button_hover’”
onmouseout=”this.className=’compare_review_button’”>
REVIEWS
</div>
</a>
——————–
Here are the classes you will need to add to your css style sheet. They control the button characteristics using a url of a graphic we defined in fireworks, the size, the text font, and hover characteristics.
.compare_review_button {
color:#000000;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:11pt;
font-weight:bold;
height:30px;
margin-left: 20px;
margin-top: 0px;
margin-bottom: 20px;
padding-top:5px;
text-align:center;
text-decoration:none;
width:140px;
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/button-orange.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
.compare_review_button_hover {
color:#000000;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:11pt;
font-weight:bold;
margin-left: 20px;
margin-top: 0px;
margin-bottom: 20px;
height:30px;
padding-top:5px;
text-align:center;
text-decoration:none;
width:140px;
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/button-orange-hover.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
What you ultimately end up with are two buttons that look similar to the ones in the screen shot below:
The difference with this code is that the search engines will now read two links, one that says “Compare” and one that says “Reviews” that link to other pages on your site.
Now I’m sure some of the established SEO guru’s will say, wow, she just learned this.. yep, I did. This is an SEO 101. But I look at it this way, “never too late”, and I’d welcome any comments or corrections if I’ve stated anything incorrectly. I love learning new things, and sometimes it’s the simplest, easiest things to the guru’s that us newbies don’t know, and still need to learn.
Test it out, have fun with it, and give me a shout if you need any help.
Best Successes!
{ 0 comments… add one now }