Let me start with a little background. First, let me acknowledge that WordPress is a great blogging platform for text. And I have seen some really beautiful photography blogs created on this platform. But what most people don’t realize is that these photo-blogging themes have a ton of custom code. Out of the box, WordPress is still absolutely awful with regards to text mixed with media. And I do realize that they’ve been constantly updating things, but it’s frankly still a crude environment.

The multi-line captions are a good example. While WordPress 2.5 added the ability to have captions, instead of building it into the user interface and allowing the user / writer to create content to be used as a caption, they instead decided to have the photo import interface add an odd caption shortcode which WordPress will later replace with actual HTML. What this means is that unless you want to modify WordPress core files (a very bad idea since you’d have to do it every time you upgraded WordPress), you’re stuck trying to fix captions within the bounds of their already lacking system.

So, without further rambling, here’s the long and the short of fixing the captioning system (a little bit).

Current Implementation (WordPress 2.5+)

Before fixing the captions, we need to understand exactly how it works out of the box.  When you go to insert a photo into a post, if you type anything in the caption dialog, WordPress will insert an image surrounded by a “caption” shortcode.  It goes through and replace this caption shortcode with actual HTML when it’s requested by a reader. However, instead of taking a block of text and including it, all it takes is one lousy string that can’t have anything but text.

Allowing Multiline Captions

Due to the existing implementation, there is really only so much we can work with. We need to take the caption and break it into multiple lines, but remember, WordPress won’t store more than a string for the caption. To fix this, I decided that I’d insert line breaks into the caption based on a text string — in my case, I chose the “|” symbol as I don’t ever see it being used in a caption. You can replace it with whatever you like.

To override the existing caption code, edit your theme’s functions.php file and add the following code (note, clicking on the left-most button in the top right of the code box will open the source in an editor — perfect for copying and pasting).

Please note, this will not work when inserting images in the WordPress Gallery format.

/*
*********************************************
Function to allow multi-line photo captions.
This function will split captions onto multiple lines if it detects
a "|" (pipe) symbol.
**********************************************
*/
/* Override existing caption shortcode handlers with our own */
add_shortcode('wp_caption', 'multiline_caption');
add_shortcode('caption', 'multiline_caption');

/* Our new function */
function multiline_caption($attr, $content = null) {
extract(shortcode_atts(array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

$new_caption = str_replace("|", "<br />", $caption);

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text">' . $new_caption . '</p></div>';
}

With this done, all that was left was to edit the caption of the desired photo with something like this: “First line of caption.|Second line of caption”.

Additional Resources

In searching the web for a solution, I found everything but what I needed. However, I did find some good resources for WordPress captions in general.

• WordPress Forum Post discussion modifying captions.
• The WordPress Codex — Official Shortcode API

A brief introduction to web crawlers

Hopefully, I’m not ruining any fantasies here, but there isn’t a room full of people at Google looking through web pages and indexing the contents of different sites.  That would require way too many people and cost way too much.  Instead, large search engines generally implement web crawlers, programs which quickly read web page data.  This process called crawling or spidering generally performs the following actions:

1. Read the prominent* page data on the current page
2. Read all hyper-links to other web pages and add them to a list of future pages to crawl
3. Move on to the next web page

* What a particular crawler deems to be “prominent” data depends entirely on the purpose of the crawler

There are a two important things to note here:

1. Once a crawler leaves your site, they may not come back for a while!
2. Since a crawler follows the links on your page, you had better make sure that the links count (and link to more of your content)

Thankfully for us, there is a set of standards which are used a guidelines for these web crawlers (also called robots).

What are these meta robots?

Spend any time in a web design forum, or browsing through an HTML book and you’re bound to come across the concept of meta tags.  As defined by Wikipedia, meta elements are metadata which can be embedded in HTML web pages that provide structured information about the current page.  These elements can include such things as keywords, location data, and content type.

The meta tag we’re interested in right now is the robots meta tag.  Using this tag carefully, we can specify three important attributes for links on our site**.

1. noindex – An attribute suggesting that the robot not add the data contained within the tag to the index (or search engine as the case may be)
2. nofollow – An attribute suggesting that the robot not add the link contained within the tag to the list of future pages to crawl.
3. noarchive – An attribute suggesting that that robot not to store a cached copy of your page.

**There are more attributes that are search engine specific, but I’m only covering the major ones here

You will recognize a couple things right away.  First, is that I was very careful to use the word suggest.  The author of the robot can choose whether or not to take these suggestions to heart.  Google seems to do a good job of following these suggestions, but I can’t speak for other search engines.  Second, the malicious user will notice that you can keep the robot from indexing other people’s sites that are linked to from your page.

Using these meta tags in the heading of a particular page applies them to the whole page.  The syntax is as follows:

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">

For more information, check out this helpful link.

The downside to this method is that you are specifying these properties for the whole page.  While this may be desirable in some instances, more often than not it’s desirable to specify such attributes on a link by link basis.  We can do that by adding the “rel” attribute to the standard link syntax as follows:

<a rel="noindex, nofollow" href="http://google.com">Google</a>

How to use meta robots for good?

So here’s a true story.  This may be a bit embarrassing for yours truly, but in sharing, I hope that I can help others avoid the same mistake.  Earlier this year, I was looking through my Google Webmasters account to see which keywords I was hitting with this site.  (For more information on how to setup Google Webmaster Tools and how to find keywords, see my post entitled What is SEO and why do I need it?)  I was a bit surprised to notice that my my number one keyword was “RSS”.  Clearly, being a Photography / Blogging site, this wasn’t good!  Thankfully, if you click on a keyword in Google Webmaster Tools, you’ll be given a list of what pages this keyword appears in.  I was shocked to find out that the keyword “RSS” appeared numerous times on every page of my site!

Digging a little deeper, I found that every place I had a link to my RSS feed (sidebar, post metadata, etc…) these links were being indexed.  And since the  text that is also a link seems to be given a higher ranking by Google, the keyword “RSS” was doing very well!

So, I went and changed the links to my feed to add the nofollow and noindex attributes, and waited.  One thing you will learn about SEO is that changes don’t happen overnight!  After a few weeks, the top keywords on my site were back to useful keywords.

Conclusion

Keywords are a very important since they are how new visitors can find your site.  By assisting web crawlers and leading them to the correct content, you can make your site appear more readily when people search for the chosen keywords.  However, do keep in mind that nothing replaces content.  Just drawing visitors to your site and having them leave disappointed is not the way to go.  It’s important to realize that some search engines will penalize your site if they feel you are incorrectly guiding their web crawler.  So I guess I would caution you, the designer, to ensure that you only use these techniques to help your site appear correctly in searches — or more importantly, to not appear in searches that are completely irrelevant.  RSS Feed anyone?

What is SEO?

SEO, or Search Engine Optimization is the process by which the author of a web page (or blog in our case) organizes and formats their content to make it more accessible to search engines such as Google, Yahoo, or Bing.  This sounds relatively simple, right?  Well, let’s start off by making it clear that there is no such thing as a blog with perfect SEO simply because there is no 100% definition of exactly what “perfect SEO” really entails.  However, there are a few simple things that can go a long way to making sure that your blog is at least getting indexed by search engines.

Some may ask why it’s so important to have search engines indexing our carefully crafted webpages.  The answer is pretty simple really.  If the search engines can find our content and index it, that means that people who are searching Google, or other search engines, can find our content.  This is what is referred to as organic traffic as it’s traffic that the blog has generated without any assistance from you (aside from writing the initial article or post).

Why do we care about Organic Traffic?

Many will argue that organic traffic is one of the most important types of traffic as it means you are reaching readers based on them specifically searching for your content — which means that they are more likely to stick around and read some more.  What’s more, you are reaching new readers which should help to grow readership.  After all, readership is the key to a successful blog!

So officially, how important is this organic traffic?  There are tons of different statistics out there, but I’m going to just ignore them for a minute and tell you my opinion.  While I have a significant number of repeat visitors, a very large portion (over 70% as of this writing) arrive at my blog from a search engine.  Of the people finding my site on search engines, more than half visit a second page on my blog.  Collectively, they spend well over a minute on my site.  While these numbers are good, the ultimate goal is to raise them.  It’s also important to note that the vast majority (over 95%) of search engine traffic is from Google.  Therefore, it seems that focusing on Google’s ranking is the key to success here.

Getting started with SEO?

Unfortunately, there is no magic bullet when it comes to optimizing a blog for search engines.  There are, however, a few steps that need to be taken prior to changing anything on you blog.  The first is to setup some tools to help you better understand how your site is currently viewed by the search engines.  In order to do this, I highly recommend setting up a Google account and signing up for both their Webmaster Tools and Google Analytics.

The easiest way to setup Google Analytics on a WordPress blog is with the most excellent Google Analytics for WordPress plugin by Joost de Valk.  This plugin, and the associated setup page makes it very painless to get started tracking your visitors.  There are also a host of great features such as outbound link tracking and keyword tracking that Joost describes very nicely.

While just as easy to setup, Google Webmaster tools is even more useful for SEO purposes.  It gives the user a list of keywords that appear on your site in order of relevance (meaning how prominence they are) as well as your search engine ranks for popular searches.  This information is invaluable when trying to see how your site is currently portrayed on the web!

Search Queries as shown in Google Analytics

While my current search queries aren’t really all that impressive, you can see how powerful this tool really is.  It shows me the query that my site ranks on, and what position my site will appear in the results list.  Ideally, you’ll want all number 1 in the “Position” column.  While this may give a great representation of what queries will pull up your site, what about keywords?

Top Keywords displayed by Google Webmaster Tools

This is just as powerful, but in a slightly different manner.  From here, you can see the top ranking keywords on my blog.  You can also see the significance of each one.  So, looking at these keywords, you can see that currently, the most significant keyword on my site is “smugmug” which makes a lot of sense since I have written rather in depth about Smugmug vs. Zenfolio here, here, and here to name a few.

After setting up both of these Google tools, do be aware that it may take as long as a month before you start receiving meaningful data.

Where do I go from here?

To start with, it’s a good idea to let these tools start collecting data.  The next thing to do is to perform a few searches on Google to see exactly what pages from your site appear when searched for relevant topics.  If you’re curious to know what pages of your site have been indexed, the best way to do this in Google is to search for ‘site:yoursite.com’ without the quotes.

Searching for all Digitalnotions.net pages in Google

To see the results of the above search, click here.

Over the next few months, I’m going to post more information about optimizing a WordPress blog for search engines.  If you ave any tips or questions, feel free to let me know and I’ll do my best to write about them!

Getting Started with Vector Graphics

While I know that Adobe Illustrator is the premier software for such artwork, the entrance fee of $535 for the Mac version and $577 for the Windows version is simply too steep for something that I’ll most likely just play around with for the time being.  And no, I really don’t know why the Windows version is more expensive.  However, in doing a little searching, I found that Inkscape is a free alternative.  That’s right!  Absolutely free!  And it’s available for Mac, Windows and Linux.

Learning to Draw Vector Graphics

After downloading and installing the software, where do I start?  I was always daunted by this task — believing that it was much more difficult than it really is.  A little searching and I found a site with 35 Inkscape Tutorials some of them are step by step instructional articles, and some are even video tutorials so you can really get a feel for what is being done.

I chose to start with “Creating a Coffee Cup with Inkscape” as it looked like it was well written (it was) and at my skill level (also true).  It took about 30 minutes, and here is my result.  I realize that it’s slightly different than the picture, but I didn’t like the stripes or the handle so I simply omitted those steps.

Overall, I think it turned out quite nicely!  It’s inspired me to continue to mess around with these techniques — I wonder what else I can create?

Here’s where the fun stats. Having done this work, the next step to successful blogging is to get your blog into search engines such as Google. There are two steps to this, both relatively easy. The first is to go to the Google Site Submission page and sign up for your site to be indexed. The next was to sign up for a Google Webmaster Tools account. This allows you to specify a sitemap if you desire and see if there are any errors on your page that prevent Google from properly indexing your page.

Finally, it’s time to wait and allow Google to index the pages. And wait I have! Perhaps I’m being impatient, but after a week I’m having a hard time understanding why I still have no pages indexed by Google! What’s up with that?

And clicking the “Why Not?” icon yields no real help on the subject.

So I guess, in answer to my question of how long it takes Google to index your pages, the answer seems to be more than a week! Come on Google! Get going!

Problems with Firefox 3.5

While the implementation of ICC Profile support released in Firefox 3.5 went a long way toward standardizing the way users see online images which utilize ICC Profiles, there were two major problems.

First, as mentioned by an astute commenter on my last post on this topic, the Firefox team decided to only implement Version 2 of the ICC Profile standard. While this is a huge step forward, version 4 of the ICC Standard has been around since 2005 (from what I could find). Therefore, there are many instances where support for Version 2 is simply insufficient.

To see an example of this, see the International Color Consortium (ICC) official page to test browsers for Version 4 compatibility here.

The second problem with Firefox 3.5 was that on many Windows machines, images containing a Version 2 profile were displayed incorrectly. In fact, they appeared much too dark.

One Problem Solved

Just released today was the latest update to Firefox 3.5, version 3.5.2. This update fixes the second problem discussed above. (See release notes – Bug 497363.) In theory, with this release, the images which displayed very dark under the old version now display correctly.

While I really didn’t know how much of a difference it would make, after installing the update on my Windows machine, the images on my last Firefox post appear much better.

Now, if only they could fix the support for Version 4 of the ICC Color Profiles…

Local LAMP Server

The solution to this is having the ability to develop your website off-line. Essentially, have your own, local server where can muck about till your heart is content without affecting any readers experience. For WordPress development, you’ll need a LAMP server (Linux, Apache, mySQL and PHP). If you’re starting from scratch with your Linux install, you could simply install a Linux Server version. Please be aware that a server install will not come packaged with a nice graphical user interface. Starting with an existing workstation install, it’s a bit more difficult. Ubuntu has attempted to make it as easy as possible by creating what they call “tasks” which are essentially meta packages containing what you need for a specific type of installation. This allows the Lamp Server task to be installed on top of your existing workstation installation. Since I wanted to be able to use my Ubuntu box as normal, but have the LAMP stack available, this is what I did.

Ubuntu 9.04 Jaunty LAMP Installation

Using the above “tasks” system, the following command, executed from the command line will do the trick!

sudo apt-get install lamp-server^

According to the Ubuntu Documentation, the ‘^’ is essential.

In the middle of the installation, you will be asked to set a root password for your SQL installation. Pick whatever you want, but do ensure it’s something that you can remember!

After grinding away for a bit, it should finish and you should have a fully functional server on your machine.

Testing Apache Installation

The first thing to do is to test your Apache installation. Apache is the web server and is responsible for serving up http requests to your browser. To test it, simply navigate a web browser to http://localhost/. It should look like the following image.

This would be the default response from the Apache server. Congratulations — your Apache works!

Testing PHP Installation

For those unfamiliar, PHP is a scripting language designed to create dynamic web content. (Wiki Info) PHP is necessary for developing WordPress themes and plugins. In fact, WordPress uses a MySQL server to store data (posts, comments, etc…) and creates the dynamic pages the user sees using PHP.

In order to test your local PHP install, it is necessary to create a simple .php file. From a terminal window, execute the following command:

gksudo gedit /var/www/testing.php

Since you’re trying to write something to a administrative area, you’ll be asked for your root password. Once you have the file open, insert the following line of PHP code and save it.

<?php phpinfo(); ?>

Back at the terminal prompt, restart the Apache server by running the following:

sudo /etc/init.d/apache2 restart

Back in your browser window, navigate to http://localhost/testing.php. You should see a window similar to the following:

Still with me? If so, you’re good to go and can install WordPress locally and begin developing!

Google Analytics — Tracking Website Visitors

With that said, most of us are tracking, to some degree or another, the people visiting our sites. And for most of us who don’t want to invest huge dollars into a custom analytics system, this means we’re using Google Analytics.

This tool is great. It tells me where my visitors come from (48 different countries over the past month), how long the average visitor spends on my site (around 2 minutes and 18 seconds) and what search keywords people are using to get here. It also tells me that 76% of my traffic is from people searching the Internet and just stumbling across my site. Plus, hundreds of other statistics that can be really useful of you know what you’re looking for.

Another key use for Google Analytics is to track advertising campaigns. Essentially, if you’re paying the big bucks to advertise your site, you want to know how many visitors are being generated by those ads. This allows you to track how much money you’re spending per click to your site.

Tracking Social Media Campaigns

So how does this apply to me? I’m not spending tons of money on advertising. However, I am attempting to spread the word about my new blog updates. Therefore, when I update my blog, I alert people on my Twitter channel. This is fine and I do know that some people are clicking on these links. However, how many people?

This is where Google Analytics comes in. If you include tracking information as arguments to the URL you spread around, you can track how many people are visiting and where they’re coming from.

For example, if a page has the original URL of: http://digitalnotions.net/my_clever_title/. I could just pass this link around and watch the visitors roll in. However, looking through the Google Analytics Documentation, you find that you can write the link as follows:

http://digitalnotions.net/my_clever_title/?utm_source=twitter&utm_medium=referral&utm_campaign=Tweets

This works great and will log the visit under the Campaign “Tweets”, log the Medium as “referral” and log the source as “twitter”. This makes it very easy for the blogger to see exactly where their traffic is coming from. But there are a couple issues here.

First, both of the above URLs given above link to the same page. This is very bad for search engines. They don’t like to see two URLs with the same content. What’s more, the search ranking for each page will be lower since it might be shared between two or more URLs. Really not good since this will make my pages rank even lower.

This problem doesn’t just apply to campaign tracking. WordPress, by default, has archives for posts sorted by Author, Category, Tag, etc… One post will appear in all of these different archives and, have a different URL depending on where it appears. Again, not good.

Canonical <Link /> Tag

Due to the above problems with search engines indexing duplicate content, Google recently published this article about a new tag being used to help solve this problem. The idea is that if you specify a canonical URL (the URL you want indexed), search bots have the option of indexing that URL instead of the problematic, argument riddled URLs.

Unfortunately, many search bots aren’t using these correctly. Dave Naylor, a leading SEO and web developer, noted this problem here. It seems that he’s having all sorts of indexing problems by Google, Bing and Yahoo — the big three search engines.

This isn’t good!

Solution Options

This isn’t a trivial problem for those attempting to perform any sort of Search Engine Optimization (SEO) on their site. The web design website jane and robot discusses the possible options in this post. This article does a much better (and more detailed) job of discussing all the possible issues and solutions.

My Solution: Hash Tags

So. What exactly is a hash tag? Essentially, hash tags allow a web designer to link directly to a specific location on a page. More information can be found here.

The beauty of this is that search engines don’t index hash tags since they are supposed to link within the page. Therefore, anything specified in a hash tag is completely ignored. Good for search engines, and in this case, good for us.

So, what I want is a URL that looks like this:

http://digitalnotions.net/campaign-tracking-google-analytics/#utm_source=twitter&utm_medium=referral&utm_campaign=Tweets

Notice the part in bold? Since all my tracking data is encapsulated in a hash tag, I no longer have to worry about whether or not the URL is indexed properly in search engines. However, there is the problem that Google Analytics doesn’t look at hash tags by default. Bummer!

The obvious solution is to write some form of Javascript to parse the hash tag and report the campaign information. However, I’m not that good with Javascript. So I did what I’m good at… reading. Looking through the Google documentation, there is an option to tell Google Analytics that it should read the hash tag! Could it really be this simple?

Google’s _setAllowAnchor Function

According to the Analytics documentation (here), it is possible to use the _setAllowAnchor() which “Allows the # sign to be used as a query string delimiter in campaign tracking.” Please note. As of writing this, their example on the help page is incorrect. It instructs the user to replace the ampersands with the ‘#’ operator. From what I’ve found, this doesn’t work. Instead, replace the initial ‘?’ with the hash sign and everything seems to work okay.

To implement this, find the following code on your site.

var pageTracker._gat._getTracker(’UA-xxxxxx-x’);
pageTracker._trackPageview();

The ‘UA-xxxxxx-y’ string is your unique Analytics Key (identifier to tell Google what site is being tracked). Please note that on most WordPress themes this code is found in the footer code file. Change these lines to:

var pageTracker._gat._getTracker(’UA-xxxxxx-x’);
pageTracker._setAllowAnchor(true);
pageTracker._trackPageview();

I’ve been experimenting with this now for a while and it appears everything works as expected! If I have any more issues (or successes), I’ll follow up this post with more details.

So What is an ICC Profile?

Books have been written about color management.  In fact, numerous websites have been created, articles written and arguments waged about how color profiles and color management should affect the everyday user.  Suffice it to say that it’s no small or simple matter.  I fully expect many to disagree with what I’m about to say.  But please stay with me to the end, and feel free to comment if you have an opinion.

With that disclaimer out of the way, I feel it’s somewhat appropriate to step back and give a bit of an overview to color management so it is clear just where ICC profiles fit into this whole topic.

An ICC Color Profile is a description of the color space used to encode the color data of an image.  Sounds cryptic?  To understand this concept, we have to step back and understand a bit more about digital images.

What is a Digital Image?

I know what you’re going to say.  This is a trick question — a digital image is an image that resides on a computer, or some form of digital device.  And in that statement, you’re 100% correct.  But it’s important to understand just how that image is stored.  In it’s purest form, an image is made up of a series of numeric values each representing a portion of the image.  This numeric data is translated into real-world colors by the image viewing application.  Simple?  Sort of.  The issue is, there are different color spaces, or translations between the numeric data and the real-world color.  What this means is that if the application creating the image is using one translation, and the application viewing the image is using a different translation, the image will likely look very wrong!  Here’s an example:

The above image on the left looks relatively correct.  The one on the right?  Not so much.  What went wrong?  Your image viewing software (a web browser in this case) didn’t know what translation was used when the image was saved, and therefore, translated the color data of the image incorrectly.

So, how does someone ensure that this doesn’t happen to them?  How can an application know how to decode the data?  Simple.  By embedding a ICC Color Profile in the image which describes the color space used to create the image.

But wait!  It’s not so simple…

Sadly, it’s actually much more complicated.  In an ideal world, image creation software and image viewing software (in all forms) would understand and respect the embedded ICC Color Profile.  Unfortunately, this isn’t even close to being true.  In fact, most software that isn’t written for graphic designers or professional photographers simply ignores these profiles.  Shocked?  I was too when I started becoming more involved with digital photography and started realizing just how hard this color management thing was!

The annoying thing about color management is that each computing platform and each software application plays a role.  What this means is that Internet Explorer running on Windows may have completely different color profile handling capabilities than Firefox running under Windows.  Bring in Mac or Linux systems and the issue gets even more confusing and uncertain.

To start with, is your browser color profile aware?

If the center image is the same as the image on the left, great!  Your browser respects and understands ICC color profiles.  If the center image looks more like the image on the right, you are using a browser which does not support ICC color profiles.  If you’re running the newest Firefox version 3.5, the center image should look like the good image.  Now try that with another browser?  What are the results?

I’ve only scratched the surface of ICC Color profiles, but stay tuned.  I’m planning on writing more on this topic over the next week or so!