Archive for the ‘Blog’ Category

Importance of using 301 redirects

Tuesday, July 6th, 2010

You, my friend, must stretch the boundaries of your imagination and put yourself in the shoes of a web developer. You have been contracted to redesign Bob “The Sniper” Houlihan’s surprisingly popular History of Shoelaces site. During this process, you’re revamping his page titles, URLs, and overall site structure. Bob doesn’t want to lose his current place in search engine rankings in exchange for the long term success and usability improvements that you promise.

Fast forward a couple months and the site is ready to go live. You have the name server repointed to the new location. Everything works great… but you’re not done. It’s time for 301 redirects. 301s just tell the browser that what you’re looking for isn’t here, but it has moved to this other specified location. If you’re on Apache and able to use an .htaccess file, this is what a 301 redirect will look like:

redirect 301 /Before_Shoes.html http://www.thehistoryofshoelaces.biz/before-shoes

This tells the server that if Before_Shoes.html is requested by the browser, send them to http://www.thehistoryofshoelaces.biz/before-shoes instead. The most obvious reason to do this is so your site doesn’t serve up a 404 error. The user could possibly think that the site is down permanently. Any pages that are renamed, relocated, or content that is moved needs to be taken into consideration when creating 301s.

But, it’s not only people using the internet. There are also bots used by search engines. The 301 part speaks to them directly, saying this page has been permanently moved (not temporarily, that’s important and covered later). This helps new/moved pages to be indexed more quickly, get those old URLs replaced in the index, and maintain your page rank within the search engine.

But why 301 of all numbers? That, my friend, relates to the ubiquitous but little understood HTTP. Part of HTTP’s job is to serve up status codes when responding to a request which can be as simple as typing in a web address in your browser. Part of this response is the status code. Each status code is a three-digit number beginning with any number from 1 to 5 with 1 representing Informational responses, 2 a success, 3 redirection, 4 a client error, and 5 a server error. You’ve probably seen “500 Internal Server Error” or “404 Not Found.” You probably haven’t seen a 302 code which is a temporary redirect telling bots that the page will likely reappear at a later date. 301 redirects do not provide this likelihood. Go here [link to complete list] for a complete list.

Preparation for programming websites

Tuesday, July 6th, 2010

The programming phase of website development is usually the longest one. Before putting that design into code form, I suggest several preparations.

Know what you need

Knowing what you’ll need is important because it will help in mapping out the time frame. Of course, you’ll have HTML and CSS to work on, but you’ll probably have some dynamic portions of the site as well. Will you have to use Javascript or PHP? Almost undoubtedly. What about Flash and Flash components? What about widgets, APIs, and other tools?  Once you know what you need, you can begin to see what portions of the project will take more time than others, whether that’s research or programming.

Figure out your divs

Now it’s time to figure out your div tags. Looking at your potential site, you probably have several different page designs. Of course, each of these page designs will have a different coding structure. Repeatable code is the coders best friend. You can spend less time tweaking margins and padding and more time tackling the actual layout. Also, a consistent and clear naming convention is important, not only for you but also for anyone who looks at your code later. The most popular high level div naming convention seems to go wrapper > container > content. But, use what works for you while making it as understandable as possible.

Figure out your CSS

Using the divs discussion as a jumping-off point, many of the same rules apply to CSS programming. Clear and consistent names are important, and this is where your planning reveals its effectiveness. Your site-wide, high-level styles should not apply to just one page. If that has happened, planning has not been adequate. If your adding classes to each paragraph tag, for instance, you decided on the wrong highest level style for your paragraphs. It’s time-consuming and sloppy to tack a class onto any element that doesn’t fit the design or your preference. Plan your styles out beforehand. Sometimes this means making a “bold” class. Sometimes this means making a high-level item bold and removing the “boldness” on a per element basis. The latter option is only applicable if most elements of that kind are bold on most pages, and you only need to remove the bold attribute a few times.

CSS page organization is your preference, but make sure you have one. It makes finding and editing your styles later much easier. You can have your main, site-wide styles at the top, then separated according to webpage as you work on each one. Many people separate typography, forms, headers, and other elements by their aforementioned category. It’s up to you. This may go without saying, but label each section with a commented header. You can make it as decorative as you desire, maybe an ASCI flower is your style.

Programming for different browsers (warning: could get technical)

Just wanted to mention this quickly, you will have widely divergent looks in many web browsers (usually Internet Explorer). I try to blend preparation and procrastination for these bugs or inconsistencies. Certain bugs can be foreseen, and some of those are worth preparing for such as a div’s tendency to flatten if it contains floated elements or IE6′s inability to understand the hover pseudo element outside of a tags. Basically, if it’s not going to distract you from your main goal of a workable website in as timely a fashion as possible, a short detour to circumvent a later time commitment to fixing a bug is not a bad idea.

Multiple loops on one page in the same category

Tuesday, July 6th, 2010


Objective: Display two sets of data on one page both of which will be from the same category.

We are using Flutter for this example. Flutter uses write panels to create posts. Whenever a post is added through a write panel, it is automatically placed in a specific category. Within this category are two types of posts, one is an ongoing opportunity; the other type has an expiration date. For the first type, we can do a database query checking whether one piece of information exists or not. These days when you’re using WordPress and you want to access database information while in the Loop[codex link], you use the query_posts function [link to codex].  When you add the Flutter to the mix, you have new host of parameters to add to query_posts.

Recently (a couple versions ago), WordPress added new parameters related to meta values or custom fields. So, you can access Flutter custom fields through these meta values. These parameters are all we need for the first set of data that displays ongoing opportunities. However, you can only access one key/value [link to PHP Array page] pair at a time. That throws a small wrench into things later. For now, this is all we need:

<code>
<?php
$thequery = “meta_key=ONGOING-OPPORTUNITY&meta_value=true”;
$pageposts1 = query_posts($thequery);
?>
</code>

In the backend under the Flutter write panel we are accessing, is a checkbox labeled “ONGOING-OPPORTUNITY.” That is the key of our key/value pair. We are simply determining whether it is checked or not i.e. true or false.

I’ll explain why we use the variable $pageposts1 later. To display our recently queried data, do this:

<code>
<?php
foreach($pageposts1 as $post):
?>
<tr>
<td><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></td>
</tr>
<?php endforeach; ?>
</code>

Troubleshooting Tip: Echo the query which should give you SQL code. Use the SQL option in your database to run the query to see if anything is returned.

Now for the more complicated part. We are going to overwrite the previous query so that it does not interfere with our work going forward. We want to exclude the previous posts (so unchecked ONGOING-OPPORTUNITY) and include all those with expiration dates that are yet to have passed. Here’s what we have:

<code>
<?php
$thequery = “meta_key=ONGOING-OPPORTUNITY&meta_value=false&customorderby=x_OPPORTUNITY-EXPIRES&order=ASC”;
$pageposts2 = query_posts($thequery);
?>
</code>

Here you see that ONGOING-OPPORTUNITY is false, but we have also added a Flutter-only parameter “customorderby=x.” We are custom ordering by another Flutter field called OPPORTUNITY-EXPIRES. This is a date field. Remember that. The order parameter set to “ASC” merely makes upcoming dates to appear at the top before dates further down the road.

The next step is preparation for displaying the content.
<code>
<?php
$fd = 0;
foreach($pageposts2 as $post):
$expire_date = get(‘OPPORTUNITY-EXPIRES’);
if( (date(‘Ymd’, strtotime($expire_date))) >= (date(‘Ymd’)) ) {
$fd++;
?>
</code>

Lots to look at here. I’ll explain the variable $fd while I’m explaining $pageposts1. $expire_date uses a Flutter function to “get” the value in the OPPORTUNITY-EXPIRES field. The next line begins an if statement that first converts $expire_date to a manageable format then compares it to today’s date. So, if the expiration date of the post is greater than or equal to today’s date, it will be displayed (e.g. 20100408 [April 8, 2010] is greater than 20100301 [March 1, 2010]). We now just need to show our results and put our date back into a readable format.

<code>
<tr>
<td align=”left” valign=”top”><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></td>
<td align=”left” valign=”top”><?php echo date(‘n/j/Y’, strtotime($expire_date)); ?></td>
<?php } endforeach; ?>
</code>

And there it is. We have one more contingency to account for, and that is empty queries. Here’s where $pageposts1 and $fd come into play.

<code>
<?php
if(($pageposts1 == 0) && ($fd== 0)) { echo ‘<p>No current funding opportunities were found.</p>’; }
?>
</code>

$pageposts1 is a count of the first query; $fd is a count of the second. They are counted differently because the second query has to have the expiration date compared to today’s date. So $fd, instead of counting every post retrieved by the query, only counts those that will be displayed based on the aforementioned dates.

And that’s all there is to it. Here’s the full code:
<code>
<?php
$thequery = “meta_key=ONGOING-OPPORTUNITY&meta_value=true”;
$pageposts1 = query_posts($thequery);

foreach($pageposts1 as $post):
?>
<tr>
<td><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></td>
</tr>
<?php
endforeach;

$thequery = “meta_key=ONGOING-OPPORTUNITY&meta_value=false&customorderby=x_OPPORTUNITY-EXPIRES&order=ASC”;
$pageposts2 = query_posts($thequery);

$fd = 0;
foreach($pageposts2 as $post):
$expire_date = get(‘OPPORTUNITY-EXPIRES’);
if( (date(‘Ymd’, strtotime($expire_date))) >= (date(‘Ymd’)) ) {
$fd++;
?>
<tr>
<td align=”left” valign=”top”><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></td>
<td align=”left” valign=”top”><?php echo date(‘n/j/Y’, strtotime($expire_date)); ?></td>
<?php
} //end if
endforeach;

if(($pageposts1 == 0) && ($fd== 0)) { echo ‘<p>No current funding opportunities were found.</p>’; }
?>
</code>

How do PPC campaigns affect organic SEO for B2B websites?

Wednesday, June 2nd, 2010

Have you ever wondered if your B2B website could use it’s PPC ad campaign to boost the company’s organic search engine placement?  The answer is…Yes it can.  Here are a few tips that will directly affect your website’s SEO by using a PPC campaign.

DRIVING PROACTIVE LEADS

Even though you have spent a good amount of time setting up your PPC campaign, testing keywords, and developing relevant ads, it doesn’t only benefit your paid advertising.  You have found your PPC keywords that are directed straight at your potential customers in your specific industry and those keywords and phrases have proven to be the best for your business, now you can put those keywords into the content of your web site and blog for search engines to index and be sure that you are targeting your proactive customers as much as possible!

WHILE YOU’RE WAITING

Organic SEO takes a long time to work compared to PPC ad campaigns.  Even though organic placement usually yields a higher ROI then PPC, running a PPC campaign as you are building up your organic SEO will drive proactive customers to your site which could potentially lead to backlinking, blogging, or word of mouth advertising.  All of which increases relevant  traffic to your site and aids in  your organic placement.  Since these customers have used your specifically targeted PPC ad to find your website, you can feel more confident that the users linking, blogging and talking about your site are very relevant to your industry.  Which, by the way, search engines love.

BRAND RECOGNITION

Another big advantage of running a PPC campaign for B2B companies is brand recognition.  While you are building your organic placement with great content, back links, reciprocal links, blogs, and keywords or phrases, your PPC ads are saturating the market with your brand.  Brand recognition is one of the best ways to boost organic relevancy.   It is proven that having high placed PPC ads as well as high organic placement is far better than having just high organic results or PPC ad placement.  A lot of times if users see your PPC ad and recognize your company name when you do come up organically, they will be more inclined to click on your website as opposed to the one right above you in the organic listings.
When you do eventually make it up the ranks organically in search engines, there are still many benefits to continue running some sort of PPC advertising campaign.  Link building through qualified PPC users and brand recognition are just a couple.

PPC AND ORGANIC ADVERTISEMENTS

There are also different forms of advertising.  If your company is showing up organically for a specific term, your description may not attract certain proactive leads.  If, however you are showing up in a PPC ad for the same search query and your PPC ad contains a slightly different way of advertising your company, that may attract that person to you.  It’s all about saturating the market with your presence.  On the other hand you may not come up organically on the first page for certain other relevant searches but by running a simple PPC ad directed at that search, you will!  You can now be present for all search queries that are relevant to your company.

As you can see, running a PPC campaign can be used to compliment your organic efforts in a variety of ways, thus leading to higher search engine recognition and many more proactive leads.  Using PPC for B2B companies if done correctly  can be a wonderful way to directly target customers, spread brand awareness, and help develop your SEO by taking much of the guess work out of finding the right content for your organic marketing strategies.

How to get your images in Google Images

Monday, May 24th, 2010

Google images can really drive traffic to your blog or website.  There are many factors that go into indexing images and a few of them are fairly easy to do.  Here are a couple things to keep in mind.  We’ll use one of my Photographs of a bride from a wedding I shot in Las Caletas, Puerto Vallarta as an example.

 


 

Wedding Photograph Las Caletas Puerto Vallarta
Bride standing on the rocks of Las Caletas, Puerto Vallarta on her Wedding Day



Descriptive Text and Captions

- Use descriptive text around the photo in the content of your blog post or website as well as around the image in the HTML code.  You can see that I have done that above in saying:

“We’ll use one of my Photographs of a bride from a wedding I shot in Las Caletas, Puerto Vallarta as an example.”

as well as with the caption underneath.

Image Titles

Be sure to title your images properly.   A good example would use relevant keywords describing the image such as:  “Las-Caletas-Puerto-Vallarta-Wedding-Photo.jpg” as opposed to a bad one such as:   “retouch_001.jpg”

Alternate Text

Using alternate text is also important for search engines.  Once again you should use relevant descriptive text.  Don’t make it too long though.

<img src=“Las-Caletas-Puerto-Vallarta-Wedding-Photo.jpg” alt=”Wedding photography Las Caletas Puerto Vallarta”/>

While the following example utilizes a relevant keyword, it is too general and lacks descriptive long tail keywords that make it relevant to search engines and in turn web users searching for an image like this.

<img src=“Las-Caletas-Puerto-Vallarta-Wedding-Photo.jpg” alt=”wedding”/>

Anchor Text

When linking to an image be sure to use anchor text to help describe the image as well.  Using descriptive anchor text not only lets your readers know that they are going to but also lets search engines further determine the importance and relevance of the image or page you are linking to.  Here is a good example of anchor text.

“Check out more of my Las Caletas Wedding Photographs like this one”

But a common example of how not to do this would be.

“For more wedding images of las caletas click here

Just as a side note, here is an example of how WordPress actually incorporates the Title, Alternate Text, Caption and Description when you upload a photograph into your media library.

Wordpress Image upload SEO

There are many other SEO practices you can use to further make your images more prominent on the web.  These are just a few.  Look at Brent D. Payne’s SEO for Images pdf for more information on other image SEO tips and check out Brent D. Payne’s “The thoughts of a bald SEO guy for more interesting Posts on Search Engine Optimization.