- Title Tags - make sure that each of your web pages has a title tag which includes some of the keywords for that particular page. An important part of title tags is that no two pages have the exact same title.
- Meta Keywords - include meta keywords for all your web pages, and make the keywords page-specific. If a page does not contain a particular word (even if it is a big keyword on your website as a whole) don't include it.
- Meta Descriptions - these should be on all pages, and again, they should be page-specific.
- Image Alt Tags - especially now that there are search engines specifically for images, your images should have alt tags that are descriptive of both the image, and the page that the image is on.
- Link Title Tags - links typically consist of regular href statements, but you should also include a title for search engines. An example may look like <a href="link-url" title="Page Name">Name</a>.
- Keyword Specific File Names - all of your pages should have page files names that are specific to that page by incorporating some of the keywords from that page. For example, if it is a page for pants, the file name could be "pants-jeans-khakis.html."
- Not Too Many Folders - your web page URLs should not have more than three directories (folders) in them.
- Repeat Keywords - keywords should be in all places where search engines are looking. You should highlight your page keywords in the title, meta keywords, alt tags, title tags, etc.
- Content, Content, Content - lots of relevant (and original if possible) content is a long-lasting search engine go-to. The content is what's important on a page, so the content should be a focus when you are creating the page. Too often the images and banners are the focus and the content is an after-thought.
- Update Content Regularly - you can even include "this was last updated" in the code so that you remember. Link to new relevant information, and have those links refer back you your website.
- Never Use Frames - I think that about covers it...never use frames. Any content in a frame is content that search engines don't see as part of your page.
- Use Flash Sparingly - I prefer not to use flash at all, but I understand the aesthetic appeal of some flash. Any information, text, links, or images in a flash file cannot be indexed by search engines.
- Keep Design As Expected - some people want to have their website be different and unique and will have their layout different than other websites. Web surfers are used to looking for information in the same general areas. By putting information somewhere unexpected it requires the visitor to search for it on your page, and makes your website more work.
- Keep Your Pages Small - keep images small, keep 'fluff' coding off, use image sprites if it helps. The smaller your pages are (with images, CSS, JavaScript, etc) the faster they will load, and the happier your visitor is with their visit.
- Use hyphens - rather than _ underscores - when you are setting up your keyword-focused page file names, you will want to separate your keywords with hyphens. Search engines will often read those as spaces, whereas underscores are just taken out. "Pants-jeans.html" will be read as "pants jeans" whereas "pants_jeans.html" will often be read as "Pantsjeans."
- Robots.txt File - this is there to help search engine spiders. Review guidelines on setting this up so that it includes the relevant information for your website.
- Text Instead Of Images - wherever possible, use text rather than images. If you have a banner with text in it, have the banner be a background and put the text over it. If you have a tabbed navigation, see if you can have your designer repeat the tab images and just have regular HTML text over each for the image. Search engines can't read the text in your images.
- Use Headings Correctly - heading tags, such as <h1>
</h1>should be around page specific headings. Keywords should also be included in these heading tags. So for my pants-jeans-khaki.html page, my heading may look like <h1>Browse Our Jean Pants & Khaki Pants</h1>. Don't get relaxed and use heading tags for things such as <h1>Similar Items:</h1> because neither "similar" nor "items" are keywords on your page, so they should not be in a heading or title area. Use HTML or CSS to make the "Similar Items" text as large as you want, but don't use heading tags. - Get Inbound Links - do link sharing and referrals to get traffic coming to your website. Not only is this good for more hits, but if many sites, specifically credible sites, are linking to you, search engines will take your site more seriously.
- Create A Sitemap - there are two main types of sitemaps, and both should be created. Setup a Google Sitemap that you submit to search engines including Google. Also have a sitemap on your website. This gives search engines a quick page with links to all your other pages so they are easy to find.
- Do Your Own Research - check your website in many browsers. Setup things such as Google Analytics so that you can track your website visitors. Make sure you know what is going on with your website. If there are trends with your visitors, make sure you know about those. If your statistics change, make sure you are checking up so you are aware of the changes.
- No Broken Links - there are free tools out there to check your website for broken links. Make sure you don't have any broken links or missing images.
- Research Your Competitors - find out what your competitors are using for keywords, what they are focusing their content on. If they are ranking better than you, find out why that is and improve upon those areas.
- Don't Let Your Site Sit - search engines like websites that are active. Don't put your website up, setup the content once and think that you are done. You should get excited about your site. Let your customers know you are excited about it, and that there is a reason for them to come back to see new information or changes.
- Be Picky With Advice - don't try everything that you hear on every "this is how it's done" website. Pick a few ideas, implement them, and see how your site does. Check if the tips improve or hurt your traffic. See if they effect your Google ranking. Some advice is great, whereas other advice may hurt your web page standings. If it is good for your customer, then it is probably good for your website. If you are being sneaky to trick search engines into ranking you high, it may help you temporarily, but will often hurt you in the long run.
Tuesday, July 12, 2011
25 SEO Tips You Shouldn't Overlook
I was browsing a few sites for website tips and suggestions today and came across an interesting post. Most the time when I see lists of SEO tips, they include a lot of hear-say or guesses as far as SEO goes. Some may be valid, such as tips that have been tested on sites they have worked with, while others may be just suggestions that in theory would work. Whatever the case may be, these lists of SEO tips that I typically run into often have some things I have never heard of or some things that seem strange. This particular list went through and numbered 30 different SEO tips for your website, and all of the tips were ones that would be listed in SEO 101. I was surprised at the number of responses to this post. There were many people who were really glad for this post. I thought to myself that these are things that people who own websites should absolutely be doing and that they probably are doing. However, I quickly realized that there are many people who may know some of these, but not think about others, and there may be some people who forget about some of these basics and need a reminder. Whatever the case may be, here is a list of all-purpose SEO tips for your website. Note: these tips are in no particular order.
Saturday, July 9, 2011
Heeding My Own Advice
It has been a few days since my last post; clearly I am not heeding my own advice. I do believe that in order to keep your customers (or clients) coming back to your website is by making your website more of a community where they want to check back in to see what is going on. So with that said, I will let you know what I am looking at doing in the next few months.
First, I am looking at redesigning my website. I think that it needs to have less "fluff" and more information links so that finding information is quick and easy.
Second, I am going to begin offering pre-built templates for ShopSite. There are other companies who do this, two being MerchantCorner.com with their SproutCommerce templates, and SD360.com and their page of pre-built ShopSite templates. I have had pre-built templates on my website in the past, but since I was not as good at design as these other companies, I struggled selling against them. This time around I am better at design and coding, and I am doing things differently. I will be specializing my templates to utilize nearly all the ShopSite features. I will be optimizing the templates so that they are SEO friendly and setup for the merchant to add a lot of Search Engine Optimized content/layout (such as repeating page descriptions at the bottom of the page in small print, as well as providing a list of product links in the footer specific to each page). My new layouts will focus on being clean and well organized, putting all the elements that I discuss on this blog into use such as large brightly colored call-to-action buttons, sleek information layout, and easy navigation.
Third, I am going to continue to build my client and customer base on this blog, Facebook and Twitter by providing regular posts of information and tips for the world of ecommerce as well as provide more information on my website for Do-It-Yourself web design such as favicons, SEO basics, and more.
Tuesday, July 5, 2011
Clear, Easy and Quick
There are many places that you might be losing customers in your store. Make sure that your checkout process isn't one of those things that is "scaring" customers off. This video tutorial shows you how to make some edits to the checkout pages in your ShopSite store as well as provides some information on what makes for a good checkout process and what might be not-so-good. Also, make sure that you have Google Analytics enabled in your store so that you can track the effect these changes make in your store. Click here to see how to setup a Cart Abandonment Funnel with Google Analytics in your ShopSite store.
Friday, July 1, 2011
Hype, It's Infectious
Have you ever noticed that things that other people are excited about, you get excited about? When a small crowd of people starts causing noise and gathering tight, all the people within range are drawn to the small crowd. Everyone wants to see what the fuss is about. Everyone wants to be part of the excitement. Advertising your business should not be any different. If you are excited about your business, show your excitement Make your customers excited about your business. When your customers are excited about your business they will want to tell their friends. I have a few personal experiences in this area.
It was my sister-in-laws birthday, so I had ordered her some new flower pot boxes. They are these wooden boxes that look great on the patio with her plants in them. When the boxes came, they came with a little note about how no thumbs were injured in the building of those boxes. I smiled when I saw that and I shared that little note with my family and friends. That tiny little note was probably an after-thought for this company to add in. It was probably just part of their routine by now, but it was funny and unique, and made it so that I remembered that company and wanted to talk about that company with my family.
Another experience had to deal with a merchant I was helping build a website for. She sells homeopathic oils and solutions. She got into this business 15 or so years earlier when she was at a point where she had no options. She did her own research, came across these oils, and they worked wonders for her. She became so passionate about the results that she saw that she was able to build a thriving business off of it. She still helps many people and gets people interested in her business just based off of how excited she is about the product.
I am starting to take these examples and implement them in my own business. I build websites for merchants. I'm working on my skills with design and at creating graphics, and I've already grown my skills with clean coding, quick load speeds, and enhancing the sales and traffic on a website. I've become good at this because I am interested in it. I research new methods, new techniques, what works for competitors, etc. I am just starting to show my excitement about this booming online industry by passing on some of my knowledge about the subject to anyone who wants to listen and to anyone who is on the same path I am on. I want others to be excited about testing new processes on their website and trying new ideas to improve their website.
Wednesday, June 29, 2011
Other Browser Compatibility Issues
In my last post I talked about how small things such as the type of image you are using could appear different in some browsers than in others. Here I am going to discuss some areas that you need to play close attention to between browsers when you are coding. The two most common things that I run into are padding and borders around elements and bad code auto-correcting. I'm going to focus on Internet Explorer and FireFox when discussing these issues. Other popular browsers such as Google Chrome, Safari and Opera act closer to FireFox than Internet Explorer.
Padding and Borders
When you add a margin to an element such as a table, a div, or a paragraph, the margin is outside of the element. Padding that is added is inside the element and borders are on the edge of the element between the padding and the margin. The image to the right shows where each of these fall in relation to one another. The white area is the element area. The light blue area is the padding. The black line is the border. The light green area is the margin. So if you specify a width of 200px, a margin of 5 pixels, padding of 10 pixels and a 1 pixel border, in FireFox, the entire area that the element will be covering is 210 pixels; 200 pixels with the border and padding inside that 200 pixels, and 5 pixels on each side outside of the 200 pixels for the margin. In Internet Explorer, the entire area that this element is covering is 232px; in Internet Explorer the element goes to the width that you set, then all padding, borders and margins push that width out.
To get around the issue with padding and borders in FireFox and Internet Explorer, I put DIVs with the width around everything, then on other elements, I don't specify widths, only use the padding and margin. If you have a main DIV with the width, and have the rest of the DIVs use 100%, this will get around this issue.
Auto-Correcting Bad Code
There are always times when the code isn't exactly perfect on the page. Often this happens when you make changes and don't quite remove all of the code that you are replacing. When you view your pages, you can spot issues where the code is not correct if your page does not load entirely in Internet Explorer. When Internet Explorer comes across code that is incorrect, in most cases the browser will simply stop the code there. So your page will look as if it is only partially loaded. In these cases you can view the page source and scroll down to the last thing that you can see in Internet Explorer. Here is where you will find the code that needs correcting. In other browsers such as FireFox, when there is code that is not opened or closed correctly, the browser will simply add or ignore the necessary tags in order to display the page correctly.
Padding and Borders
When you add a margin to an element such as a table, a div, or a paragraph, the margin is outside of the element. Padding that is added is inside the element and borders are on the edge of the element between the padding and the margin. The image to the right shows where each of these fall in relation to one another. The white area is the element area. The light blue area is the padding. The black line is the border. The light green area is the margin. So if you specify a width of 200px, a margin of 5 pixels, padding of 10 pixels and a 1 pixel border, in FireFox, the entire area that the element will be covering is 210 pixels; 200 pixels with the border and padding inside that 200 pixels, and 5 pixels on each side outside of the 200 pixels for the margin. In Internet Explorer, the entire area that this element is covering is 232px; in Internet Explorer the element goes to the width that you set, then all padding, borders and margins push that width out.
To get around the issue with padding and borders in FireFox and Internet Explorer, I put DIVs with the width around everything, then on other elements, I don't specify widths, only use the padding and margin. If you have a main DIV with the width, and have the rest of the DIVs use 100%, this will get around this issue.
Auto-Correcting Bad Code
There are always times when the code isn't exactly perfect on the page. Often this happens when you make changes and don't quite remove all of the code that you are replacing. When you view your pages, you can spot issues where the code is not correct if your page does not load entirely in Internet Explorer. When Internet Explorer comes across code that is incorrect, in most cases the browser will simply stop the code there. So your page will look as if it is only partially loaded. In these cases you can view the page source and scroll down to the last thing that you can see in Internet Explorer. Here is where you will find the code that needs correcting. In other browsers such as FireFox, when there is code that is not opened or closed correctly, the browser will simply add or ignore the necessary tags in order to display the page correctly.
Tuesday, June 28, 2011
Trouble with Transparent PNG Images
As a website owner, you should check your own website in many browsers online, especially browsers that Google Analytics indicates that your customers are using to make sure that your website looks and works the same for all customers. I have had merchants come to me many times when they notice in their Google Analytics that orders on some browsers are great and orders on other browsers are never completed and they want to know why. I will look at their website and find out that their website looks completely different in another browser, or their website was not setup correctly so it does not work in a browser that interprets the code differently.
One thing that has become increasingly popular and more common are PNG images with transparencies. There are a lot of benefits to using these images including that some elements can load faster because instead of having a background color built into your image, the background color will be part of your page and can load immediately. Another benefit is if you have an image on top of something else, such as a gradient image around your page content or a seal image over the corner of your page, those images can be transparent. If they are PNG images they will automatically match edges and colors with what's behind them. The issue with using PNGs is that older browsers, such as Internet Explorer 6, do not support PNGs. Below is a screenshot in IE 8 on the left and IE 6 on the right.
You see that in IE 8 (left) the image matches the background, because the image is transparent in some parts. In IE 6 (right) all areas of the image where there should be transparency, instead it is gray. The transparency is not supported in IE 6 and earlier.
Internet Explorer is the default browser on Windows computers, so there is a huge percentage of customers using Internet Explorer to browse the internet. I suggest to merchants that not only do they check current versions of browsers, but also past versions of browsers in case their customers have not upgraded their browsers to the latest versions. If you are using Google Analytics you can also look at your reports to find out what versions of various browsers customers are using. Log into your Google Analytics account and go to Visitors > Browser Capabilities > Browsers, then click on each browser to see it broken up into versions. Below is a screenshot of a report in Google Analytics for one of the websites I do regular website work for. You can see that although version 9 of Internet Explorer is the newest version, over 60% of Internet Explorer customers are using version 8. There are some customers using version 7 of Internet Explorer, and even some using version 6. You may think that since it is less than 3% of the customers coming to the website are using version 6, that you don't need to code specifically for IE 6, but if you look at the number of hits, that small percentage accounts for over 100 visitors. That's over 100 people that may be coming to your website and may not want to order because of how the images in the store look.
I hope that this post encourages merchants to take a look at their own store to see if their store is cross browser compatible. Even if you hire third party companies to do your web design, you'll want to test for yourself to see that all of your customers are able to see your site the way that you have it setup.
Browsers I Check:
IE 9, 8, 7, 6, 5.5 (Windows, you can also check between XP, Windows 7 and Vista, because I have seen some differences in the past)
FireFox (Mac and Windows)
Safari (Mac and Windows)
Chrome (Mac and Windows)
Opera (Mac and Windows)
Mobile Phone Browsers
Resources For Checking:
Checking Versions Of IE: http://ipinfo.info/netrenderer/
FireFox Download: http://www.mozilla.com/en-US/firefox/fx/
Safari Download: http://www.apple.com/safari/download/
Google Chrome Download: http://www.google.com/chrome/
Opera Download: http://www.opera.com/download/
View In A Mobile Browser: http://www.marketcircle.com/iphoney/
One thing that has become increasingly popular and more common are PNG images with transparencies. There are a lot of benefits to using these images including that some elements can load faster because instead of having a background color built into your image, the background color will be part of your page and can load immediately. Another benefit is if you have an image on top of something else, such as a gradient image around your page content or a seal image over the corner of your page, those images can be transparent. If they are PNG images they will automatically match edges and colors with what's behind them. The issue with using PNGs is that older browsers, such as Internet Explorer 6, do not support PNGs. Below is a screenshot in IE 8 on the left and IE 6 on the right.
You see that in IE 8 (left) the image matches the background, because the image is transparent in some parts. In IE 6 (right) all areas of the image where there should be transparency, instead it is gray. The transparency is not supported in IE 6 and earlier.
Internet Explorer is the default browser on Windows computers, so there is a huge percentage of customers using Internet Explorer to browse the internet. I suggest to merchants that not only do they check current versions of browsers, but also past versions of browsers in case their customers have not upgraded their browsers to the latest versions. If you are using Google Analytics you can also look at your reports to find out what versions of various browsers customers are using. Log into your Google Analytics account and go to Visitors > Browser Capabilities > Browsers, then click on each browser to see it broken up into versions. Below is a screenshot of a report in Google Analytics for one of the websites I do regular website work for. You can see that although version 9 of Internet Explorer is the newest version, over 60% of Internet Explorer customers are using version 8. There are some customers using version 7 of Internet Explorer, and even some using version 6. You may think that since it is less than 3% of the customers coming to the website are using version 6, that you don't need to code specifically for IE 6, but if you look at the number of hits, that small percentage accounts for over 100 visitors. That's over 100 people that may be coming to your website and may not want to order because of how the images in the store look.
I hope that this post encourages merchants to take a look at their own store to see if their store is cross browser compatible. Even if you hire third party companies to do your web design, you'll want to test for yourself to see that all of your customers are able to see your site the way that you have it setup.
Browsers I Check:
IE 9, 8, 7, 6, 5.5 (Windows, you can also check between XP, Windows 7 and Vista, because I have seen some differences in the past)
FireFox (Mac and Windows)
Safari (Mac and Windows)
Chrome (Mac and Windows)
Opera (Mac and Windows)
Mobile Phone Browsers
Resources For Checking:
Checking Versions Of IE: http://ipinfo.info/netrenderer/
FireFox Download: http://www.mozilla.com/en-US/firefox/fx/
Safari Download: http://www.apple.com/safari/download/
Google Chrome Download: http://www.google.com/chrome/
Opera Download: http://www.opera.com/download/
View In A Mobile Browser: http://www.marketcircle.com/iphoney/
Subscribe to:
Posts (Atom)


