HTMLcut blog

About PSD to HTML Conversion and More

Beyond PSD to HTML Conversion – Simple SEO for Web Designers

PSD to HTML SEODesign and PSD to HTML conversion are important but only the first phase in the website life-cycle. So no wonder that our customers and friends designers ask us to help or consult them not only on PSD to HTML slicing but also on SEO of their blogs or business websites. Our observations testify that about 90% of the revealed problems are the same.

Below we have collected some typical SEO bottlenecks of the websites developed by web designers for themselves, as well as explanations how to avoid them in the light of SEO trends 2011.

1. Ignoring the Existence of Search Engines

Quite often beginner web designers are strongly concentrated on technical details such as Photoshop features, CSS3 tricks or specifics of design-to-HTML conversion for IE. More experienced designers start paying attention to marketing and visitor-oriented aspects such as conversion, usability, and accessibility. But seasoned web designers and developers know that a website is full-fledged when it “pleases” all main groups of the website users:

  • Administrators, content managers, site developers;
  • Visitors (humans);    and
  • Search engines (Google, Bing, etc.) and other web aggregators.

Nevertheless, even veteran developers (let alone beginners) sometimes forget about search engines when it comes to their own web resources. Thanks to WordPress (in mix with SEO plug-ins) and some other CMSes there are less such problems. Though even WordPress-based blogs need adjustment. And when a website is created from scratch, SE robots might be completely ignored.

HTML contains a number of tags invented specially for the search engines. The main of them are <title> and <meta name="description" ... /> tags. It is they that provide the search engines with initial (and very valued) information about a web page. These tags are individual characteristics of a specific page, so their meaning should vary from page to page. If <title>‘s across the website are identical (e.g., <title>Smith101</title> where Smith101 is your nick or a startup name) then Google or Bing may suppose that there is no essential difference between the website pages and won’t pay the expected attention to other pages except Home.

The typical objection here is that “Smith101 is our name and we want to promote it.” There is nothing wrong with this but in the tags intended for the search engines it is better to provide information that helps them to solve their main task – to understand what a site or concrete page is about. "Smith101" gives them no clue, unfortunately. But, for example, "Affordable Logo Design Service Smith101, Boston" does. If this information is supported by

  • An extended description in the corresponding meta tag (but still succinct – preferably no more 150-160 symbols including blanks, e.g., <meta name="description" content="Logo design services in Boston, MA: Logos and corporate identity for Boston area companies and individuals, Massachusetts. Call now (617) 123-4567" />);
  • Enough volume of content including an informative keyworded headline, sub-headings, semantically formatted text, etc.,

then the search engines will know that your site is related to logo design (in our example) and should be shown on search engine result pages (SERP) when somebody looks for these services in the Boston area.

In fact, the content in <title> and meta description tags may be visible to human visitors too, but indirectly. The point is that the search engines often use content of these tags as a headline and snippet for the given website on their SERP. So, don’t spam <title> and meta description, write them in a concise and plain but connected and compelling manner. Remember that for many people your site will begin from these lines of text modestly hidden in the <head> section of your site, and the number of visitors may strongly depend on them.

After ‘Panda’ (the notorious update of the Google’s algorithm rolled out earlier this year) one of the main recommendations is to use only a high quality content. Try to make it unique, non-duplicate, closely related to the website topic and – at least on some pages – quite large: about 700-800 words or even more per article or post. Also remember that the search engines can’t “read” images and are not so good at Javascript and Flash interpreting, so give a reasonable amount of textual data, including descriptive page URLs, alt‘s in <img> tags, and image names (/res/img12.jpg is questionable (no info for the SEs), but /images/logo-design-service.jpg could be better).

In general, on-page ranking factors are becoming more important now. This includes both visible (content) and “invisible” (technical) characteristics. So, don’t forget to optimize your website image sizes, CSS and JavaScript files to increase the website load speed. Regardless who has performed PSD to HTML conversion (you or a PSD to HTML company) check the quality and validity of HTML and CSS code (e.g., with the help of the W3C validators). Also verify broken links (for example, via W3C Link Checker). A clean semantic code helps to reduce the probability of its incorrect parsing by the search engines. Also, your website is an important part of your portfolio, moreover, you can completely control it even after the launch, so it is reasonable to make it exemplary.

One more problem of young websites is poor indexation of the website pages. A very easy way to solve it is a sitemap. This inconspicuous page (usually reachable through a link in the footer) is often underestimated or even absent. But for the search engines it can be extremely useful or even “insightful” especially in case the website navigation is complex or confusing.

Summarizing, the main rule here is simple: Don’t forget about search engines when designing your website and they will not forget about you when it comes to the search results and search traffic.

2. Following Famous Designers

Read Part 2 >>>


Keywords: PSD to HTML, seo, webdesign

Comments (8)

  1. Pingback: PSD to HTML Conversion » Simple SEO for Young Websites

  2. Pingback: Beyond PSD to HTML Conversion – Simple SEO for Web Designers | Design News

  3. I have same problem to have seo of my site, , thanks for advice.


  4. It’s continuously cool to arrive along a site like yours that has this kind of topics to scan about. Totally enjoyed and can undoubtedly be returning often.

    Mia Foster

  5. Really interesting blog, keep up the good work!

    synthroid online

  6. Very section! It feels great reading such post in this way, very informative and interesting. I’ve learned. Here’s another source that will worth a look about this also. Thanks for sharing this kind of info!

    Home Security

  7. SEO is one of the most cost effective and effective-in-general forms of marketing and a great way to ensure that the maximum number of people know about your business and can find your services or products.

    Florence AL Web Design

  8. Pingback: No.1 Converting Duplicate Search Tool |

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>