Pin Bottle Boston Website Design Blog
Web Design, SEO and sometimes more

Google Reader or Homepage  Add to My Yahoo!  Add to Technorati Favorites!   

Thursday, July 10, 2008

Go Back to Firefox 2

For anyone who isn't thrilled with Firefox 3 and the fact that it doesn't support Google Browser Sync, here are a few links you'll need:

http://releases.mozilla.org/pub/mozilla.org/ <-continued->
<-continued-> firefox/releases/2.0.0.14/win32/en-US/
http://english.ircfast.com/index.php?mid=878597918&sid=37677&fw=y

Sunday, July 01, 2007

On-Page Optimization (Part 2)

The strategic coding of a page's HTML and Copy


Like the Anchor Text in back-links, keywords that appear in your website's code and copy help Search Engine's associate your website with certain words and phrases. For instance, if the keyword, "Web Design Boston" appears 7 times in your page's HTML and copy, and is repeated on other pages as well, it becomes fairly easy for Search Engines to realize that chances are the web site/web page is about "Web Design Boston." The SEO word for this is called "Keyword Density." The keywords that have the most density on your page in relation to the rest of your code and copy will work to strengthen your website's Keyword Association.

At one point in time, Search Engines relied heavily on Keyword Density. As a result, webmasters began to abuse the technique by using extra small font and even camouflaging text completely by making the font color the same color as the web page's background (otherwise known as "Cloaking"). Because of this abuse, Google decided to place far more weight on the strength of a site's Back-Link Power as opposed to a site's Keyword Density. However, it is still commonly accepted that Google places a small amount of weight toward On-Page Optimization and in other search Engines such as Yahoo and MSN, Keyword Density plays a far greater role.

In addition to Keyword Density, Keyword Placement also factors into the equation. Let's say a website had 200 lines of code but yet the keywords in question were only found in the bottom two lines of the page. This would be a poor example of Keyword Placement. In theory, your keywords should appear evenly throughout your site's code, and in a few particular places.

META TAGS:


Forget about the Keyword Meta Tag. It's now useless. Again, abuse....The Title Meta Tag and Description Meta Tag, however, still play prominent roles in developing Keyword Association. Some suggest repeating your keyword twice in each Meta Tag, and if possible, writing your title and description in such a way that your keyword appears as close to the beginning as possible. Of course, this isn't always feasible. And in fact, a general rule of thumb is to write for the user. This is because On-Page optimization plays such a small role in the overall Page Ranking system that it's not worth sacrificing your quality content and well-written sales pitches for in place of Keyword Density.

THE ALT TEXT ATTRIBUTE


Ever hover your mouse over an image and a description appears? This is called "Alt Text" that appears in the image's HTML. Here's an example:



Because Search Engine Crawlers can't read images, they pay particular attention to an image's Alt Text. A good example of this is Google's Image Search. Every image that exists in their index has been listed according to the image's Alt Text. So if you have an image of an apple, but your Alt Text says "orange," you'll find it under the search phrase "orange" in Google's image index.

HEADER TAGS





These are called "Headers" and in HTML automatically raise the font size of text in addition to making the text bold faced. Their purpose is to serve as titles for a block of text or any other web element that warrants a title or short description. Because of this, Search Engines place emphasis on the words that are used in your websites Headers because they assume that the words in your Headers are intended to describe major portions of your website's pages. The great thing about a new form of HTML called CSS (Cascading Style Sheets) is that all versions of Header tags can now be styled to appear any size and any font-weight (bold or normal).

Like Cloaking, some webmasters like to sneak Keywords inside tags. No Script tags hide its contents from users when JavaScript is enabled, and show the contents within the tags when the user has disabled their web browser from reading JavaScript. The real purpose of this tag is for this type of message,

"In order to view our website the way it is originally intended to be viewed, you must be surfing with JavaScript enabled."

But instead of including important messages, webmasters have used this tag inappropriately to try to increase their site's Keyword Density. Stay away from this method. Including 1 or 2 keywords in your message won't hurt you, but if you fill your No Script tags with irrelevant text, someone could report you to Google for trying to trick the system, and if Google decides you're guilty, they could place a severe penalty on your site's listing, or in worse case scenarios, ban your site altogether.

Sticking with the "Penalty" and "Ban" theme, it's important to note that this goes for every method we've discussed so far. Using Keywords in the places we've discussed not only strengthen your Keyword Association with search Engines, but are also very useful to users when used appropriately. But because Google insists that a web site should be written and coded for the user and NOT a Search Engine, repeating a word 3 times over in an Alt Tag is not advantageous to the user, and therefore could be accompanied by penalties and bans from Search Engines. This is otherwise known as "Keyword Stuffing."

Keyword Stuffing is exactly what it sounds like: Stuffing your websites code and content with Keywords. Sure it is a great idea to use keywords in Alt Tags, Meta Tags, Headers and copy, but repeating them multiple times in the same tag, or using them in every Header tag that exists on your site for example is commonly viewed as deceptive behavior. However, if you only used 2 Headers throughout the page, it's perfectly reasonable that you would repeat a keyword, but with any technique, you sort of have to use a little common sense. Again, is it written for the user? If not, there's a good chance you're Keyword Stuffing and as a result gambling with the integrity of your Search Engine Listing.

As a general rule of thumb, don't try to outsmart Google. Believe me, if you think of it, Google already has as well, and have already put a penalty in place for the mischievous technique.

THE COPY


Like you probably figured, it's important to place keywords in your page's copy. If you use keywords within your copy, try to place your most important ones at the very beginning and end of your page's copy. Try to make it so your Keywords are the first and last thing search Engine Robots read. Think of it as a College Essay. You start off with an Introduction; then you have your Body followed by your Conclusion, which is really just a rewritten version of your Introduction. The same should apply for your copy, with your Keywords acting as your copy's Introduction and Conclusion.


It's important to know that your Keyword Density Percentage is not solely based on your copy, but all the elements we've discussed above. Here's a great tool to check your page's Keyword Density Percentage:

http://www.ranks.nl/tools/spider.html

Many Search Engine Professionals will tell you to stay within a certain percentage, but the truth is there is no "Magic Percentage." What's most important is that your Keywords carry a higher density percentage than your non-keywords. For instance, if you're targeting the Keyword "Boston Web Development," yet you have several other non-keyword phrases that appear more often in your HTML and copy, Search Engines will have a hard time determining that your website is SUPPOSED to be about "Boston Web Development." So let's say the non-keyword phrase "Hot Dog Safari" carries a 2% keyword density, the goal would be to list the targeted Keyword "Boston Web Development" at 3%. You don't need to go wild increasing your percentages, but increase them just enough for there to be a clear distinction between the two. If you've ran your website through the Keyword Density Percentage tool listed above, you'll see that it breaks down your website's density by 1,2,3 and 4 word phrases. So keeping in line with our technique, your top percentages for each of these numbers should be targeted Keywords. The exception is one word keywords, as studies show people rarely search one word phrases, with 3 and 4 being the most searched.

Other SEO Notes:


THE IMPORTANCE OF A SEARCH ENGINE FRIENDLY NAVIGATION SYSTEM


Chances are, your site has much more to offer than just your homepage, so it's important to keep this in mind when building your site. Let's say you are selling Hot Dogs on one page and Peanuts on another. You want both pages to come up when someone searches for these phrases. But many websites have JavaScript and Flash menus that Search Engine Robots are unable to follow. This is where the good old Site Map comes into play.

If your site is using JavaScript or Flash menus, a Site Map is necessary to direct Search Engine Robots to the rest of your site's pages. Like Direct Back-Links, a Site Map's link needs to be coded with HTML Hypertext:



This will ensure that regardless of whatever method you're using for your main menu, Search Engine Robots will be able to discover your website's other important pages.

Another important note is, make sure that the Meta Tag Title and Description are worded differently for each page. This will help emphasize the fact that your other pages have new, important content to offer, and therefore should be listed with the same importance as your homepage for their specific topic.

Saturday, June 30, 2007

Off-Page Optimization (Part 1)

Ok, I'm going to give you a crash course on SEO. (Search Engine Optimization). I basically learned everything I know through hours and hours of reading information on the web from many different sources.

First, let's start with the Search Engine Big 3: Google, Yahoo and MSN. As you probably know, Google is the most searched, followed by Yahoo and then MSN. Google holds around a 60% share with Yahoo holding around 30% and MSN at about 10%. Ask.com has recently launched a major advertising campaign, so I'm not sure how much of the market they've been able to grab, but the trends show Google continuing to gain, with Yahoo and MSN continuing to lose. So naturally, Google is the big dog which is why I will reference them often.

Search Engine Optimization consists of two areas:

  1. On-Page Optimization (15% of the game)
  2. Off-Page Optimization (85% of the game)

On-Page optimization is the strategic coding of a website (HTML). And Off-Page optimization is the process of gaining well-placed and well-worded back-links.

Off-Page Optimization


A back-link is simply a link on another website that points to one of your site's pages. Search engines have figured out that a website's popularity can be determined by a site's back-links. For example, if Microsoft .com has 100,000 other websites linking to them, it's easy for search engines to figure out that Microsoft.com is popular. Essentially, a back-link acts as a "vote" for the site it points to. So Off-Page Optimization is all about getting as many votes as possible.

All back-links are not equal. There are a few factors that determine the power of a single back-link. One is: what site is the back-link coming from? If it's from a popular site, the back-link is weighted appropriately. For instance, a back-link from my site would not carry nearly the same weight as a back-link form Microsoft.com. And to put it into more perspective, 1,000 back-links from sites like mine (that are only popular locally) would still equal the same weight as ONE back-link from Microsoft.com. This means that total back-links, although important, are only part of the game. In order to develop real Search Engine Power, you must have back-links from powerful sites.

A second major factor when it comes to back-links is "Anchor Text." Anchor Text is SEO jargon for the actual words that are used to describe a link. I know it's been a while, but hopefully you're still familiar with this piece of code:



Although this link points to my website, the only thing you actually see on the web page are the words "Boston Website Design." In the eyes of the Search Engine's crawlers (the robots that crawl your site and record your information for their listings), the Anchor Text of a link acts as a link's description. So when Google sees that a link titled "Boston Website Design" that is pointed to my site, it associates my site with the keyword "Boston Website Design."

Google is very clever at determining whether back-links are manually generated or natural. A manual back-link would be something that your company bought. A natural back-link would be someone linking to your site on their own accord. In fact, Google has suggested to site's that sell advertisements to place a specific piece of code in the HTML of a link to let Google know that the back-link was purchased. More information on this topic can be found here in an article I wrote that has been published several times around the web:

http://www.selfseo.com/story-19015.php

The rel="nofollow" tag is the piece of code that Google has suggested, and it is used universally in most blogs now to combat spam. When Search Engines see a link with the tag rel="nofollow" attached, it doesn't count the back-link toward it's ranking system. This piece of information is particularly important because if your company chooses to purchase back-links, it needs to be sure that they are "Direct-Links," meaning they will not include the rel="nofollow" tag, or any of the other methods I've described in my article that can camouflage a link from the eyes of a Search Engine crawler.

Google in particular also monitors the pattern in which your site gains back-links. For instance, if your site purchases 10,000 back-links all at once, even if they're from powerful sites, the links will be watered down in terms of power. This is because chances are your site doesn't have a history of gaining 10,000 back-links a day. When purchasing back-links, it's important to be conservative at first in how many you purchase. Then, once you increase the rate at which you obtain back-links, you can gradually increase this rate over time. For instance, maybe you buy 100 the first month, then 150 the next, then 200 and so on as opposed to purchasing 500 all at once. This will make it appear as though the back-links are generated naturally, increasing the power of each link.

Another important factor when manually generating back-links, is to alternate your Anchor Text. Even if you spread out your purchases over a period of time, the back-links can't all be titled the same. Because the goal is to make the back-links appear natural, chances are, if 1,000 different people are linking to your site, they're not all going to use the same Anchor Text. So it's important to come up with a large list of keywords that you will alternate with each purchased back-link. For instance, in addition to "Boston Website Design," I'll also use "Website Design Boston," "Web Development Boston," "Boston Website Designer," and so on. This will not only make your back-links appear natural, but will help you rank well for each of the varied keywords. There are many tools on the web that can help you develop a list. Google has one here:

https://adwords.google.com/select/KeywordToolExternal

This doesn't mean that you can't repeat Anchor Text. Just that when you purchase a block of keywords, vary their Anchor Text, and then the next month vary it again only repeating a few (If Google sees the same 10 titles every month they're going to catch on to the fact that the back-links aren't natural).

In addition, it's important to throw in your URL every now and then as your Anchor Text. This is because if you were to gain 1,000 back-links naturally, chances are that some of them are going to contain your URL as the title. Here's an example:



However, I would not use this Anchor Text on a powerful site, since it doesn't carry any Keyword Association.

It's important to note that hyperlinked images do not count as back-links. The back-link must be text, and also use the standard coding. Obviously, links in Flash animations are not read as well, and therefore carry no weight.

Also, when obtaining back-links, it's important to get "deep-links." That is, links that are not pointed to your homepage, but pages that exist within your site. Like every SEO strategy, making your back-links appear natural is the key. And chances are, if 100 people are linking to your site, not all of them will link to your homepage. This also makes your site appear "authoritative" in the eyes of Google. That is, your site will appear as if it has a lot to offer, which is exactly what Google is looking for in it's top ranked sites.

Stay away from "bad neighborhoods" when obtaining back-links. Primarily, these consist of Link Farms. It's possible that you could actually be penalized for showing up on these sites, so stay as far away from them as possible.

At one point in time, reciprocal linking was a good strategy (I link to you, you link to me). But because people began to abuse this technique, Google has since decided to severely water-down reciprocal links. This is why I wouldn't even bother exploring this avenue. One-way links are 100 times more effective (unless you are trading with a very high-powered site which would lessen the ratio).

Also, the only directories you should even care about are Yahoo's and Google's (DMOZ). Both of these directories carry substantial link-love. Google's is free (although there's an application process) and Yahoo costs a few hundred a year. Other than Yahoo, I would never pay to be listed in a directory unless you thought the listing would generate traffic, because directory listings other than the Big 2 carry very little back-link weight.

There are many ways or generating quality back-links manually, without purchasing straight up advertisements. There are many services out there that will "blog" about your site for a fee. You present what you'd like them to evaluate, and then they'll blog about it. Many popular bloggers will do this do make some cash, but because they don't want to b.s. their readers, they'll write an honest review.

Another way to generate a quality back-link manually is to write a killer article about your business and then get it published on high quality information based sites. Most of the time this will cost a fee, but if the article is good enough most websites that talk about your industry would be glad to publish it for free. Make sure you don't offer the article for free-print, however. Just get it published on a few good sites, and then write another and repeat the process. There are reasons why you should not offer your article for free-print, but I won't get into them here.

A third way of generating a quality back-link is to write regular Press Releases. For the right price, you can get your press-releases published on some of the top newspaper and news-based sites on the web.

With using these three methods, the most important factor is to require that your link be included. And make sure the link is a "Direct Back-Link," or else it defeats the purpose.

There are a few ways you can monitor your back-link status. First let me explain why Google doesn't list all your back-links. Because Google wants their listings to be as accurate as possible, they aren't very keen on helping Search Engine Optimization professionals. They sort of see them as the enemy, and therefore don't go out of there way to provide information that would primarily only be relevant for SEO purposes. MSN has also followed suit, and doesn't offer ANY back-link information anymore. Yahoo, however, still lists all your back-link information. And chances are if Yahoo says you have 11,000 back-links, Google has the same information even though they choose not to make it public. However, Google does display a small portion of your back-link data, but a small portion doesn't really do you a whole lot when you're analyzing the big picture.

When analyzing your back-links in Yahoo, enter this format into the search field.

link:www.pinbottle.com

This will deliver a total list of sites that are linking to you. This is also a great tool in determining which sites you'd like to purchase back-links from. Although "total back-links" don't tell the whole picture, you can get a pretty good idea at how powerful a site is based on their total. For instance, compare my site to www.finerdesign.com, and it's easy to figure out who would provide a higher quality back-link.

Also, there are programs that can analyze your back-link Anchor Text. One I know of off hand is Axandra (If you choose to use SEO Software, use it strictly for data analysis. Do NOT under any circumstances use it for On-Page Optimization advice, as there is no TRUE formula for things such as keyword density, a subject that we'll cover in my next blog). You can also hire a company to analyze your back-link Anchor Text. Check out this free tool:

http://www.webuildpages.com/neat-o/

The tool only gives you 100 listings, but it's a good example at how easily the information can be extracted. If you click on their homepage and hire them, you can get the full list.

Another tool that you can use is the AllInAnchor search, or in Yahoo's case, the InAnchor search.

Go to Google and type in allinanchor:boston website design and you'll be shown the websites that have the most back-links with this anchor text in order. My site comes up 11, which means that of all the back-links that exist in the world, I have the 11th most that contain the phrase "Boston Website Design." For Yahoo, just type in inanchor:boston website design.

Along with the many tools I've listed, one of the best uses for them is to analyze your competition. For instance, let's say I want to rank well for "Boston Web Developer." All I need to do is use these tools to determine how many back-links my competitors have, and where they're coming from. This is particularly important because some keywords are just too competitive. For example, if you run a search for "computers," and then analyze back-link status for the top listings, you may find that it would take too much time and too much money to ever truly compete with certain websites for certain keywords. This will be important information to analyze when you're coming up with your list of Alternate Anchor Text (keywords) that you plan to deploy. Target keywords that are within your reach. The last data I read with regards to search habits, was that 40% of all users clicked on the first listing, and only 10% of users ever viewed the second page of listings, so obviously getting the top listing is the goal, but if you can't get on the first page, don't even bother working toward that keyword.

Wednesday, April 04, 2007

How to make clouds move in flash

Want moving clouds for your website? If you have Photoshop and Flash, here's how it's done:

Create a new image in Photoshop. For my example I've created an image 750x300. We'll call this "Image 1."

Set your foreground color to white, and your background color to your preferred shade to blue. For my example, I've used #1538eb.

Select Filter -> Render -> Clouds

Select your Rectangular Marquee, and copy the image you've created.

Create a new image and set it to the same height but triple it's width. 2250x300. We'll call this image "Canvas."

Paste your clouds into the "Canvas" image and leave it smack in the center. Your "Canvas" should now look like this.



Go back to "Image 1" and flip it horizontaly:
Image -> Rotate Canvas -> Flip Canvas Horizontal.

Select your rectangular marquee tool and copy the clouds that you've just flipped.

Paste your flipped clouds into the "Canvas" and drag it to the far left. Your "Canvas" should now look like this.



Paste your flipped clouds again and this time drag it to the far right. Your "Canvas" should now look like this.



Save your "Canvas" as "Canvas.jpg"

In Flash, create a new file and change it's dimensions to 750x300 with a 24 Frame Rate:
Modify -> Document ->

Import your "Canvas.jpg" to the stage:
File -> Import -> Import to Stage ->

Line up your image so it covers the stage with only the left third of your image.

Scroll to frame 700 and create a keyframe:
Select frame 700 -> Right Click -> Insert Keyframe

Select frame one and hold the shift key down. Then select frame 700 and release the shift key. This will highlight frames 1-700. Right click and select: Create Motion Tween.

Left click on frame 700. Now only frame 700 should be selected.

Drag your clouds to the left so only the right third of your image appears on the stage.

That's it! Go ahead and test your movie:
Control -> Test Movie

*** View Finished Product ***

P.S. This tutorial was inspired by my inability to find a similar one when I wanted to first learn the technique. So here's a few phrases for Google to help anyone else out there:
How to make clouds move in flash
Flash Moving Clouds
Moving Clouds in Flash
How to animate clouds in flash
How to make moving clouds in flash

Tuesday, February 20, 2007

Photshop Tutorials Good, Flash...not so Good

When I first used Photoshop, like most people, I was pretty intimidated. Sure, I could do the common tasks that are common to most paint programs, but I had no idea how to create some of the exciting new graphics that were suddenly popping up all over the web. Lucky for me, the web was full of tutorials teaching everything from basic layers to more complex techniques, and after going through a few of them, I began to learn how to unleash the true power of Photoshop. If I wanted to learn how to create a cool button, I simply searched, "Photoshop Cool Button Tutorial." It was that easy.

Recently, I began fooling around with Flash. After my success with Photoshop tutorials, I searched for some Flash ones to help me navigate this complex program. Unfortunately, most of the tutorials I found were designed for the intermediate/advanced user, and very few were created for beginners like me. Since then, I've conquered some of the most basic tasks and searched again for some tutorials to advance my education only to once again be left frustrated by the advanced technical jargon that exists in almost every flash tutorial out there. I found even the Adobe website itself to be very little help. This experience has inspired me to eventually create some user-friendly flash tutorials tailored for beginners. The first one I intent to create is a "Flash Slideshow" tutorial and my goal is to hopefully create a situation where in the future, when the term "Flash Tutorials" is searched in Google, it will return some actual FREE tutorials as opposed to just software companies offering alternative Flash programs.
Go Back to Firefox 2 - On-Page Optimization (Part 2) - Off-Page Optimization (Part 1) - How to make clouds move in flash - Photshop Tutorials Good, Flash...not so Good - The Ultimate CSS Hack Pt. 3 - The Ultimate CSS Hack Pt. 2 - The Safe, Effective way to Move your Pages - The Ultimate CSS Hack Pt. 1 - Hi, I'm a PC and I'm a Mac - September 2006 - October 2006 - November 2006 - December 2006 - January 2007 - February 2007 - April 2007 - June 2007 - July 2007 - July 2008 - Website Design History
Website Design Awards

Theme: Day Dream by Jim Whimpey. Get a free blog at WordPress.com.
Pin Bottle Boston Website Design 2007, All Rights Reserved - Site Map