Content & Styling for Optimized Website Design | How to Code For SEO

Part of optimized website design is how your site is coded right from the beginning. If developed incorrectly, it can be very expensive and time-consuming to correct and change your styling and coding to make your new website crawlable and easy to index by Google, Bing and other search engines. Although it is helpful when your developer designs with search-friendly coding, it is not required, so get your SEO involved early in the process to avoid spending even more money on your new site after it goes live just to make it visible. Read on for tips on how to code for SEO.

Keep Important Content Out of JavaScript

Keywords must all be visible to search engines for optimized coding and styling. As a quick and easy test, view the source code for the page in your browser. Anything you can read, Googlebot can read too. Google has admitted that they will fire “some javascript” but I recommend avoiding placing any SEO-valuable content within scripts since you can not guarantee that it will be indexed. If the site code calls to a .js file, no matter where the file is located, Google does not know what is contained within that file.

Style Text With CSS

If you create buttons, highlighted text, logo slogans, or other highly designed text, it is sometimes easier to create the text and image as an image file and insert the image in to the site. Text as part of an image is not visible to Googlebot, so will be ignored. Here are a few common examples:

Home page banner sliders — by placing these prominently on the home page, you are telling search engines that this is an important part of your site. Yet Googlebot can not read the text if it is embedded in a big image file, so Google may not be able to understand what the banner is for. Buttons to take you from one page to another. Buttons with embedded images fail to help Google understand what you are telling the website visitor to click on.

For example, on this button Google reads the “Importance of SEO in Marketing” text: [gn_button link=”/online-marketing/seoknowmarketing/” color=”#DD5A56″ size=”2″ style=”1″ dark=”0″ radius=”auto” target=”self”]Importance of SEO in Marketing[/gn_button] However, this time, Google sees only an image file:

Here is how the two buttons look in my HTML:

See how the second highlighted portion does not have the important optimized phrase (“importance of SEO in marketing”) text? That is because the text is embedded in to the image, making it invisible to search engines. The text is important to make crawlable because the phrase sends a signal to Google that the hyperlinked blog post (in this case, http://www.widesmiler.com/online-marketing/seoknowmarketing/) is a relevant search result for someone searching for the phrase in the button text.

No Flash!

Search engine crawlers can not crawl the contents of flash. Since HTML5 can do nearly everything that Flash can do (and take up less bandwidth), there should rarely, if ever, be a reason to use Flash on a new website build today.

Here is an example of a website that uses Flash. Google does not even know that the text or imagery are there — they are completely invisible. That makes it difficult, if not impossible, for Google to understand what the website is about. It also means that Google has a difficult time gauging the quality of the site.

Even after applying each of the above recommendations, you want to further help Google by building optimized sitemaps — both XML and HTML. These serve as a table of contents or index to your website for both Google (XML) and visitors (HTML). Finally, your navigation structure matters to search engines too! Use descriptive, non-brand keywords and follow a logical and organized hierarchy.

Leave questions and feedback in the comments below or contact me with your site optimization questions today.