SEO essentials for web developers: On-page elementsBy Joel Klettke
This is the third part in a multi-part series on SEO basics with a web developer slant.
In the first installment, I made a case for paying attention to SEO as a developer: the chance to make more while suffering fewer headaches. In the second, we covered off a fairly extensive list of structural and architectural considerations devs need to be aware of as they build out a site. This time, we’re going to tackle on-page factors.
It’s about more than “content is king”
If you’ve spent even a few hours around SEOs, you’ve probably heard their well-worn mantra: “Content is King.”
That’s a nice platitude, but it’s not the whole story.
Despite the fact that you as a developer may never write a single line of content for a website (and thank goodness for that — you have enough to worry about as is!), there’s plenty of ways developers can help set their clients up for success, beyond the keywords on a page.
On sufficient copy and keyword density
A couple quick but very important notes to kick us off:
- Yes, annoying as it is, pages DO need to have some HTML text on them — especially the home page. This one is a major thorn in many developer’s sides, as home pages are often designed to be text-light. What’s “sufficient” is pretty relative, but whenever you can, make allowances to accommodate 100–200 words of copy on the home page.
- There is absolutely, positively no such thing as an ideal keyword density. This phrase is a relic from the past that everyone would do well to forget. Google uses other systems — like latent semantic indexing (A fancy phrase that means Google can understand contexts and words in relation to each other) have eliminated any notion of ideal keyword densities. Keywords should show up in the content (and early, if possible), but there’s no need to repeat the same phrase over and over.
Title tags (<title>): If there’s one on-page factor that you can’t overlook, it’s the title tag. Some best practices here:
- Keywords should absolutely be included within the title tag, preferably close to the beginning, but…
- Title tags should also be compelling for searchers to click on. Balance marketing and SEO as best you can.
- Every page should have its own, unique title tag. Duplicate title tags reflect a seriously wasted opportunity.
- There’s a long-standing myth that title tags cut off in search engines after 70 characters – but this isn’t true. The limitation is actually pixel width, not characters (you can measure pixel width with a handy tool here). In general, keep title tags short, punchy and focused instead of long, sprawling keyword dumps.
Meta-keywords: No. Never. Don’t use these. They haven’t held any worth in search engines since at least 2009 — likely earlier. The only purpose they serve now is to let your competition know exactly what you’re targeting.
Meta-descriptions: While most SEOs will argue that meta-descriptions are not used for ranking purposes, they’re still an important thing to optimize. Meta-descriptions are the snippet of text Google will display in search results (unless they choose to manually override them for relevancy purposes).
- Every page needs its own, unique meta-description.
- Meta-descriptions should be written with more of a sales-pitch approach than an SEO-centric mindset. The goal is to earn a click by proving you’re the most relevant result. Include keywords as appropriate, but focus on piquing the user’s interest.
- Keep ‘em short. Like title tags, you’ve got limited space to operate here, so keep it focused to just one or two sentences.
Header tags: Even in 2013, header tags (H1, H2, H3 and so on) still carry some weight when it comes to on-page SEO. However, unlike the grotesque keyword dumping grounds so many are using them for, headers should be used to naturally break up text — and more importantly, describe the content that follows. Google uses header tags to help establish thematic context for the rest of the page.
Best practices here are pretty straightforward:
- There should always be one – and only one – H1 tag per page.
- H1’s should be written to be compelling and click-worthy, but adding keywords when possible is always a good idea.
- Be sure to actually use header tags and not just style headers with different font sizes or formatting tags. While both achieve the same result visually, they’re not the same to a crawler.
- Don’t wrap the company logo in the H1 tag. It’s not an SEO-friendly practice.
Image alt tags and filenames: As any developer worth their salt knows, image alt tags were developed to help the visually impaired browse the web. This is not a place to stuff keywords — descriptions should describe the image for those who can’t see. If you want to “wow” your client, though, DO pay attention to image filenames and make sure they describe the image, too, as these are a fairly significant ranking factor for Google’s image search.
Bolding/”<strong>”: In the ugly, early days of SEO, misguided content creators took to bolding every instance of their targeted keywords. The benefit of bolding keywords is negligible and more often than not this practice is distracting for users. Simply put, don’t bother.
Schema.org and microformats
If you want to get ahead of the game, this is where to put your attention. As Google looks to the future of their algorithm, they’re trying to create entity-based search: representations of real people, places and things we understand in the real world within search results. They accomplish this through microformats and rich snippet markup — specifically, Schema.org.
Schema.org is markup language agreed upon by all three major engines (Google, Yahoo, Bing) and represents a hugely important development in the way developers should be marking up data within websites.
You can use schema to mark up phone numbers, addresses (important for localized searches), products, recipes, television episodes, payment methods, medical entities … the list is incredibly extensive. You will want to view the full list of usable schemas whenever building a site to see what pertains to the client, and include them in your build.
As this presentation by Dr. Pete Meyers clearly shows, Google is using these Schemas as they scrape the web to share information with customers in new ways and in new search result formats. Those who take advantage of Schema benefit from increased visibility in a wider variety of search results.
Google’s Authorship snippet is something relatively easy for developers to set up for clients that can have a big impact on click-through rates. See the example below:
Even asking your client about Authorship will demonstrate you’re ahead of the curve and have their best interests in mind as you develop the site.
Authorship is tied back to Google+ profiles, and is something the engine is likely to use long-term in order to attribute trust and value to the content produced by continuously well-performing authors.
See the guide shared earlier for some fast setup options.
Internal and outbound linking
Links have long been a cornerstone of SEO — and the links on your own site are every bit as important as those coming from other sites.
- Limit the number of internal links on a page. There’s a great resource on this here, but in general, the more links present, the more the authority of a page is dispersed among them. There’s no “ideal number”, but limit your linking to only those pages truly necessary.
- Use footer links carefully. Clients may ask you to add anchor-text rich links to internal pages in the footer. While this won’t necessarily harm the client, it’s not the best idea. Site-wide links are something Google scrutinizes carefully to find those who are trying to game the system. Limit links to those that are useful and really should be on every page. It’s probably unnecessary to mirror the entire navigation here.
- Use descriptive anchor text. There’s no need to keyword stuff, but a descriptive link that uses targeted keyword phrases is always more valuable than a generic anchor text like “click here”. For example: “Check out our brand new men’s jackets” is better than “See our men’s jacket’s here.”
- Only the first link counts. If you’re linking to the same page multiple times, the only link Google will count and attribute anchor text to is the first link present in the code. You may see people linking a page of their site over and over again using different anchor text as a ranking attempt — a practice that’s utterly useless, given the way Google handles links.
- Be careful who you link to. It should go without saying, but participating in link exchanges can be a terrible idea for webmasters. Landing your website in a “bad neighborhood” or anything that appears like a link network is a surefire way to torch any rankings and visibility they might have had.
A little involvement goes a long way
As I opened up with, there’s no need for web devs to take a huge interest in writing content or learning how to do keyword research — the client will likely have an SEO consultant or team taking care of those aspects of on-page. Still, a little planning on the side of the web developer can make things simple, whether that’s choosing a CMS that can accommodate custom title and meta fields, implementing authorship and schema or just ensuring formatting is done cleanly.
In the next and final installment, we’ll take a quick look at off-page SEO factors and bring this series to a close!
About the Author
Joel Klettke lead an agency-side SEO team for over 4 years before going rogue and starting Business Casual Copywriting, where he helps brands create content that gets into people’s heads. You can follow him on Twitter at @JoelKlettke.
Author's Website: http://businesscasualcopywriting.com
- SEO essentials for web developers: Website structure
- Microsoft Desktop Player for IT Professionals and Developers
- Single Page Apps – Part 5 – HTML 5 and ASP.NET Web Optimization
- Google I/O Is Here, What Does It Mean for Developers?
- Why web developers should pay attention to SEO
- FREE ASP.NET Single Page Application Training
- What Is The Best Browser for Developers?
- Video: Build Windows 8 Like UI Transitions and Animations in Single Page Apps
- Single Page Apps with Knockout, jQuery, and ASP.NET Web API – Part 1 – The Story Begins
- New Course: Single Page Apps with HTML5, ASP.NET Web API, Knockout and jQuery