Web Design, SEO and more...

Robert K. Tang

2008-06-24T06:49:00.000-07:00

http://www.outstandingdentalcare.com

Indexing Post

2008-05-11T15:33:00.001-07:00

Bay Area Weddings

On-Page Optimization (Part 2)

2007-07-01T20:48:00.000-07:00

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.

Off-Page Optimization (Part 1)

2007-06-30T23:58:00.000-07:00

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:

On-Page Optimization (15% of the game)
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.

How to make clouds move in flash

2007-04-04T16:12:00.000-07:00

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

Photshop Tutorials Good, Flash...not so Good

2007-02-20T19:23:00.000-08:00

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.

The Ultimate CSS Hack Pt. 3

2007-01-24T00:36:00.000-08:00

Well here it is. The final chapter of the series. With CSS3 on it's way, hopefully browsers will continue to adapt and finally agree for the most part on how to display websites. But until then, we'll continue to hack away (when necessary of course).

Opera
Although there are many hacks for Opera, the following code is ONLY read by Opera browsers, and will be ignored by ALL other browsers.

.top {
padding-top: 10px;
}
@media screen and (min-width: 900px) {
.top {
padding-top: 10px;
}
}

The CSS surrounded by the code highlighted in blue, is only read by Opera and "top" can be replaced by any old CSS syntax. Because of the "Linear Rule" that we defined at the start of the series, Opera browsers will follow the second rule. As stated above, other browsers will just ignore the second rule, and follow the first.

We hope these posts have helped you on your way to creating brilliant looking sites no matter what browser they're viewed in!

The Ultimate CSS Hack Pt. 2

2007-01-15T07:31:00.000-08:00

Until all web browsers begin to interpret CSS correctly, the CSS Hack is a necessary evil. Although the series will address Internet Explorer, Safari and Opera, Firefox hacks are simply not necessary. In short, Firefox is head and shoulders above all other browsers in terms of rendering CSS correctly, so a good rule of thumb is: Write for Firefox, hack the others.

Safari
Remember the "linear rule" we discussed in Pt. 1? If not, take a moment to refresh your memory before we continue. Using the "linear rule," Safari hacks are easy. Whenever CSS syntax includes the # sign in the exact location as shown below, Safari will ignore the entire CSS rule, and any other rules that follow after the # sign is read.

body {
background-color: black;
}

body {
background-color: white;#}

In the above example, ALL browsers other than Safari will have a white background. Because Safari ignores the second rule, it will show a black background. Pretty easy huh?

In general, Safari is pretty good with CSS compliance, but because Safari does NOT support styled forms, hacks are especially useful in this area.

Net Up: Opera

The Safe, Effective way to Move your Pages

2007-01-11T13:24:00.000-08:00

We've all been there; you want to move a page because it no longer belongs. Maybe it's better suited to be in a new directory, or maybe you'd like to change the file name to one that better suits its content. Regardless of the reason, the page needs to be moved. But how do we move it? And better yet, will this cause problems with Google and other major search engines?

Moving a page CAN cause problems when it comes to search engine rank and indexing. The first problem is obvious: If you move a page without telling Google that the former address no longer exists (we'll get into how to do this shortly), Google will think you've created an entirely new page. And worst of all, you'll get hit with a duplicate content penalty, since the new page will look identical to the old one in the eyes of Google. Sure, the search engines will eventually pick up on the fact that the old URL no longer exists, but it won't be soon enough to avoid a penalty.

In recent years, it was common to use Meta Refresh to redirect a page. Meta Refresh (often used in Doorway Pages) is a short command placed on a page that sends the user to its new location. Unfortunately, the technique quickly became an easy way for devious types to trick users into thinking they were visiting a page, and instead sending them to a completely unrelated page (often full of advertisements). It didn't take long for Google to pick up on this little trick, and soon it began to penalize sites using Meta Refresh.

But what about the people who just want to move a page for legitimate reasons? Well fear not, because here comes 301 re-direct to save the day!

A 301 re-direct is a form of server-side scripting. Most websites have a file called .htaccess that resides in the site's root directory (a root directory is the highest point in your in your website's heirarchy system). It's a simple text file that produces special commands in addition to what the actual page may have to offer. Because it's called .htaccess, it has no file extension. If you can't view your .htaccess file, or are not sure if you have one, download an FTP client and select "view hidden files" as an option. If you don't have one, it can be created easily. Just open up your favorite notepad, enter the code, and save it as a text file. After you upload it to your server, rename it to .htaccess, and you'll be on your way to server side scripting!

On to the code... If you find your .htaccess file has code your unfamiliar with, just leave it as and enter the following line(s) of code one line beneath the existing code.

Redirect 301 /blog.html http://www.pinbottle.com/index.html

(1)Redirect 301 (2)/blog.html (3)http://www.pinbottle.com/index.html

1) Just a simple title you'll use for all your 301s.
2) The url that will no longer exist. This isn't a full url, just the file name and it's path to the. The file we want to move's full url is http://www.pinbottle.com/blog.html (we just leave out the domain part).
3) This is the FULL url to the new file's new home.

NOTE: Notice the space between each element above. This space is necessary for the line of code to work:
Redirect 301_SPACE_/blog.html_SPACE_http://www.pinbottle.com/index.html

We hope this article has been of help to anyone looking to move a page the search engine friendly way.

The Ultimate CSS Hack Pt. 1

2007-01-11T11:42:00.000-08:00

Website Design can be tricky when it comes to pleasing all the major web browsers. Here are a few tips that will ensure your website's cross-browser fluidity.

It's important to note that web browsers read from top to bottom and will always follow the last rule they've been told. In the following example, the second CSS class "white" is followed. We'll call this the "linear rule" throughout the series.

Internet Explorer: Conditional Comments
Following our linear rule, the following syntax will provide hacks for all versions of Explorer.
Insert the code below into the "head" tags of your document.

The browser follows "if" rules. First, it reads the main style sheet, and applies the styles. However, if the web browser happens to be IE 7, IE 6 or any other version, it reads the rules within the style sheet titled [if IE 6], [if IE 7], etc.

Any new and alternative styles applied to the alternative style sheet will be applied. Here's an example.

If the browser is Internet Explorer, it will change the "color: black;" syntax to "color:white;"
In addition, Internet Explorer will introduce a margin of 20 pixels into the document, but other browsers such as Firefox would naturally ignore the alternative style sheet, and therefor will not have a 20 pixel top-margin.

In the example below, because the alternate style sheet does not include specific instructions for "margin-top," Internet Explorer will follow the initial rule it reads in the main style sheet. In order to adjust the margin-top property for Internet Explorer, apply "margin-top: 30px" syntax to the alternative style sheet, and Explorer will now follow the rule.

Stay tuned for part 2: Safari

Hi, I'm a PC and I'm a Mac

2007-01-08T11:51:00.000-08:00

It truly is amazing what can be accomplished with CSS. I just updated our menu with convenient tool-tips that couldn't have been accomplished without it. Working with CSS Layout is both exhilarating and liberating at the same time. I can't tell you how many headaches I've had over the monotony of working with nested tables, but luckily those days are over.

If you've you ever seen those Apple commercials where one guy's a "Mac" and one guy's a "PC," then you know that the "Mac" character portrays a creative type while "PC" is a little dull. Well in the Web Design world, tables are the "PC," and CSS is the "Mac." Which one do you want designing your website?

Why No Comments?

2007-01-05T04:13:00.001-08:00

Some have emailed and asked why this blog doesn't offer a comments section, similar to many other blogs. Unfortunately, the answer is spam.

I've noticed some trends taking place across the web to combat spam. Many blogs I visit are moderating their comments (that is, the comment must be approved before it appears), others are getting rid of comments altogether and some are moving toward the infamous "no follow" tag. Whatever the case, blog spamming is becoming obsolete, but there are still many spammers who have no idea that their links are flagged with "no follow," simply because they're not aware of it. Until the majority of the spamming community catches onto "no follow", spammers will continue to flood good blogs with useless comments but at least bloggers out there like myself are putting up a pretty good fight.

10 Favorite Programs and Tools

2007-01-01T22:02:00.000-08:00

Everyone always says "The internet is full of information," but sometimes some of the best websites are rarely discovered. The following is my list of favorite websites that I simply couldn't live without:

http://www.webuildpages.com/neat-o/
Allows Windows users to install multiple copies of Internet Explorer for testing websites

http://www.webuildpages.com/neat-o/
Creates a list of back-links as well as anchor text for any site

http://www.fontgarden.com/archive/a/a7.htm
1,000's of free fonts with some funny quotes

http://wellstyled.com/tools/colorscheme2/index-en.html
Creates color schemes instantly for any color

Complete CSS Guide
A detailed CSS Tutorial

http://binboy.sphere.pl/index.php?show=download&p2=1783
Evsoft 1st Page 2000 Download (2006 closes tags automatically which is really annoying, and Evrsoft no longer offers 2000 for download)

http://www.mindworkshop.com/alchemy/gifcon.html
An easy to use GIF animation program

http://www.lview.com/
Don't want to pay $650 for Photoshop? L-View is a nice alternative.

http://www.smartftp.com/
Smart FTP is pretty well-known, but I just couldn't live without it's user-friendly interface

http://filezilla.sourceforge.net/
Because Smart FTP doesn't allow you to view hidden files, Filezilla get's the job done for editing files like .htaccess

Google vs. MSN and Yahoo

2006-12-28T20:18:00.000-08:00

A lot of SEO is trial and error. Company's and experts can tell you they understand search engine algorithms, but because they're constantly changing, the truth is, it's hard to say for sure what the current criteria is for each search engine. Sure, we know the basics: back-links, copy, etc., but what are the other factors involved, and how much of a role do they actually play in determining search engine rank?

One thing I've found time and time again is Yahoo and MSN's response to keyword density. Whenever any significant change is made to our main page's keyword density, I notice fluctuations in rank almost immediately. On the other hand, Google seems to almost not care at all. Since most of my research revolves around Google, I've noticed that some sites rank very well with an above average keyword density, while others do well with a below average percentage. There are many myths about Google's keyword density tolerance, but personally, I think they just don't really care as long as it's within a reasonable percentage. I say "reasonable percentage" because Google seems to be pretty keen on identifying and penalizing sites that are clearly spamming.

Another thing I've found time and time again is the way Google analyzes back-links compared to Yahoo and MSN. It seems that Google is also quite keen on identifying a back-link's relevance and quality while Yahoo and MSN seem to lean more toward quantity. I come to this conclusion by seeing a wide variance in the way Google ranks sites compared to the other 2.

In general, sites that rank well in Yahoo and MSN rarely rank as well in Google. The conclusion is two-fold:

Yahoo and MSN place a higher weight on keyword density

Google analyzes back-links with a broader lens than the others

Anyone who follows SEO closely will tell you that this hypotheses is nothing new, but because SEO is difficult to prove, hard evidence is the only we really have.

New Name, New Site!

2006-12-27T00:53:00.000-08:00

Pin Bottle is proud to announce the launching of our new site! In addition to it's launch, we've officially changed our name from Pin Bottle Boston Website Design to Pin Bottle Web Design. It's a little simpler, and we like that. Our new site is fresh with new pages for potential clients to browse and learn more about who we are and what we're all about! In addition to it's sleek look, the site is designed using 100% CSS Layout, which we hope will not only decrease page load time, but facilitate our search engine success as well. So what are you waiting for? Take a peak:
http://www.pinbottle.com

Conditional Statements

2006-12-18T02:03:00.000-08:00

I designed my first site using 100% CSS recently and I have to say I was not very impressed with the lack of browser support from Internet Explorer. In testing, the latest versions of Netscape, Firefox, Safari and Opera all produced the results I was looking for but Explorer wasn’t very cooperative. I admit that IE7 wasn’t that bad, but why couldn’t they just get it right this time around like the other browsers? Lucky for me, conditional statements came in handy.

Conditional statements are something developed by Microsoft that allow Explorer to peak inside an additional CSS for alternate styles. For instance, if IE6 is rendering an element slightly differently than Firefox, a custom style sheet made specifically for IE6 will allow you to create an identical look in both browsers. There’s also an SEO advantage to using conditional statements. Previously, building different pages for different browsers was quite common. The method caused two problems with SEO though:

1) Duplicate pages means duplicate content
2) Using this method leaves the index page free of content, as it acts as a doorway page to the browser specific page.

Conditional statements eliminate the use of doorway pages and browser specific pages which is a great thing for SEO. But as far as designing is concerned, it would be great if Microsoft gets it right next time around.

Labels pt. 2

2006-12-13T02:46:00.000-08:00

Unfortunately, Pin Bottle has dropped from what was a brief time at #6 all the way to #15 for most G data centers for the keyword Boston Website Design. Whenever there's a shift, I always try to analyze my SEO behavior between the shift. And since the only on-page change had been the creation of labels, they had to go. Between each post's individual page, the archive pages and the home page, there's enough duplication of posts already. Sure, labels are useful for finding related information, but this blog is still pretty new, so there aren't a whole lot of posts to sift through. You may be asking, "What about robots.txt?" I know, I'm asking myself the same question. After seeing a "labels" page in Google's index, I've got to go back and re-examine the robots.txt file and figure out what exactly happened. Maybe it's just a typo. I'll keep you "posted."

Are you in the Game?

2006-12-10T21:36:00.000-08:00

Search Engine Optimization has become BIG BUSINESS since the explosion of internet search. I recently read an interesting story about how BMW's webmaster wasn't happy with it's position for certain keywords, and how he set up doorway pages loaded with spam to try to trick the S.E.'s. This led to a quick PR0 and a subsequent drop for all major keywords. I can only assume he was fired.

These days, it's essential for every website to have an SEO consultant. As the BMW example proves, employing a webmaster just isn't enough. Personally, I think all webmasters should be well educated in the ways of SEO, since the two go hand in hand, but that's just one man's opinion.

But what if you don't have the funds to pay for such services, or even have a webmaster on staff? Although time is always scarce in the small business world, there's really only one thing you can do: Learn SEO on your own. Although this can seem overwhelming, with a few minutes a day reading Blogs and Forum posts, you can quickly learn the dos and don'ts in the SEO game. For anyone ambitious enough to take on this task, it's important to understand that the world of SEO is constantly changing, and therefore ones SEO education never ends. But once you've got a good foundation of knowledge, keeping up with the changes is easier than one might think.

The bottom line is, if you rely on search engine traffic for conversions, SEO should be a MAJOR part of your company's investment. Whether you do the leg work on your own, or choose to outsource the work, either way, your business depends on it. Of coarse, you could always overpay for Adwords instead :)

Googleisms

2006-12-08T12:57:00.001-08:00

Why is Google so head and shoulders above the other search engines? It's a question I've often thought about. Over the past decade, Google has stormed into the homes of internet surfers like you and I with ferocious force. I remember the first time I tried Google. What intrigued me the most was it's simple home page, and the fact that it was completely dedicated to search. Obviously, Google has ventured out into many other avenues, but to their credit, they've kept their homepage intact, reminding people that search is still their number one priority.

Have you ever used the phrase, "I'll Yahoo that," or I'll MSN that?" Probably not, but I bet you've said "I'll Google that!" The fact is, Yahoo and MSN didn't make search their top priority, at least not to the visiting surfer. When I visit Yahoo, I think Email and News, then search. And when I think MSN, I think computers. But how many people think of anything other than search when Google comes to mind? Sounds pretty simple, but in reality it's pretty genius. The fact that Google kept their homepage intact has served as a constant reminder that search is their top priority. This in turn has made the word search and Google synonymous in the English language. No wonder they dominate the market.

Labels and Duplicate Content

2006-12-01T12:43:00.000-08:00

I recently switched over to Blogger's new beta version. One of the new options is to create "labels" for posts, which categorize posts for later searching. You may have seen this sort of thing on many Wordpress based blogs. But as I thought about the option, I began to think about the effects it would have on duplicate content...

If you archive your posts like I do, a unique URL is created for each post. Because of this, duplicate content is generated as long as the same post resides on your blog's index page. This isn't really that big of a deal though, as your index page will most likely be filled with other posts, watering down the exact percentage of duplicate content between the two URL's. But Labels are a little tricky, at least in the beginning.

Since I've used Labels, I've created two posts, both under different and new "labels." When published, not only do I create a unique URL for the new post through the archive process, but the same content is re-published under it's new label. At the moment, I only have two labels with one post assigned to each of them. This, combined with the unique URL that is assigned for the post's archive, creates identical content. I guess I could fix the problem by going through every single post I've ever made and assigning it a label, but it sort of seems like too much of a hassle. Until then, I plan to just ROBOT.txt my labels folder, to protect the site frrom any duplicate content penalties, and maybe when I have enough posts in each label, the dup. % will be low enough to un-ROBOT.txt the folder.

Firefox Extentions

2006-11-29T19:10:00.000-08:00

I remember back in the day, when Explorer and Netscape ruled, and Firefox was called Mozilla....My how the times have changed! If you're a web developer, I'll bet a $1,000 you use Firefox. Am I right? The fact that FF is an open-source browser allows for some pretty cool extensions. My two favorite (and ones that I just couldn't live without, now that I'm so spoiled by FF) are Colorzilla and SEO Quake.

Colorzilla allows you to use an eyedropper for any web page, not only producing the RGB parameters, but the Web color code as well. So whenever you see a color you like, no more viewing the source code or capturing a picture!

SEO Quake has many tools such as showing Search Engine position and back-links not only for the sites you visit, but for your Search Engine Results as well (How cool!). but my favorite part is the option to "line-through" no-follow links. It's an easy way of checking to make sure reciprocal link partners are behaving themselves, and also a great tool for SEO in general.

Yahoo Mystery

2006-11-27T06:17:00.000-08:00

For months, Pin Bottle ranked on the first page for Yahoo for the keyword: "Boston Website Design," yet we were nowhere to be found in Google. Suddenly, the complete opposite has taken place: First page Google, buried in Yahoo. Reading around the forums, it's safe to say that Yahoo has either updated their algorithm, applied site penalties similar to Google or both. There's just no other explanation! It's hard to get good information on Yahoo optimization simply because most people optimize for Google, and optimizing for all three search engines (Yahoo, Google and MSN) is just too ambitious. Most people just pick one and focus their efforts on the one they chose. But because Google continues to gain market share at a much larger rate than the other S.E.'s, Google is usually the top choice, and SEO's just cross their fingers for the other two and hope to rank well.

The assumption's been out there for a while that Google focuses on back-links, MSN focuses on on-page optimization, while Yahoo falls somewhere in between. But if this is true, answer me this riddle: Why does P.B. rank on the first page in Google and MSN yet is buried in Yahoo? This is why the old assumption may longer be true, and until more people figure it out and post the new info in forums, I'll be as clueless as the next guy as to how to optimize for Yahoo. But in reality, it doesn't make much of a difference, since we target Google anyway....

Did Google Read my Last Blog Post?

2006-11-23T13:19:00.000-08:00

Thanksgiving is certainly a day to acknowledge what we're thankful for. The three most things I'm thankful for today are family, football and our new Google rank! Pin Bottle Boston Website Design has made it out of the sandbox, and jumped from #180 to #6! (If this isn't enough evidence to support the Sand Box theory, then I don't know what will). It's hard to get too excited, since listings can often fluctuate sometimes violently, but we're hoping we stay at least within the first ten results. Statistics show that 40% of searches click on the first result, while only 15% of users view second page results, so if you can't be #1, being on the first page isn't too bad. Now the big question.....Do we switch our homepage back to our main design page? It's tough to say. Our blog was getting more hits, so we made it our index page, but with a first page Google listing, it's safe to say that we'll receive some targeted traffic. I think what we'll do is ride it out a little while before we make the switch.

Here's to a little hard work, a lot of research, and some creativity! Hopefully, the Big G won't let me down....

Growing Tired

2006-11-21T13:34:00.000-08:00

It's officially been 6 months, give or take a few days, and we're still nowhere to be found in Google for "Boston Website Design." I recently read how some penalties are so severe that it's sometimes advantageous to abandon a domain name altogether and start anew. MSN and Yahoo obviously don't impose such penalties, as it's easy to interpret their algorithms and rank well for each. But Google is just a pain in the you know what! Why do we continue to linger in the sandbox? Why do we continue to rank low for the same keywords we dominate in other search engines? Your guess is as good as mine, but whatever the case, it's virtually impossible to figure out. I have heard stories of some site owners ranking well after a much longer time in "Time-Out," but is it worth the wait? Should a webmaster continue to build links for a site that will never rank well? SEO can be quite time consuming, and it's frustrating when your efforts are met with poor results. I'm thinking of just keeping the domain name, letting the back-links age, while starting a new domain with 110% White-Hat SEO optimization on the side. Who knows which one will finally rank, but it can't hurt to double your chances....

The Age of LINKS

2006-11-16T19:06:00.000-08:00

Patience is not always easy. Whether you're sitting in a traffic jam, saving for a house or waiting for your SEO efforts to pay off, time can sometimes last forever. With SEO, our efforts are rarely rewardly over a short-period of time. Not only does Google favor well-aged sites, but well-aged links as well. This is a sad but true fact that exists because of link spammer. In fact, most of Google's little rules and penalties are thanks to all the people out there trying to cheat the system. But back to links....

With the enormous ammount of blogs, forums and Wikis out there, links can be dropped just about anywhere. Google and other search engines are well aware of these methods, and therefore apply very little weight to new links. But after a good ammount of time, if the links aren't removed, the SE's start to assume that the links are genuine. How long does it take? It's anyone's guess, but the general idea is to be patient. If you've just gained a prominent link and aren't seeing any results quite yet, hang in there and eventually your links will become relevant.

Quick note: MSN has dropped Pinbottle from #1 to #2 for "Boston Website Design." I anticipated more of a significant drop, since Yahoo dropped us from #3 to #21 since our keyword density dropped with the changing of our homepage. This is interesting, since it's assumed that MSN cares more about on-page optimization than Yahoo, but these results show just the opposite.