WWW Redirects with .htaccess

Definition of a www redirect

A www redirect is a rule on your web server that forwards all traffic from the non-www version of your domain to the www version, or vice versa.  For example, lets say your website is ‘www.example.com’ and someone types in ‘example.com’ into their browser.  The browser will send them to ‘example.com’.  When that request hits your web server, it will indicate to the browser that the correct web address is actually ‘www.example.com’ and will send the user there instead.  You can also setup redirects that work the other way and send users from ‘www.example.com’ to ‘example.com’.

The HTTP protocol used on the web has a numerical system for identifying the status of page requests.  The 301 status code indicates that the page or resource requested has ‘moved permanently’.  When implementing your www redirect it is important that you return a 301 status code so that search engines are clear which URL should be indexed.

Avoiding Duplicate Content with redirects

Every website has what is called the ‘site root’.  That is the directory on your web host that is publicly available when a user goes to your domain.  By default, this directory can be accessed by typing in the domain two different ways ‘www.example.com’ or ‘example.com’.  This means that for every page on your website, it can be accessed via two different URLs: the www version and the non-www version.  When search engines, such as Google, come along to crawl and index your site, they may come to the same page via the two different versions of the url.  When a search engine finds the same content at different URLs, it is called duplicate content.

Duplicate content is an issue because it puts your own site in competition with itself.  A page that might normally have great rankings in search now has another copy of itself in the search index.  When a user types in a keyword, how does the search engine know which page to display?  Is one copy better than the other?  To find the answer, search engines will look at off-page factors such as the number of incoming links.  If you have links pointing to just one of the pages, then that one will probably be selected.  If not, then that means you have users linking to two different URLs for the same content.  Imagine how much better you would rank in search if all those links were for the same page.  Allowing the same content to be accessed via multiple URLs dilutes your SEO efforts and devalues your content in the eyes of search engines.  The fix is to simply redirect everyone, search engines included, to the desired URL using 301 redirects.

Locating and working with your .htaccess file

As of February 2012, the Apache web server is most common, with just over 64% of the market share on the web.  If you aren’t using an Apache server, then what I am about to tell you won’t work.  If you are, then you will need to locate or create an .htaccess file at your site’s root directory.  The .htaccess file may, or may not, be visible when viewing your sites file structure through cPanel or your favorite FTP editor.  If you don’t see your .htaccess file, look around for an option that will allow you to see hidden files.  If you still don’t see it, then go ahead and create an .htaccess file.  If you have to create one, just upload an empty text file and rename it to ‘.htaccess’ ( NOT ‘.htaccess.txt’ ).  Once you have found or created your .htaccess file, then you just need to place your redirect rules within it.

If your .htaccess file already has stuff in it, make a copy and save it somewhere in case you have to revert back.  There is nothing worse than breaking your entire site because you messed up a key file and didn’t save a backup.

Implementing the www redirect

First, make sure that mod_rewrite is enabled.  Just make sure that this line appears somewhere in your .htaccess file above the rule that we are about to add:

RewriteEngine On

To redirect from non-www to the www version of your site, use the following rule:

RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule (.*)$ http://www.example.com/$1 [R=301,L]

To redirect from www to the non-www version of your site, use the following rule:

RewriteCond %{HTTP_HOST} ^www.example.com [NC]
RewriteRule (.*)$ http://example.com/$1 [R=301,L]

Make sure that you replace ‘example.com’ with your actual domain!

Optimizing Images in WordPress for Google Image Search

Ever wondered how to get your images to appear in Google Image Search? The process is similar to getting a web page to rank well in Google Web Search: optimize your image so that Google sees your image as relevant content. Let me walk you through a few things that you can do when adding images from within WordPress that will help your images get noticed by the search engines.

Choose your keywords

As with any SEO endeavor, you have to decide up front what keywords you want your image to rank for.  Doing this right takes a little work, but the payoff is worth it:

  1. Research – Pick a few keywords that you think are descriptive of your image. Do some research and extend your original list of keywords.
  2. Evaluate – Take your keywords and plug them into the Google AdWords Keyword Tool.  Take into account the search volume and competitive nature of the keywords.
  3. Decide – Choose a relevant keyword with moderate traffic and, if possible, one that isn’t too competitive.  Most importantly, make sure your target keyword actually describes the content of your image.

Name your image

The actual filename of your image matters.  Unfortunately, once you upload your image into WordPress, you can’t change the filename.  Before you upload your image, make sure you rename the file so that it contains your keywords.
For example, if you have a file named DSC103.jpg, you would rename it to mykeyword.jpg.

Provide alt text

Once you upload your image, be sure that you don’t leave the ‘Alternate Text’ field empty.  Screen readers read this text to users to describe the content of an image. Since a search engine can’t read the contents of an image, they depend on this text to get a better understanding of what the image is about.  Make sure you provide a relevant description, but also be sure to include your keywords. Setting WordPress Alt Text

If you were to set an image as a link, the alt text is considered the anchor text for the link.

Provide context

Google and other search engines don’t just depend on the file name and alt text to determine what an image is about.  If that were the case, we would see a lot of irrelevant images in Google Image Search because not everyone would be entirely truthful about the contents of an image.  Because of this, it is important that your images are also surrounded by content that reinforces the file name and alt text that you have set.

Optimize the page

One of the things you will find is that images always rank better when the page in general ranks better.  So you are off to a great start using WordPress, but there are still a few things you will want to consider:

  1. Make sure you use your keywords in the page title
    By default, WordPress takes the title you set for the page and uses it as the title tag in the HTML and as the heading on the page.  The important thing is that the HTML title tag reflects your keywords.  So if you are using a WordPress SEO plugin (I recommend Yoast’s WordPress SEO plugin), be sure that the SEO title reflects your keywords even if the heading on the page is different.
  2. Create a slug that uses your keywords
    WordPress allows you to edit the slug that is used in your URL for the page.  You can change it just below where you put the page title.  The slug is not set until you save the post and will match the page title on initial save.  It is a good idea to remove words like ‘and’, ‘the’ and the like from the slug and to be sure that you have used your keywords.Setting the Slug in WordPress
  3. Link to your page with anchor text that matches your keywords
    This is basically link building, which can be done internally as well as externally.  There is no difference between the two outside of the fact that internal link building is done within the context of your site, whereas external link building is done on other sites.  The idea is that the more links to a page, the more important it is and the more likely Google and the other search engines will take note of it.

    Since you are in complete control of the links on your site, this is the easiest place to start.  Just find another page on your site where you mention your target keyword for the current page.  If it doesn’t exist, see if you can work it into the content of a page somewhere.  Next, just highlight that text in your editor and create a link to the page you are optimizing.

    Categories and tags within WordPress can also be a great way to build internal links, but keep in mind that they are for classifying information… assigning a tag to a single post is useless.  My rule of thumb: Don’t create categories or tags if you don’t plan to have at least 10 posts that are assigned to it.

Disabling the WordPress File Editor

The problem with the WordPress file editor is that it allows users to run PHP code on your site.  Anytime a user is able to run their own code, this presents a security risk.  If an insecure admin account is hacked, the WordPress file editor is the gateway through which a full-fledged attack can be carried out.

Finding the WordPress File Editor

WordPress File Editor

The WordPress file editor can be a great tool because it allows you to make changes to theme and plugin files on your site directly from the WordPress administration area.  Most of the time, people who utilize this tool will edit their theme’s style.css file in order to make tweaks to their site.  This can be a blessing in disguise.  We will go into the issues with the file editor in the next section, but right now I want to point out where it is so you can know if it is enabled on your site.

Finding the file editor is pretty simple.  Log in to the administration area of your site and expand the ‘Appearance’ and ‘Plugins’ menu items by clicking on the arrow that appears on the right-hand side when you hover over the menu items.  If the word ‘Editor’ appears in either of these menus, then you know that the WordPress file editor is active on your site.

Concerns and Security Risks

A I mentioned earlier, the WordPress file editor is a great tool, but there are a few big reasons why you may want to disable it on your site.

WordPress users can mess things up. You do have to have administrative permissions to be able to view and use the file editor, but just because you are an administrator is doesn’t mean you know what you are doing.  WordPress web designers and developers will likely want to disable the theme and plugin editor for their clients in order to prevent them from messing with things that they don’t understand.  Web designers may not want the client making those css changes to the theme because their client doesn’t understand the importance of cross-browser compatibility.  Web developers may want to block this feature because inserting a single character in the wrong place in a PHP file can crash the site.

It is a gateway for hackers. WordPress is a secure platform, but users are often the weak link.  Most people don’t think about it, but your WordPress admin account is only as secure as you make it.  Let’s say a hacker knows your username and is able to crack your password.  Now they have full admin access to your WordPress site.  Where would they go to gain more access?  Yep… the WordPress file editor.  The file editor will allow them to run scripts to upload destructive files, email all your users, access your database, you name it.

Is disabling the file editor the answer?  If you don’t use it anyway, definitely.  If you do use it, just make sure you take enough precautions with site security so that you are the only one who ever sees it.

Disabling the File Editor

So if you agree with me that disabling the file editor is a good idea, you will be pleased to know that it is extremely simple to do.  Just add this line of code to your wp-config.php file:

define('DISALLOW_FILE_EDIT', TRUE);

Yep, that’s it!  Just one measly line of code can stand in the way of you and trouble… go ahead and add it right now.  It only takes 5 minutes. :)

http://codex.wordpress.org/Editing_wp-config.php#Disable_the_Plugin_and_Theme_Editor

 

Securing your WordPress Admin Accounts

On its own, WordPress is a very secure platform.  However, when you start introducing third party software and people into the system, this can change.  Today we are going to go over some good policies that every site administrator should put into place.

Don’t Give Away Your Username

Obviously if someone knows your username that you use to log in to your site, all they have left is to guess your password.  It used to be that WordPress automatically assigned the ‘admin’ username to the administrator when a site was created.  If for any reason your username is set to ‘admin’ you will want to change it.

WordPress won’t allow you to change your username after the fact, so you will have to follow these steps to fix it:

  1. Log into your administrator account.
  2. Create a new administrator account with a secure username.
  3. Log in using the new administrator account.
  4. Delete your old administrator account.
  5. When asked what to do with the content created by the old user, assign everything to the new user.

 Changine your display name in WordPress profile settings

Beyond just avoiding using ‘admin’ as your username, you will need to prevent WordPress from displaying your username on the front of the site.  By default, your username is displayed on the front end of the site for all the posts that you have authored.  This is done because the username is required during user creation and not all users have assigned another name to appear on the site.  Thankfully, WordPress allows you to display the name of your choice on the front end of the site.  The image above illustrates the last step in this process:

  1. Log in to your administrator account.
  2. In the menu on the left, go to ‘Users’ -> ‘Your Profile’.
  3. Enter in a nickname that is different from your username.
  4. In the ‘Display name publicly as’ dropdown, select your nickname.

If you don’t mind displaying your real name on the site, you can always display that as well.  Keep in mind that if your username was being displayed on the site before, you will want to follow the aforementioned steps for changing the username for your admin account.

Use Secure Passwords

All too often people use insecure passwords because they are easy to type or easy to remember.  Here are a few pointers on secure passwords:

  1. Never use obvious or easy to guess passwords.  ‘Password’ or your pet’s name should definitely be marked of the list.  Also, don’t use the name of your spouse, parts of your address or other personal information like your birthdate.
  2. Don’t use a password across multiple accounts.  If someone were to gain access to your password for one account it would compromise all of your other accounts.  When I use the word ‘accounts’ here, I mean any website where you might have a username and password.
  3. Make your password long enough. The shorter your password is, the more likely a hacker will be able to crack it.  As a password gets longer, it becomes exponentially more difficult to crack.  Eight characters should be the minimum here.
  4. Mix up your characters. Don’t just use all letters or numbers, or even all upper or lowercase for that matter.
  5. Actually change your password occasionally.

Title Template Tags in WordPress

WordPress themers should be aware of all the different title template tags out there for properly calling page titles.  Not every function will work in all situations, so you have to think carefully about what to use and where.

Below is my synopsis of all the title template tags that WordPress has to offer:

Template Tag Proper Usage
wp_title() Used to display the page title within the HTML <title> tag.  This is typically altered for SEO purposes and should not be used to display page titles in the content area of a page.
the_title() Used within the loop to display the title of a post or page.  This function outputs the title immediately and is a wrapper function for get_the_title().
get_the_title() Used to fetch the title of a post or page.  Can be used outside the loop if is_singular() is true.  This is the only function on our list that doesn’t automatically print out the title to the page.  You can optionally provide an ID and get the page title for another page as well.
single_post_title() Used outside the loop to display the title for a single post or page.  This function also works when trying to display the title for the posts page when a user’s settings have designated a static page to display their blog.
single_cat_title() Used outside the loop on category pages to display the title for WordPress’s built-in categories.  It is now just a wrapper function for single_term_title() and will probably be depreciated in the future.
single_tag_title() Used outside the loop on tag pages to display the title for WordPress’s built-in tags. It is now just a wrapper function for single_term_title() and will probably be depreciated in the future.
single_term_title() Used outside the loop on taxonomy pages to display the title for any taxonomy.  This means that this function can be used instead of single_cat_title() and single_tag_title() and will also work for any custom taxonomies that have been defined.
single_month_title() Used outside the loop to display the title for date based archives.  The title will display the month and year and will require you to assign a prefix in order for it to appear correctly.  If a user is on a year based archive page, only the year will appear in the title.
post_type_archive_title() Used outside the loop to display the title on the main archives page (aka posts page) for custom post types ONLY.
the_search_query() Used outside the loop to display the search query.  Great to use in your search.php theme file, if you have one.

I would love to hear if and how you have been using these in your themes.

Get the title for the posts page in WordPress

This little tidbit is for all you WordPress themers out there.  It is important that your theme displays the proper title on the page no matter what settings a user has on their site.  As you probably are already aware, a user can go to ‘Settings’ -> ‘Reading’ in the WordPress admin menu and change what pages are used for the front page and the posts page (aka blog page).

Set Blog Page in WordPress

So in the example above, I want to set a static page as my homepage and delegate another page to host my blog (aka posts page).  So now that my posts page is no longer the front page, I want to display the page title that the user assigned to that page in my theme.  This helps add clarity for users and makes all of my pages have a more consistent appearance.  As an example, it could be that I am using the posts page for displaying news items and want to label my posts page ‘News’.

Rather than leaving it up to the user to go in and try to hack your theme to get the page title to appear, you decide you want to display this page title for them automatically.

WordPress provides you with the the_title() function, which works great inside the loop.  Problem is, you are using that inside the loop to display the title for all of your blog entries on the page and that won’t do you any good when trying to fetch the page title outside the loop.  If you try to use this function for the page title outside the loop, all you get is the title of the first post on the page.

So how do we fetch the page title for our posts page?

There are two ways to do it.  First is the easy way:

single_post_title();

The only problem you might encounter with this method is that the function echos our title immediately.  If you want to get the title as a variable for any reason, you would have to use output buffering to do it.

You can use the get_the_title() function to get the title of a page as a variable just by providing the ID.  If you don’t provide an ID, then the function will try to fetch the ID for the current page.  Unfortunately, this function doesn’t detect the current page ID properly in our use case, which is why using the_title() function didn’t work for us earlier:  the_title() is just a wrapper function for get_the_title().

Luckily for us, WordPress does store the ID of the page you want to use for the posts page in the database.  So we can fetch the title as a variable, like this:

$our_title = get_the_title( get_option('page_for_posts', true) );

This may be more than you ever needed to know about fetching the title for an assigned posts page, but now you know! ;)

Troubleshooting WordPress Plugins

Troubleshooting WordPress Plugins

It happens to everyone… you find a free WordPress plugin that is just awesome, and then something goes wrong or you find that the plugin simply doesn’t work. Your first instinct is that their is a problem with the plugin, but you don’t know how to be 100% sure.

Here is a step-by-step procedure that you should use, before contacting a plugin author, to determine the source of a specific problem:

  1. Cause the problem – Whatever the issue is, be sure you know what steps are necessary to cause the problem.  If you can’t identify the specific steps necessary to cause the problem, you won’t be able to check if the problem still exists later on, and you won’t be able to clearly communicate the problem to people who can fix it.  When you are trying to relay information to someone you hope can fix the problem, be sure to provide the following information:
    • The version of WordPress you are running.
    • The version of the plugin in question.
    • A link to the page where the problem occurs.
    • If the problem is in the admin area, create a new user with the appropriate permissions, such as ‘administrator’ and provide the username and password.  This user can be deleted later after the problem has been reviewed.
    • Describe any conditions that must be met before the problem will occur (e.g. a specific plugin must be active).
    • Layout the steps necessary to cause the problem.
  2. Read the documentation – Before you get too far along, be sure to check the documentation for the plugin.  Most plugins define which version of WordPress they work with, so check this first.  Perhaps you don’t entirely understand how the plugin works or are trying to do something with the plugin that the author didn’t intend for it to do.  If what you need isn’t supported by the plugin, don’t give up yet!  Be sure to pass along your feedback to the plugin author, as they might be willing to include the functionality you need in the next release.
  3. Check for conflicts with other plugins – It is common for two plugins not to get along.  The best way to check for this is to disable all of the other plugins on your site and see if the problem still occurs.  If the problem still exists, you can rest assured that another plugin isn’t contributing to the issue and you can move on to the next step.  If the problem goes away, you will want to re-activate each plugin one at a time; checking to see if the problem re-occurs every time you activate a plugin. In this way, you should be able to narrow down which plugin might be contributing to the issue.  At this point, if you can’t really pin the problem on one plugin or the other, you may want to contact both plugin authors.
  4. Check for conflicts with the theme – Sometimes you, or a developer, will change the code in your theme, you will upgrade your theme, or you might have simply chosen a poorly coded theme.  With all the plugins still disabled, switch over to the default WordPress theme.  At this point, I am referring to the ‘TwentyTen’ theme that is the default when you install WordPress.  If switching to the default theme doesn’t fix the issue, continue to the next step.  Otherwise, the theme is the problem and you will want to take a closer look at it.  You will probably want to get in touch with the theme author, or a good WordPress developer should be able to help you out.
  5. Do a quick search – Take a look on the WordPress support forums to see if anyone is having the same problem, or if the plugin author is aware of the issue.  If you discover that the plugin author is aware of the problem, but there is no solution right now, subscribe to the thread where the issue is discussed.  You will receive emails related to the problem as progress unfolds.  If you can’t find anything related to your problem, move on to the next step.
  6. Post your problem on the WordPress support forums – Make sure to go to the plugin download page on WordPress.org and click on the ‘Forum Posts’ link in the right sidebar.  Anything you post here is usually monitored by the plugin author, but others are able to respond to your question as well.  If someone else is capable of answering your question, you may get a quicker resolution to your problem and that is one less email the plugin author has to worry about.  Just be sure you wait a few days to see if you get a response.
  7. Contact the plugin author directly – If the plugin author has provided any kind of contact information, you may contact them directly with your issue.  Not all plugin authors respond quickly or are eager to solve problems, but that is their prerogative.  If a plugin author is not cooperative, you may want to pay to have them or another WordPress developer take a look at your problem; or you may simply want to discontinue using the plugin.  Hopefully, you will find that most plugin authors value the feedback of their users and will do what they can to help out.  If you get personal help from the plugin author, you will probably want to make a donation in order to thank them for their time.

Author’s Note: Plugin authors provide plugins for free and it takes a lot of time to code a quality plugin, provide support for it, and make sure it is compatible when WordPress is updated. It is rude to be demanding when you want to see changes made to a plugin. Always be kind and courteous, keep in mind that the plugin author may be very busy, and consider donating if you make use of a plugin on your website.

Prevent Directory Browsing with .htaccess

If you have a self-hosted WordPress installation, you need to be aware of directory browsing and the implications of allowing it.  WordPress tries to prevent directory browsing, even if you (knowingly or unknowingly) have it enabled.  Unfortunately, it is up to you to make sure your site is completely secure.

What is directory browsing?

If you have your own website, chances are you have also used a file manager before.  A file manager allows you to see the files and folders that exist on your computer and open them.  Directory browsing is just like a file manager for your website, except open to the public.  Anyone on the web could potentially visit a directory on your site, see what files exist there and open them at will.

Basically, if directory browsing is enabled and you don’t have an index.html or index.php file in a given directory, the web browser will display the contents of the directory along with a link back to the parent directory.  You can check to see if directory browsing is enabled by creating a folder and adding a basic text file.  If you visit the directory in your web browser and it displays a link to the text file, then directory browsing is enabled.  If you get a ‘Page Not Found’ or ‘Forbidden’ message, then directory browsing is disabled.

Obviously, revealing the inner workings of your website to the public could entice hackers or at least make their job much easier.  Many hackers perform Google searches to find sites with directory browsing enabled and then choose sites which have known vulnerabilities based on their findings.

Directory browsing and WordPress

By default, a self-hosted installation of WordPress has a built-in safeguard against directory browsing.  A new WordPress installation will contain a blank index.php file in each folder so that a user visiting a folder, such as the plugins directory, will be presented with a blank screen.  However, many WordPress plugins don’t do this.  This means that hackers can see what plugins, and versions of those plugins, that you have installed on your site.

Securing access to your directories via .htaccess

The easiest way to disable directory browsing is to add a line to your site’s .htaccess file.

Keep in mind that you can have .htaccess files in multiple locations, but you want to make your change in the .htaccess found in the root directory for your domain.  This will cause the change to take place across your entire site.

Here is what you will need to do:

  1. Download your .htaccess file and make a copy.  You should always keep a copy of your .htaccess file when making changes, just in case things don’t work as planned.
  2. Add these lines to your .htaccess file:

    # Disable Directory Browsing

    Options All -Indexes

  3. Upload the new .htaccess file and overwrite the existing one.
  4. Verify that directory browsing is disabled.  You can visit a folder that previously allowed you to view the directory and be sure you are getting a ‘Page Not Fount’ or ‘Forbidden’ error message.

Congratulations!  Your site is now much more secure.  There are plenty of other security issues that you should be aware of and I will be addressing plenty of them in the weeks to come.

Anti Internet Explorer 6

Friends Don’t Let Friends Use Internet Explorer 6

Anti Internet Explorer 6While I don’t condone the use of Internet Explorer, I definitely have to agree with Microsoft on their campaign to eliminate the use of Internet Explorer 6.

Microsoft’s Internet Explorer has long been behind in web standards and has caused much grief to web designers the world over. So here are a few reasons why you should never use IE6:

  • It is 10 years old
  • It is slow……
  • You have to open a new window for any webpages you want to have open at the same time.
  • It is no longer supported by Microsoft and security is… well, NOT GOOD!
  • Because IE6 didn’t support the existing web standards 10 years ago, websites look REALLY BAD in this browser.
  • The more you continue to use this browser, the more you perpetuate the life-cycle of outdated software.

If you are using any version of Internet Explorer, I would urge you to look into using Google Chrome. At least use an up-to-date web browser, even if you prefer Internet Explorer after trying out some other web browsers.

On the flip side, if you have been thinking about having your website design be compatible with IE6, just STOP IT! Just to make sure I have emphasized this, here is a video of a MadTV sketch that might make it more clear…

Rather than try to make your site look great in IE6, Microsoft recommends displaying a banner to IE6 users on your website.