After your content, your site design is the second most important element of your blog. After all, even if the content is great, you wouldn’t be able to stand becoming a weekly visitor to a site that looks like this. While I’m not saying that you, dear readers, will be committing that level of eye assault in your blog design, I do want to talk about how the design of your site affects SEO and the ability of your website to rank in search results.
Famed American graphic designer, Paul Rand, once said,
“Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.”
And, it truly is. Design needs to convey your personality, themes, topics, etc, all while also adhering to basic SEO best practices. I won’t be covering how to design your blog aesthetically since most of you probably know not to use capslock for every post, not to have a black background with neon green font, etc.
For this post, I’ll discuss a few less than ideal design practices from an SEO perspective and how to find out if your site is guilty of some of these uses that could be preventing your blog from being found.
Text in Images
Surely you’ve seen a blogger (or 20) use creative graphics to display their contact information, create a short bio on the sidebar, explain recipes, or as links in the top navigation. As nice as these may look, it is a bad practice for search engines.
First, from a user experience perspective, readers sometimes want to copy your contact info so they can email you, or maybe they want to try out that recipe. If your text is in images, users aren’t able to copy and paste the text into e-mails, word documents, etc. The result is a frustrated reader who doesn’t get to ask you a specific question or can’t simply copy a list of ingredients into a printable grocery list.
Search engines don’t typically read text in images, so all that information you’ve worked so hard to create is not even being seen by search engines. If Google isn’t able to read the content, it isn’t able to understand what your page is about, handicapping that page from ranking. So, if you create a wonderfully illustrated recipe on how to make the world’s best butternut squash soup all housed in an image, your award-winning recipe will be stuck on your blog without ranking on Google. No one will unlock the secret of your soup–the horror!
Another issue lies in the practice of using images as links. While images could be a nice aesthetic detail, you lose out on helpful anchor text that can help Google understand more about what the page is for. For example, if you had a blog about southern-style cooking and had categories for each southern state, it would not be wise to have the link to Louisiana be a picture of the state itself. While Google would still be able to understand the content on the page itself, the anchor text of the link would emphasize that much more that the page is about Louisiana cooking. You wouldn’t want to miss out on potentially more blog traffic because of something as silly as that, would you? Should this paragraph be taken out? I don’t know if the readers would know about anchor text and how it plays into ranking]
Using Flash Sites
While it may seem like a good idea to create your blog with Flash in order to be able to include fun animations and special graphics, search engines aren’t able to easily navigate Flash websites nor to see the links on those pages.
If you’re thinking “that sounds like a pretty big deal,” you’d be right! If Google isn’t able to “see” the links and content on your blog, it won’t be able to know what’s on your page nor see the pages you’re linking to, potentially keeping those pages out of search results. Below is an illustration of the effect:
Beyond SEO, there’s another massive disadvantage to using Flash: Apple device users aren’t able to view your site! It’d be silly to essentially block your content from a large percentage of users just because you want to add some flashy graphics.
Using Flash, or Javascript for Navigation
While I mentioned the disadvantages of using Flash above, I wanted to call out one specific use that can cause major problems: navigation. If your blog uses Javascript or Flash in your main navigation, search engines may have trouble accessing those links. This could lead to search engines not finding those page, and thus, not indexing them in their database–aka your pages won’t show up in search results.
iFrames
Another element that can affect whether links are seen by search engines or not are iFrames. iFrames are used to embed external objects onto webpages, and the external objects could include images, videos, or even entire webpages themselves. That is hard to imagine, so here’s an example of a page in an iFrame hosted on a different page. The National Weather Service page is embedded as an iframe into the “So, What is an iFrame?” page.
So maybe you’re using an iFrame now to display an asset you have on another page directly onto a different page. Why is that bad? This is what Google has to say,
“Google supports frames and iframes to the extent that it can. Frames can cause problems for search engines because they don’t correspond to the conceptual model of the web. In this model, one page displays only one URL…Google tries to associate framed content with the page containing the frames, but we don’t guarantee that we will.”
If you’re producing great content, you should be doing all that you can in order to get it to rank in search, so don’t sully your work by using iFrames that Google can’t guarantee it will understand.
Is your blog guilty of these offenses?
All this is well and good, but I bet the big question right about now is: is my site affected by any of the above? There are tons of tools to help you find out, but below are two of the easiest ways:
1. Check Google’s cache: Viewing the “cache” of a site means looking at the most recent version of the page that Google has placed in its index. If the cache of your page displays the page with all the images, links, and text that you want seen, great! Here’s an example of Amplifound’s cached homepage. As you can see, all of our links and homepage content are showing.
Contrast this page with the monkey website example above. All the content on the page on the left hand side is gone, except for one lone link. If the cache version of your page shows no links or content, then you may have a problem with one of the items above.
2. Use the Chrome Web Developer Extension: This extension is widely used within our office and beyond. There are a ton of different options once you install it, but I’ll call out the two that most apply here.
Images: If you’re not sure if your text is contained in an image or not, navigate to the Images tab and click “Disable Images”:
Reload the page, and you will now see how it looks with no images disabled. If you notice text or content missing, then it was being housed in an image. If the information is important, you’ll want to turn the content into text.
Javascript: Another element sometimes used in navigation is Javascript, so with this extension, you’re able to see what happens when you turn Javascript off. You can find it in the “Disable” tab here:
If you reload the page and your top navigation links don’t load, then your navigation is using Javascript.
Those are some of the basics of SEO as they apply to web design. If you have any questions specific to the elements I mentioned above or ones that I haven’t touched upon, please let me know in the comments!
