If you thought that everyday html could be tricky, you haven’t given responsive web design its fair due. Still in relative infancy, designing for mobile devices is a love-hate thing – love the convenience (features and coding); hate the limitations. The challenge is now about coding mobile-specific websites (or adapting existing sites) and ensuring that your website renders well on all media. But hey, it’s all about evolution, right?..

So why should you care about responsive web design?

1. Because you want your site to be a convenient. And remembered. And recommended.
2. Because it frees you from having to create (and maintain) multiple versions of your site.

This post is just a very brief insight into the need for recognizing the practicality of designing with media queries (the “thing” that makes it possible to present your website to a specific range of output devices without changing the content itself” (http://www.w3.org/TR/css3-mediaqueries/).

The main point that I’d like to make is best borrowed from the words of a post by StudioPress that speaks of the need to re-think the way we organize our content for mobile websites. It’s not enough to “move your sidebars under everything else. Creating excellent responsive design means you have to think through the context in which the user will be interacting with your content and adjust it to meet their needs.” Important words.

To emphasize the need for accommodating different media types without compromising space issues and content, take a look at these clever examples of re-sizing content as it pertains to simple menu adaptations:

• Sony
• CSS-Tricks
• Smashing Magazine

Apart from the creative applications of presenting content on mobile devices, there are practical considerations to think about too:

• Creating two sites might be better for “talking to” specific hardware but a single site preserves the canonical URL – avoiding complicated redirects
• Pages should be coded to render legibly at any screen resolution (meaning, it’s not enough to rely on plugins if you’re running a WordPress site)
• Always avoid the need for a horizontal scroll bar (especially on smaller screens)
• The ultimate goal of responsive web design: one website; multiple versions

And let’s not forget how all of these factors contribute to your SEO efforts. Designing for mobile media doesn’t end with creative layouts…

At the end of the day, responsive web design won’t be a priority for everyone. Heck, it may be all someone can do to get their website online to begin with, let alone worry about how they present in different environments.

But it’s definitely not going away. In fact, responsive web design is meeting the growing need of mobile users at an alarming rate. Love it or hate it, the chances that your website will be assimilated one day is… inevitable.

Media Queries Meet Responsive Web Design

Daily Deal from MightyDeals

I’m not talking about the traditional on/off-page SEO components (meta data, keywords, linking strategies, etc).  No, I want to address the technical guidelines.

Creating content is one thing.  Delivering content is quite another matter altogether.

And in order to ensure that our content gets found, we need to understand HOW to cater to the environment that is looking for it.

Here’s what we KNOW about search engines:

First of all, ‘crawling’ and ‘indexing’ bots serve two different purposes but for the sake of this post, I’m going to use them synonymously.  The same goes for the vernacular, ‘spiders’ and ‘bots.’

Second, search engine spiders crawl text only.  They don’t do images, and in many cases, “fancy features” or “rich media.”  HTML reads like text to spiders so there’s no problem getting your content crawled in this syntax.

The problem with HTML however, is that it is considered “static” (aka, unchanging).  It doesn’t accommodate database-driven content, or any kind of user interactivity.  And in today’s Internet environment, there is an expectation for websites to be more than a mere information portal so web designers are including more and more JavaScript et al in their markup.

The problem with JavaScript (Ajax, ASP, php, rich media, etc) in markup is that spiders have difficult reading the content.  It no longer reads as simple text.  So if content doesn’t get read, it doesn’t get crawled.  If it doesn’t get crawled, it doesn’t get indexed.  And if it doesn’t get indexed, your web page(s) will never show up in the SERPs.

The overall consideration?  How to make ensure that our content is found by crawling bots without losing the integrity of what we want to include on our website.

In the world of web design, it’s kind of a chicken-and-the-egg kind of thing to argue which is more important – the design (formatting and technical requirements) or the content (keywords and application).  Personally, I maintain that the two go hand-in-hand and the effort that goes into making them searchable shares equal weight.

Here’s what we KNOW about GOOGLE:

• Google CAN crawl Flash
  “We’ll crawl and index [Flash] content in the same way that we crawl and index other content on your site—you don’t need to take any special action. Additionally, Googlebot can also discover URLs in SWF files (for example, links to other pages on your site) and follow those links…”
  (http://support.google.com/webmasters/bin/answer.py?hl=en&answer=72746, July 2011)

• Google CAN crawl dynamic URLs and interpret the different parameters
  (http://googlewebmastercentral.blogspot.ca/2008/09/dynamic-urls-vs-static-urls.html, Sep 2008)

• Google CAN crawl AJAX content (but web masters have to write the code to accommodate the bots)
  (http://code.google.com/web/ajaxcrawling/, July 2011)

• Google CAN crawl many different types of pages and files
  (http://support.google.com/webmasters/bin/answer.py?answer=35287, Nov 2011)

• Google CAN crawl Rich Media
  “Googlebot can read some rich media files and extract the text and links in them, but… it can miss important keywords…text, content, or links.”
  (http://support.google.com/webmasters/bin/answer.py?hl=en&answer=72746, July 2011)

Matt Cutts sums up Google’s efforts at crawling JavaScript and CSS:

Also, according to Matt Cutts, there is a team of people who are working on being able to crawl and index Ajax as well as other types of rich content.

In general, we try to do well but if you’re using stuff that’s really complex or idiomatic, then we might not understand it.  If you can stick to relatively standard js libraries that is relatively understood, that’s going to be a little bit easier and probably faster for us to get to than custom-coded stuff that does really weird and esoteric things.”

 

Here’s what we know about BING:

• Bing crawls AJAX too
  (http://www.bing.com/community/site_blogs/b/webmaster/archive/2011/06/08/updates-to-bing-webmaster-tools-data-and-content.aspx, June 2011)

I wish I was able to find more information on the technical requirements of other search engine’s crawling behaviour but unfortunately, this is the only official documentation I could find.

But, being the pace-setter in its ability to pioneer the technical requirements of spiderbot crawling behaviours, Google presents the de facto guidelines for web designers so I’m content to focus on these.

Knowing what we know, here’s a checklist to focus on ways to ensure that your website gets crawled.

• Declare the proper doctype (can’t validate your site without it) http://www.w3.org/QA/2002/04/valid-dtd-list.html/

• Declare a character-set type (don’t include different characters)
  http://www.w3.org/TR/html4/charset.html

• Decide which URL format you want your site to be indexed as
  “http://” (Internet protocol) or “www” (Internet convention).  Neither is wrong but setting a preferred domain impacts both crawling and indexing so be sure to identify your preference.
  http://support.google.com/webmasters/bin/answer.py?hl=en&answer=44231

• Validate the HTML (very helpful for crawlers)
  http://validator.w3.org/

• Validate the CSS
  http://jigsaw.w3.org/css-validator/

• Don’t use deprecated tags
  See this list: http://webdesign.about.com/od/htmltags/a/bltags_deprctag.htm

• Test your site to make sure that it appears correctly in different browsers
  http://browsershots.org/

• Use a text browser to simulate how crawlers “see” your site
  Using a text browser like Lynx to examine your site results in a good indication of how search engine spiders see your site.  If “fancy features” such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders will have trouble seeing your site too (Google Technical Guidelines, Feb 2012).  However, if you can turn off JavaScript/CSS/Flash and still reach all your pages from clicking the links, your site should be crawlable.

• NEVER use nested tables for site layouts.  Apart from the fact that tables are a personal peeve, you’re begging for trouble from deprecated markup if you don’t use CSS.

• Don’t use frames to lay out your site (spiders can’t crawl them)

This is by no means an exhaustive list of coding requirements but is a very good place to start.  If you’re responsible for your website’s SEO, I can’t emphasize enough the importance of researching crawling behaviour to ensure successful SEO results!

I invite you to comment on what you know about the latest SE crawling developments.

What are the essential elements in your markup that demand your attention?

Recommended Reading

Does Google index dynamic pages?
Does Google index sites that use Macromedia Flash?
Does Google index sites with frames?
How Google crawls my site
Explaining what the user sees and what the crawler sees
How to make your AJAX application crawlable

Articles that explain the make-up of a doctype
http://htmlhelp.com/tools/validator/doctype.html
http://www.w3.org/TR/html401/struct/global.html

SEO for HTML

Just came across a freebie resource that has escaped my attention until now. I’ve taken a quick run through and it’s definitely a must-see — great offerings, very high quality, true to the name, and the best part… he’s Canadian :)

You can also find one of their offers for a silver UI kit on Might Deals.

Remember to show your appreciation for freebie sites by Liking them and Tweeting out their offerings/site. It’s just a small way to say, “Thanks!”

Best Photoshop Freebies

What started as a complimentary post to securing WordPress installations, has introduced me to a whole new world of nefarious activity that has no place in web design.

I “discovered” the problem while I was viewing the source code of umpteen websites for a company research project – namely, how meta data was used by web design agencies (very telling results for another post).  It wasn’t my interest but for some reason, I was curious to know if the blue links were actually “live.”  Sure enough, they are!

Not only do we get unfettered access to the source code structure, files, media, etc, but these live links reveal the original design code, allowing anyone to copy-&-paste the code of an amazingly creative layout that some ill-fated designer slaved over, and use without credit.  Hardly seems fair but is an unsettling Internet fact.

Of course, there are other ways to obtain the original source code but that’s hardly the purpose of this post.  The only point I’m making is how easy it is to rip off website code.  And that is especially disturbing for web designers (and potentially, our clients).

Writing about HTML obfuscation is a necessary evil if for no other reason than to highlight the need for coders to make it “difficult” (because it will always be possible) to leech, scrape or rip our sites, or the info in the source code (think images, live links to downloadable content, applets, etc).

However, the collective opinion is that it serves little purpose to bother “hiding” source code since it’s painfully obvious to seasoned hackers how to decrypt encrypted code anyway.  The only thing that doesn’t change is the amount of work it creates for the code author, with little or no reward.

Regardless, I share Microsoft’s Eric Lippert’s view that obfuscation is intended to do two things:

1. Prevent theft
2. Provide legal recourse in the event of theft

Since I’m not one to passively hand over my work and be happy about it, I don’t think I’ll mind taking a few extra minutes to obfuscate the sensitive bits of my code. And if I prevent only one theft, I will consider my efforts a success.

Without belaboring the technicalities of what to look for in stealing someone else’s code, or how to decrypt encrypted code, these are the key gleanings after a few days’ research (feel free to elaborate or correct in the comments):

How do obfuscated pages affect indexing efforts?

Indexing bots are built to read text and therefore follow every word on your site. Remember that code is simply text.  So, if your page is an unintelligible mix of encrypted code, they can’t understand it.

In other words, if you can read it, so can spiders.  And if you can’t make sense of it, neither can they.

What exactly are the reasons to encrypt code?

• Prevent website rippers from duplicating entire websites (complete with sub-directories, media, and external files)
• Protect email addresses from being harvested
• Hide some content from search engines (while wanting the remaining content to be indexed, thus not wanting to deny the complete page via robots.txt)
• Avoid spam bots
• Protect HTML, scripts, and CSS design markup

Obfuscation Pros

• Encrypted files will display a site accurately in any js-enabled browser
• You can encrypt complete or partial pages
• Not everyone will know how to reverse obfuscate your code

Obfuscation Cons

• It’s not possible to disable the View Source command in most browser menus
• Encryption alone does not prevent hacking (theft)
• You can “hide” the original html code but you can’t hide the protected source code and it IS possible to UN-encrypt encrypted code
• in most cases, Firebug will automatically convert it to readable HTML, making it a lost cause
• Some browsers let you “save as text” and you get the entire text content of the page
• If the tool uses Javascript to obfuscate the HTML, simply disabling Javascript will circumvent the obfuscation
• There are plenty of tools to ‘decrypt’ the obfuscation
• Typing in ‘javascript:alert(document.body.innerHTML);’ in the address bar of your browser will reveal the original code.  Haven’t taken the time to try this but include it anyway to see who comments on it.

Conclusion

I’ve read about a cloud-based SaaS application for database encryption – obviously a hard-core option but sounds like the most viable way to secure every aspect of your site (design, content, code, and media).

As for everyday web designers guided by honest ethics and morals, the dilemma seems to be a toss up between doing nothing, or using basic (weak) encryption to prevent only the budding hacker wannabes from stealing code …and learning to live with the cold fact that the more learned hackers will still from you regardless.

At the end of the day, it’s all about knowing your options and when/how to apply them to your projects.  As a web designer, security should be part of every client conversation if for no other reason than to let your clients know that you know what you’re doing.

Thoughts?.. I’d love to hear some real-life scenarios on what other designers do in response to this challenge, or even if designers consider this a challenge…

What is HTML Obfuscation and Why Should Web Designers Care About It?

Sadly, there is a lot of truth to the problems associated with client acquisition, billing, and work assignment… and the fact that these problems take on a life of their own for larger-sized agencies.

And yes, this is a topic that deserves attention in its own right but what I’m also discovering is the plethora of so-called web designers that are comfortable passing off outdated “template” work as professional “custom” work.

Don’t get me wrong, templates are a perfectly legitimate option for creating a web presence but they’ve come a long way in the last couple of years and reflect an entirely new evolution of marketing.

It’s not hard to recognize an old layout — when I look at an agency’s portfolio littered with old template sites, it tells me right away that either they haven’t had any new business in a long while, or they’re so far behind the times that they don’t have a clue how bad (and inefficient) their work really is.

These agencies aren’t difficult to find. Just Google “web designers” and look at their portfolios (and their own site).  After the obvious visual inspection, take a cursory glance at the page source and see how many of these websites are STILL using deprecated HTML and tables. Heck, many of them don’t even make proper use of meta data and most of them don’t include analytics.  It’s shameful.

What’s even worse is that these companies are ranking on the first page of the SERPs.

No actually, what’s worse is the crossover from web design to marketing, and the total lack of competency and disregard for the client’s needs.

Hold the phone, the absolute worse thing is the lack of accountability to quality, incompetency,  unproductive results, and the greater potential for inferior brand/reputation management.  Yes, I think that accountability is the nail that drives this rant and our pursuit of helping business owners instead of taking advantage of them.

So, thanks Andy for opening the conversation and calling attention to self-serving agencies that ought to fall under greater scrutiny.  And for initiating the ensuing dialogue that we’re not all guilty of such manipulative exploits.

The Web Designer Enigma

WordPress is actually very robust, but it can be tough to master.  It’s not exactly the most intuitive platform for the average bear.  Don’t get me wrong – I totally appreciate that it’s open source and that there are so many selfless people contributing to its ongoing evolution.  I’m just saying…

This post is the result of our company’s effort to systematize how we configure clients’ WP-based websites for speed, traffic (getting indexed), optimal visitor experience, and security.

I had no idea how much there really was to do to optimize a WordPress website until I sat down and began to look at everything.  While the list is pretty standard in itself (albeit, daunting), some things are easier to appreciate with added elaboration.  Believe it or not, I tried to keep that elaboration to a minimum but the end result still requires a coffee and a bathroom break.

While this list isn’t by any means the “end all” checklist for securing excellent organic search results, our experience has been significantly more favourable as a direct result of implementing the following information…

The Overview:

1. (Not-so-)basic SEO considerations
2. Tweak WordPress’ default settings
3. Install & configure plugins
4. Secure your WordPress blog using .htaccess and config.php

1. (Not-So-)Basic SEO (On-Site) Considerations

Sounds simple but this became a lesson in itself and I encourage you to investigate your options beyond what you read here.

A) Clean & Efficient Markup

In addition to using the page/post editor to define:

• Title (shouldn’t exceed 60 characters)
• H1 (should wrap the single, main keyword on the page)
• Alt tag (should describe every image with a relevant keyword)

…pay attention to the default meta tags (handled via header.php), and create unique meta data for each post/page (handled via plugins).

Meta tags are a useful way to provide important information about your site every time it’s crawled but by default, the WordPress core code does not contain a lot of meta data so if you want to use it, you have to go to the trouble to manually add it.

Meta tags come in two flavors – static (found in the header.php file) and dynamic (created in individual posts/pages via plugins).

Consider the following list of common “universal” static meta tags:

<meta name="resource-type" content=" " />
<meta http-equiv="content-type" content=" " />
<meta http-equiv="content-language" content=" " />
<meta name="author" content=" " />
<meta name="contact" content=" " />
<meta name="copyright" content=" " />

This static data doesn’t change, so it has a universal application throughout your entire site. We don’t want that for our description and in some cases, indexing.  Hence, the dynamic meta tags.

<meta name="description" content=" " />
<meta name="robots" content=" ">

Re: the Description meta tag…
According to Matt Cutts, Google no longer gives any weight to the keywords meta tag so we (mostly) ignore it too.  With that said, we still include them in every post knowing that keywords are still valid search terms that will help direct people to our content.  How they’re actually used in search remains a mystery.

Also, on the advice of Google, it’s important to differentiate the descriptions for different pages/posts because identical or similar descriptions can:

1. Hurt you in the SERPs
2. Cause Google to generate its own description snippet

We don’t want that either.

Matt Cutts explains that snippets (descriptions) can come from a number of places:

• the open directory (dmoz)
• anywhere on the page (eg. footer, widgets, posts)
• sometimes multiple contexts and pieced together
• from the meta description tag (if applicable)
• WP Excerpt field content (the only way to create descriptions for pages and posts)

When there is no unique excerpt content, WP automatically generates an excerpt by selecting the first 55 words of the post.  Unfortunately, these introductory words are often not optimized for search and are too long to be displayed in entirety in the SERPs anyway.

On the other hand, when there IS unique content added to the Excerpt field, it can be used as meta descriptions.

So… wouldn’t you rather ensure that your post content is displayed for relevant content while increasing your chances of getting ranked for it?  Us too!

But how DO you add description snippets to a blog page when WordPress offers no interface to do that?

Plugins.

And as expected, we have our favorites:

WordPress SEO by Yoast
http://wordpress.org/extend/plugins/wordpress-seo/

WordPress Excerpt Editor
http://www.laptoptips.ca/projects/wordpress-excerpt-editor/

PJW Page Excerpt
http://blog.ftwr.co.uk/wordpress/page-excerpt/

 All three plugins let you add excerpts to pages.  And a slick tip we learned from Demetris at op111.net was, wheneever you can, deactivate your single-purpose plugin when you finish with it and reactivate it the next time you want to add or edit a large number of excerpts.  (Remember, inactive plugins help reduce page load :)  Of course, if you’re using WP SEO, you’ll leave it active all the time because it’s so rich in functionality.

Re: the Robots meta tag…

This is important because of the power that the robots meta tag has – it tells search engines they can visit content but prohibits it from being indexed/displayed in the SERPs (unlike the robots.txt file which only prevents crawling, not indexing).

According to Google, here is a full list of Robots Meta Tag content values.

• NOINDEX – prevents the page from being included in the index.
• NOFOLLOW – prevents Googlebot from following any links on the page. (Note that this is different from the link-level NOFOLLOW attribute, which prevents Googlebot from following an individual link.)
• NOARCHIVE – prevents a cached copy of this page from being available in the search results.
• NOSNIPPET – prevents a description from appearing below the page in the search results, as well as prevents caching of the page.
• NOODP – blocks the Open Directory Project description of the page from being used in the description that appears below the page in the search results.
• NONE – equivalent to “NOINDEX, NOFOLLOW”

Just remember, “Googlebot will index a page by default and follow links to it so there’s really no need to tag pages with INDEX or FOLLOW.”

The next big question is, how do we go about adding meta data to individual pages/posts?

Again, plugins.

And again, our favorite is WordPress SEO.  It allows you to customize your meta data on a per-post/page basis, giving you control over how your site is crawled and displayed in the SERPs.  (As a general rule of thumb, titles shouldn’t exceed 60 characters, and descriptions shouldn’t exceed 160 characters.)

Dynamic meta data is so often overlooked by bloggers.  But once you understand the significance of their role, and how easy it is to accommodate them (with the right plugin), you’re appreciation of utilizing optimal code will help your blog radically in the SERPs.

B) Create useful content

Use strategic keyword placement and internal/external linking strategies.  This could be a post in itself but if nothing else, concentrate on the following:

• Write single keyword-focused posts/pages (write from the perspective of someone who is searching for your information)
• Ensure that each page/post has at least one keyword-related anchor text link (and no more than three) to either an on/off-site destination.  And yes, I totally blew that rule out of the water with this post!
• Write unique content (specific to you & don’t reuse content from other sources, especially verbatim!)
• Write regularly (schedule posts if possible)
• Use 301 redirects for deleted posts/pages
• Avoid duplicate content (Matt Cutts talks about the canonical link element and how to avoid dup content. BTW, you should subscribe to this channel!)
• Avoid displaying empty 404 error pages (instead of creating a dedicated html page, or editing your .htaccess file, try the Smart 404 or Quick Page/Post Redirect DEV plugin)

As I said, these things are just the tip of the iceberg…

C) Use a sitemap

A sitemap is a custom-formatted page of all the content on your website.  It has two functions:

1. Helps bots discover and index new/updated pages/posts
2. Gives your visitors an organized overview of your content

Some themes have a built-in sitemap generator but doesn’t always accommodate both people AND bots.  As with all other SEO considerations thus far, using a plugin to generate your sitemap is the only way to go.  You can use a single-purpose plugin like Google XML Sitemap, but we prefer, WordPress SEO (do you see a pattern here? ;)

D) Validate your markup

Often overlooked, validation has a two-fold purpose:

1. It plays a big role in the indexing and ranking of your site
2. It ensures that your website will be compatible with more web browsers and therefore, accessible to more people

Use these resources to validate your site/blog:

• HTML http://validator.w3.org/ (Remember to validate all your pages (ie. single.php, page.php, sidebar.php, etc) and not just the home page (index.php).
• CSS http://jigsaw.w3.org/css-validator/
• RSS http://validator.w3.org/feed/
• Dead links http://validator.w3.org/checklink
• Mobile compatibility http://validator.w3.org/mobile/

E) Use a robots.txt file

You only need a robots.txt file if you have content that you don’t want indexed however, this will NOT guarantee that your page content won’t show up in the SERPs.

On the flip side, if you DO want search engines to index everything, that happens automatically so you don’t have to create a robots.txt file for that.

Reasons to prevent certain pages from getting indexed?

• To prevent link juice leakage.  There are pages that just don’t need to be indexed – usually. (eg. privacy, contact, login pages, search result pages, auto-generated pages, stylesheets, etc.)
• To prevent self-promotion from plugin developers. Joost de Valk blocks the plugins directory because, “plugin developers have the annoying habit of adding index.php files to their plugin directories that link back to their websites.”  (You’ll usually see similar links in stylesheets.)

Pages you DON’T want to disallow?

• Feeds. Matt Cutts suggests not to block RSS feeds; Joost de Valk (WordPress SEO developer) agrees and adds that feeds are another source of new content for Google bots so blocking it would be counter-productive.

Some important considerations from Google Webmaster Central:

• Google will look at external information (ie. incoming links, dmoz) and decide that it’s relevant enough to list in the SERPs, regardless of what your robots.txt file says
• Blocking Google from crawling a page may decrease that page’s page rank, or cause it to drop out altogether over time
• If you’re using robots.txt to block duplicate content, remember that 301 redirects or canonical tags can also be used
• robots.txt is habitually ignored by malware

(In other words, the safest way to “hide” your content is to password protect it.)

NOTES: robots.txt is only one of three ways to prevent indexing, and by most standards, probably the least efficient.

As of WP v3.3, the wp-admin folder is automatically blocked in the core markup.

If you block a page with robots.txt, Googlebot won’t crawl the page or read any meta data on the page (kinda counter-productive).

If you allow a page with robots.txt but block it from being indexed using a meta tag, Googlebot will access the page, read the meta tag, but subsequently not index it.

Use the robots.txt analysis tool at Google Webmaster Tools (Dashboard | Site Configuration | Crawler Access) to generate &/or test your robots.txt file.

Creating a robots.txt file to perform specific permissions will likely be a controversial topic for many bloggers as we all have our own preferences and beliefs.  I encourage you to research how robots.txt works to best accommodate your specific indexing needs.  You might be surprised at what you learn.

F) Test your site to make sure that it appears correctly in different browsers.  A Google search reveals some of the more popular resources (we haven’t used them all).

• Browsershots is probably the most comprehensive free testing tool, supporting a myriad of browsers.
• BrowserSeal is a paid tool that supports multiple versions of IE, FF, Safari, Opera and Chrome, as well as many others.
• IE NetRenderer lets you check compatibility in IE versions 5.5 through 9.
• Adobe BrowserLab is a free cross-browser compatibility tool that lets you test a number of modern and legacy browsers from the web, or viewed locally via Firebug or Dreamweaver CS5.
• Sauce Labs provides a lot of browser and OS options and offers 200 free minutes of testing/month.

SmashingMagazine has posted a very useful comparative review of different browser testing tools, http://coding.smashingmagazine.com/2010/06/04/cross-browser-testing-a-detailed-review-of-tools-and-services/

G)   Links (xternal & internal)

Getting ranked in the search engines is a popularity contest and the more links, pingbacks, trackbacks you get, the higher you rank.

Your SERP placement is determined by over 200 factors, one of which is PageRank and this in turn is measured by the number of incoming links.  In other words, each link you get from outside sources adds to your site’s PageRank.

So, while you’re building your own internal structure, make sure you reach out to influential outsiders in the hope of earning a link from them (and showing the SERPs that you are linking to related authority content).

(BTW, this post is one of those do-as-I-say-and-not-as-I-do lessons in creating outbound links!)

2. Tweak & optimize WordPress’ default settings

Settings – General

Tagline – I don’t always use this but it can be useful for keyword recognition.

Time Zone – Helpful to have the correct settings for scheduled content.

Settings – Reading

Front Page Displays – If the goal is to have visitors to see the same (static) page every time they visit, select “a static page” and choose one from the dropdown menu.  Otherwise, the newest blog “posts” will display by default.

Settings – Privacy

When I initially install and setup a new blog, I choose to NOT have search engines index the site.  Change that status here when the content is ready to go “live.”

Settings – Permalinks

I can’t think of any reason for using dates, unless your site covers a lot of news.  The new WP v3.3 default is “post name” (http://www.yourdomain.com/sample-post/), so just confirm that here.

If you have a need for displaying the category name in your URL (eg. if you have a large site that has multiple posts with the same title but live in different categories), use: /%category%/%postname%/

3. Install & Configure Plugins

There’s a fine line between adding sufficient plugins to improve your site’s performance and enhancing your visitor’s experience… and overloading your site with them.  You want to consider specific factors for SEO, security, performance, and optimizing the experience for your readers but not so much as to restrict your site’s page load time.

In that light, consider the following plugins:

ESSENTIAL PLUGINS (Performance)

W3 Total Cache

Google automatically takes a “snapshot” of each page it crawls and makes it available for future (& quicker) visits to the page without physically re-loading it.  Things like graphics, stylesheets, and JavaScript render much quicker, decreasing the page load speed of the originally cached website.

W3 Total Cache is the fastest and most complete WordPress performance optimization plugin.  It’s also reassuring to know that sites like Mashable, SmashingMagazine, Yoast, WPBeginner, MattCutts, HostGator (and countless others) use it.

Plagiarizing straight from the plugin site, the benefits of W3TC consist of:

• At least 10x improvement in overall site performance (Grade A in YSlow or significant Google Page Speed improvements) when fully configured
• Improved conversion rates and “site performance” which affect your site’s rank on Google.com
• “Instant” subsequent page views: browser caching
• Optimized progressive render: pages start rendering quickly
• Reduced page load time: increased visitor time on site; visitors view more pages
• Improved web server performance; sustain high traffic periods
• Up to 80% bandwidth savings via minify and HTTP compression of HTML, CSS, JavaScript and feeds

All this makes it easier for search engines to spider and index your content.  But before we speed up our site, try performing a benchmark test to see how fast it’s running before you add this plugin.  You can do that by visiting http://gtmetrix.com.

I also recommend checking out Syed Balkhi’s post over at WPBeginner for details on how to configure this plugin, http://www.wpbeginner.com/plugins/how-to-install-and-setup-w3-total-cache-for-beginners/.

Alternatively, the plugin site itself has some helpful FAQs and notes on the plugin, http://wordpress.org/extend/plugins/w3-total-cache/.

Google XML Sitemaps & Sitemap Generator

Sitemaps are helpful for telling search engines to crawl your site and are particularly helpful for new/large sites, or if you have a lot of dynamic content (eg. auto posted content).  A sitemap is not a guarantee that your pages will be crawled/indexed but on the bright side, it doesn’t hurt and you won’t be penalized for having one.

It’s good practice to use two sitemaps – one for bots and one for people.

If you use the WordPress SEO plugin, there’s no need to install any other sitemap-related plugin as this task is handled automatically (when configured).  The plugin also pings the sitemap to Google and Bing automatically, with the option to add Ask and Yahoo.

WordPress Ping Optimizer

“WordPress automatically notifies popular Update Services that you’ve updated your blog by sending a XML-RPC ping each time you create or update a post. …All you need to do is sit back and let it work for you!

“If you do not want the update services to be pinged, remove all the update service URIs listed under “Update Services” on the Settings->Writing administration screen of your WordPress installation.” – http://codex.wordpress.org/Update_Services

In layman’s terms, this means that your blog is pinging every time you edit your page/post and runs the risk of getting your site banned, and possibly even sandboxed. To prevent that, you need a way to ignore edits and this plugin does just that.

SEO Friendly Images

I didn’t know this until I learned about this plugin but, missing Alt tags affects page load.  Who knew..?

If you don’t religiously use the alt and title tags for your images, you’re adversely affecting how bots crawl/index your content.

This plugin automatically updates all images with proper alt and title attributes according the options you set.  Sweet.

Smart 404

“Instead of quickly giving up when a visitor reaches a page that doesn’t exist, make an effort to guess what they were after in the first place. This plugin will perform a search of your posts, tags and categories, using keywords from the requested URL. If there’s a match, redirect to that page instead of showing the error. If there’s more than one match, the 404 template can use some template tags to provide a list of suggestions to the visitor.

“This plugin is also useful if you have recently changed your permalink structure: With minimal or no adjustment, old permalinks will still work.”

This plugin is especially handy if your creating a “mulligan” site with existing pages that you no longer want visitors to access.  Of course you can also block these pages using Google Webmaster Tools but in that case, you still get a 404 error.  This plugin smartly displays alternative and related pages.

ESSENTIAL PLUGINS (SEO)

WordPress SEO by Yoast

This is such an all-encompassing plugin that, if you use it and configure it properly, there is no need to use Platinum SEO (or the lesser All-In-One-SEO), or Google XML Sitemap, or Excerpt Editors.  And I think we all know that the fewer plugins we use, the lesser the load on page speed.

Joost de Valk is a WordPress consultant and developer so the code for this plugin is written with specific WP SEO considerations in mind.  On top of that, this plugin simply forces you to write better content (the actual article itself, keywords, title, meta desc, and excerpt). Enough said.

Here’s a snapshot of some of the features that give me warm fuzzies:

• The settings for RSS feeds, allowing you to add shortlinks that recognize your content as the original source (winning the fight against scraped dup content ;), and serving overtime as backlinks to your post &/or blog.  Sweet.
• The option to customize how your content will appear on Facebook and Google+
• The ability to customize categories (how I want them to appear in breadcrumbs, archives, and whether they should be detected in my sitemap, or followed, or indexed)

For a helpful explanation of how to configure the plugin (it’s an older post, still..) check out WPbeginner:

http://www.wpbeginner.com/plugins/how-to-install-and-setup-wordpress-seo-plugin-by-yoast/

ESSENTIAL PLUGINS (Content)

Efficiently Related Posts

The biggest reason for using this kind of plugin is for building internal link juice and (potentially) boosting rankings for related content.  There are a few popular posts that handle this and we found a helpful review on some current Related Post plugins that might help you decide.

Our reasons for working with ERP is the ease of installation and simplicity of options.  After all, this is a single-purpose plugin for us and suits our needs out of the box.

One caveat is that it only draws from tags to display related posts however, we use that to our favour because (on our own blog, that is) we don’t utilize tags much except to accommodate related posts, making content much easier to organize.

SEO Smartlinks

This is an interesting compliment to any related posts plugin because it finds related keywords within the context of your page/post and automatically links to other internal pages/posts/comments/categories/tags using the same keyword(s), making it a good way to beef up internal linking as well as sending people to external links (eg. product pages).

That said, we don’t always use this because it can taint the readability of a page with excessive links.  Also, I tend to consider it an unnecessary plugin that can be a drain on page load speed.

ESSENTIAL PLUGINS (Analytics)

Google Analytics for WordPress

Analytics is seriously underappreciated and in all fairness, isn’t necessary for the casual blogger. But for business owners, it’s an overlooked essential.

Not only should you have a Google Analytics account but, if your website is a self-hosted blog, you should be using the complimentary plugin.

GA for WP accommodates custom variables and helps track your posts/pages as well as visitor behavior, 404 errors, and so much more.

As usual, WPBeginners has a useful post that emphasizes why analytics on your site is a good idea.

http://www.wpbeginner.com/beginners-guide/how-to-install-google-analytics-in-wordpress/

ESSENTIAL PLUGINS (Security)

Spam Free WordPress

Move over Akismet. Spam Free WordPress is a comment spam blocking plugin that blocks 100% of the automated spam with zero false positives. There is no other plugin, or service, available for WordPress that can claim 100% accuracy with zero false positives, not even Akismet.”  (May require adding a line of code to the comments.php file.)

Akismet

“Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s Comments admin screen.”  This is a given.

Login Lock

This kind of plugin is useful regardless of whether you have multiple users.  The idea is to prevent cracked password attempts and blocks hacker’s IP addresses.  It also has an emergency “panic button” that forcibly logs out all users, resets their passwords to a random value, and requires email verification before allowing to them to log back in.  If you’ve ever been down this road, it’s definitely something worth considering!

Alternatives to consider regarding limiting the number of login attempts are, Login Lockdown and Limit Login Attempts.

WordPress File Monitor

This one Monitors your site for added/deleted/changed files and notifies you via email when a change is detected.  Not only you can learn when you files are compromised but also which files will need to restored.

ESSENTIAL PLUGINS (Maintenance)

WP Maintenance Mode

Adds a maintenance-page to your blog that lets visitors know your blog is down for maintenance time.  Admins retain full access to the blog during down time.

WP-DBManager

“Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of backing up, optimizing and repairing of database.”  Need I say more..?

ESSENTIAL PLUGINS (Social)

Social Media Widget

This is a simple way to use a sidebar widget to display icons of your social profiles that you want visitors to click on to follow you.

Twitter

I’ve yet to find something that does three things effectively, so until I do, these are three popular options:

Twitter Feed
We use this to post blog updates to our twitter account. It’s not a plugin.

Latest twitter sidebar widget
Easy to setup, this plugin displays up to 20 tweets and comes with its own stylesheet to customize.

TweetMeme button
Adds a button which easily lets you retweet your blog posts.

Facebook

Again, would love to find a plugin that does everything…

SimpleFacebookConnect
This is a one-size-fits-all solution for integrating your blog with Facebook and offering visitors a fully integrated experience.  Not only can your blog visitors comment on your blog, but their comments get published to their Facebook feed.

Facebook Share (New) Button
“The Facebook Share (new) button easily allows your blog to be shared. The button also provides a current count of how many times your story has been shared throughout Facebook.”

Facebook Social Plugins
Depending on the need, we mostly use plugins from here:
http://developers.facebook.com/docs/plugins/

ShareThis

Allows you to share your content through email and 50+ social networks including Facebook, Twitter, Digg, StumbleUpon, Reddit, Google Buzz, and also includes Facebook Like & Google+ options.

 4. Secure your WordPress blog using .htaccess and config.php

In our humble opinion, WP should be installed manually.  Learning to do it manually can actually be less stressful than dealing with imminent intrusions down the road.  http://codex.wordpress.org/Installing_WordPress or http://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install

There are many things you can do to lock down your site and at first glance it may seem like an overwhelming and complicated list of things-to-do BUT, if you address each step individually, you will find the task of locking down your WordPress blog quite manageable.

If you’re a casual blogger, you may not care to perform these tasks but if your site is a business site, we strongly recommend that you follow this list completely – either on your own, or hire someone to handle it for you.  It could very well be the difference between a small investment of time now, or the larger expense of recovering lost data later (& hopefully you’ll never have to travel that road!)

This is by no means a complete list but it’s a good place to start:

1. Use a strong, random password!
2. Never use the default ‘admin’ username!
3. Always change the security keys by copying & pasting values randomly generated here: https://api.wordpress.org/secret-key/1.1/salt/
4. Change the table prefix from “wp_” to a strong, random password-like value (eg. hF8c77sl09L3MW210_)  The ending underscore is a good way to keep things readable.

If you want to change this prefix on an existing blog, change it in wp-config.php then use phpMyAdmin to rename the existing tables.

RENAME TABLE wp_comments TO [your prefix here]_comments;
RENAME TABLE wp_links TO [your prefix here]_links;
RENAME TABLE wp_options TO [your prefix here]_options;
RENAME TABLE wp_postmeta TO [your prefix here]_postmeta;
RENAME TABLE wp_posts TO [your prefix here]_posts;
RENAME TABLE wp_terms TO [your prefix here]_terms;
RENAME TABLE wp_term_relationships TO [your prefix here]_term_relationships;
RENAME TABLE wp_term_taxonomy TO [your prefix here]_term_taxonomy;
RENAME TABLE wp_usermeta TO [your prefix here]_usermeta;
RENAME TABLE wp_users TO [your prefix here]_users;

Also, in the options table, replace all meta_key values in the usermeta table table from the old “wp_” prefix to your new one (ie. wp_user_roles, etc)

5. remove install.php after installation

6. protect .htaccess:

# Protect .htaccess files
<Files .htaccess>
order allow,deny
deny from all
</Files>

 7. protect wp-config.php

# Protect wp-config.php
<Files wp-config.php>
order allow,deny
deny from all
</Files>

8.  protect wp-admin

I confess that we’re not in the habit of doing this but cPanel has a feature called Web Protect which allows you to do this and it wouldn’t hurt to search Google for a good tutorial.

9.    protect wp-content

The wp-content directory contains your theme files, uploaded images and plugins. You may want to restrict this folder to prevent people from accessing these files.

Include the following lines in .htaccess within wp-content:

Order Allow,Deny
Deny from all
<files  ?\.(jpg|gif|png|js|css)$? ~>
Allow from all\
</files>

 10. control autosave via config.php

More of a peace-of-mind thing than an actual security measure.

//Autosave posts interval in seconds
define( ‘AUTOSAVE_INTERVAL’, 60 );

11.  Install a backup plugin

12. Prevent excessive login attempts by installing Login Lock

13. Use a robots meta tag to prevent indexing of login, register and admin pages

Recommended Reading:
There’s a ton o’ reading on the subject of WordPress security and a couple of good places to start are:

• Joodt de Valk’s recent (March 2012) updated tut on his WordPress SEO plugin
• http://sltaylor.co.uk/blog/wordpress-hacks-tips-security/
• http://www.slideshare.net/Steve-Taylor/beyond-the-wordpress-5-minute-install
• http://digwp.com/2010/08/pimp-your-wp-config-php/
• http://digwp.com/2009/06/wordpress-configuration-tricks/
• The Blogger’s guide to SEO
• Beginners Guide to Search Engine Optimization
• WordPress SEO – The Definitive Guide to Higher Rankings for your Blog

If you found the information in this post useful, subscribe to our mailing list (in the footer) to receive similar detailed analysis of strategies that affect your website marketing.  Subscribers get exclusive content that doesn’t always make it to our blog.

WordPress SEO & Security

DuckDuckGo is the alternative search engine that combines search engine algorithms with user-generated content from Wikipedia, with the aim of “aggressively ridding spam and irrelevant results, reducing clutter as much as possible, adding instant answers from great sources above links whenever more relevant, and offering real privacy.”  Part of this vision is to refrain from recording private user data.

Founded by Gabriel Weinberg (a serial entrepreneur whose last venture, The Names Database, was acquired in 2006 for $10M), DuckDuckGo has been called a “hybrid” search engine, similar to sites like Mahalo, Kosmix and SearchMe, with the ability to produce their own content pages.

Linux Mint likes it so much that it signed an exclusive deal to use DuckDuckGo as the default search engine for Linux Mint 12.

Operating in excess of 1 Million daily searches already, Weinberg has already received several offers to sell his search engine, but to date has rejected each of them.

That’s a LOT of searches but DuckDuckGo has a long way to go to compete with the billion daily searches on Google.

For some interesting insights into why you want to give DuckDuckGo a go, take a look at this infographic.

DuckDuckGo – The Alternative Search Engine

In this post from HowToGeek, Chris Hoffman highlights some basic and advanced Google search tips.  Pay attention to the comments – you’ll get some extra ideas there.

LifeHacker has their own version of Google search tricks and is worth checking out.

Of course, you can always define your custom searches with Google’s help:

http://www.google.com/advanced_search, and

http://www.google.ca/advanced_search

Google Search Tips

Twitter pages are set to roll out after Feb. 1, allowing brands the ability to build platforms on their pages that could include iFrame environments and allow users to play games or shop on a brand’s site without actually leaving the Twitter environment.

The Birth of Twitter Pages