Valid HTML Code is Better Than Invalid Code

Valid HTML code will look better more places, function as designed more often and be well liked by things like search engines. The W3C Markup Validation Service is a good one since they are the organization that maintains the specifications.

Badge for Your Site Your Visitors Can Use on Their Sites

How to make a "badge" available to others who like it and want to display it on their sites/blogs.

1. upload the badge so it can be accessed by everyone on the internet
2. create code that people can use to use the badge on their sites, like this: <a href="http://www.example.com/"><img src="http://www.example.com/badge.gif" alt="a badge"/></a> where example.com is your site, and the "a badge" is a short text alternative text describing the badge for those who do not load or see the image
3. tell the people who want to use the badge about the code

Conditional Comments in Internet Explorer

Conditional comments allow you to have one block of code for some versions of IE and a different block of code for everything else. I've found that IE 5.2 for mac, for instance, does not support conditional comments, but IE 5 through IE 7 on windows seem to support conditional comments.

This code loaded in a browser will tell you whether or not it supports conditional comments:

<!--[if IE]><p>You are using an Internet Explorer that supports conditional comments.</p><![endif]-->
<![if !IE]><p>You are not using an Internet Explorer that supports conditional comments.</p><![endif]>

I recommend using it on live sites sparingly.

Redirecting Web Pages Using PHP

You can redirect the root level of your site http://www.example.com/ to a lower level webpage like http://www.example.com/directory1/directory2/filename.html ) in many ways.

One way to make such a redirection, if you have a Linux hosting plan with GoDaddy, is to make a text file named "index.php" and have the file contain:

 <?php
//Redirect browser
header("Location: http://www.example.com/directory1/directory2/filename.html");
?> 

Place it in the root of the "web/" directory in your hosting space and, barring a lot of complex configuration changes that may have been made previously, it should gentle redirect web visitors from http://www.example.com/ to http://www.example.com/directory1/directory2/filename.html .

Canonical Link Element

There is a Google Webmaster Central blog post about the presentation about canonical link elements made at SMX West and talked through in a video:

Twitter With Full URLs

When twittering, or otherwise posting a URL online, putting the http://www prefix on the web address will automatically be recognized as a URL and be made a link by various systems (e.g., Google's spiders, twitter's web interface, tweetie, etc.).

Facebook, for instance, automatically recognizes a full URL and makes it a link almost everywhere, and includes the page description and image in messages and wall posts. You can customize the default image, title and description that Facebook sharing uses too.

Top 6 Online Writing Tips

Online writing is different than print writing. Make writing for the internet concise, clear and actionable. Readers prefer short articles that help them get something done; readers don't read the whole text online (only 20-28% of an online writing is actually read).

There are six key ways to write for the internet:

1. Scan-Ability Is Readability Online
2. Passive Voice May Help SEO And Readability
3. Titles, Subjects And Headings Need Inverted Pyramid Extreme
4. Vocabulary and Keywords Should Be Old Words Placed Carefully
5. Acronyms And Abbreviations Need Mark-Up
6. Numerals Are Better In Online Writing

Online Writing - Acronyms And Abbreviations Need Mark-Up

SEO and accessibility benefit when the meaning of acronyms and abbreviations are clearly spelled out. Instead of leaving search engines to guess which meaning of an acronym you intend, tell them. Using HTML to identify acronyms and abbreviations makes pages more accessible to non-visual browsers as well.

Google indexes acronyms more effectively when they are marked-up properly; Some say they use the acronym tag ...frequently and I have a page that responds to a keyword that only appears in the title attribute.

Even more vital is identifying acronyms and abbreviations when they have many different meanings. For instance "NASA" is both the National Aeronautics and Space Administration and the National Auto Sport Association, or "LA" in the following:

I have a friend from New Orleans, LA who now lives in LA.

Which is marked-up with this syntax:

I have a friend from New Orleans, <abbr title="Louisiana">LA</abbr> who now lives in <acronym title="Los Angeles">LA</acronym>.

In all cases making the meaning of acronyms and abbreviations clear makes for clear online writing.

This is part 5 of Top 6 Online Writing Tips
Read parts 1 2 3 4 5 6

Atom verses RSS Feeds

The Case for Atom

Embracing Atom now gives you broad compatibility with any standards based system, and in the future should keep your feeds adaptable and compatible with future technologies and tools.

Feeds in the Atom Syndication Format (atom 1.0) will have the widest possible uses, compatibility and longevity of any current syndication feed format. Atom is already a widely supported syndication format, and in the future a full-fledged protocol, that is already in development, ...for using XML (Extensible Markup Language) and HTTP (HyperText Transport Protocol) to edit content... an application-level protocol for publishing and editing Web resources belonging to periodically updated websites (from
The Atom Publishing Protocol Memo).

Video Intro to the Atom Publishing Protocol (AtomPub):

RFC5023 details the Atom Publishing Protocol.

Atom, not RSS

[Atom has] been through a standardization process organized by an international standards body and there is an RFC that describes exactly what an Atom feed is and how you should parse it.

RSS is only "standard" in the sense that there are lots of people using various flavors of XML that claim to be RSS. There isn't even agreement as to who "owns" RSS 2.0 - Dave says he does, and the RSS Working Group says they do. Now there are 2 versions of the same "standard" floating around

(from Jason Lefkowitz's comment on technologyevangelist.com).

Support iPhone with YouTube Videos

You should be supporting iPhones with the YouTube videos on your web site. Link to the YouTube video page as a standard link, don't only embed it. iPhones have a YouTube application that will be launched by a link on a web page to the YouTube video page, but iPhones don't yet support flash, so they can't display the embedded videos right on the page in Safari, yet.

Including the link with also help search engine crawlers find the videos and better understand what is on your web site. Here's an example of how to support the iPhone when embedding YouTube Videos.

Yahoo Opened Their Search Technology to Third Parties

BOSS allows developers to submit queries (and their associated parameters) via an API to retrieve up to 50 web, image, news, or spelling results in XML or JSON format at a time (from TechCrunch).

IM with visitors - Make a Google Talk Chatback Link

To let visitors chat with you, using Google talk, create a Google Talk chatback badge and place it on your website, blog or profile.

You can customize what the badge looks like, from just a link, all the way to a fully built out iframe. You need a Google Talk account to use this (you probably have one if you use Gmail).

Pretty Facebook Sharing

When someone shares a page on Facebook, the webmaster can specify the title, the description and the default thumbnail image.

The title doesn't have to be the same as the the page's title tag, and is specified with:

<meta name="title" content="different page title"/>

The description is taken from the standard description meta tag:

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

The thumbnail used for Facebook sharing, and other places too, can be specified with:

<link rel="image_src" href="[your thumbnail's web address]"/>

Place the code in the head section of the web page replacing "[your thumbnail's web address]" with the URL to your thumbnail image, and both the title and description with what you want to have appear when the item is shared on Facebook.

Google Webinar on Tools, Analytics and Optimizer July 8th

Google Webinar July 8, 2008 @ 9 am pt on Google Webmaster Tools, Google Analytics, and Google Website Optimizer.

July 10 Update: It's now online and available for replay

Title Attributes and Search Engine Optimization

Title attributes in link tags improve user experience and make sites more accessible to screen readers and other browsers. It seems that search engines may consider the title attribute in determining the ranking of the site being linked to in the link tag, but to a very small degree. As with most SEO decisions, improving usability and user experience will likely improve rankings in the long term since search engines continue to hone their algorithms to reflect how usable sites are (among other things).

Aside from being a usability best practice, it's worth noting that Target was sued for not making their site accessible, and that even if web publishers are not required to comply with the Americans with Disabilities Act, it's a good idea that serves both visitors with disabilities and non-visual browsing situations in the future (e.g., various mobile applications).

Server Response Time Affects Ranking and User Experience

The faster your server responds, the better. Load time affects both user experience and how search engines evaluate your web site. Elements of a page's load time include many things, like:

• server response time
• file size of html, image, stylesheet, scripts and other external files
• the user's network connection and location

Search engines factor load time into how they rank pages. Google includes load time into its rankings and server response time impacts load time. A page of any size can only be loaded after the server responds to the browser's request.

A faster server response will mean the page loads more quickly for the user, and that affects how comfortable and how much control a user feels while browsing the web. Visitors are more likely to stay on a site that loads quickly. Since 0.1 seconds is the limit for users feeling that they are directly manipulating objects in the UI Jakob Nielsen, Response Time Overview), every moment counts.

Blogger 'Share on Facebook' Code

If you have a blogger blog, and want your visitors to easily share your posts with their facebook friends, you can make blogger automatically place a 'share on facebook' link at the end of each post. Add this code after the body of the post:

for layouts (in the "Edit HTML" pane with the "Expand Widget Templates" check box checked):

<b:if cond='data:post.url'>
<br/>share <a expr:href='data:post.url' title='permanent link'>this</a>: <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'>facebook</a>
</b:if>

for classic templates:

share <a href="<$BlogItemPermalinkURL$>" title="permanent link">this</a>: <a href="http://www.facebook.com/share.php?u=<$BlogItemPermalinkURL$>">facebook</a>

and you'll also have a permalink before the 'share on facebook' link. You can make facebook sharing look good: specify the picture, title and description facebook will use; apply the tips on your post pages.

Where to put the code: It depends where you want the share links to appear, probably below the post. Likely after the <$BlogItemBody$> for classic templates and somewhere in the <div id='main-wrapper'> code for layouts. The specifics depend on your template/layout and your preference.

You can also add a link for sharing and saving for other social networking and social bookmarking sites too. If you'd like the code for that, please read the comments.

Sitemap Ping Submission

When your sitemap is updated, these are the URLs to ping the search engines (replace [your sitemap web address] with your URL):

Google

http://www.google.com/webmasters/tools/ping?sitemap=[your sitemap web address]

Yahoo

http://search.yahooapis.com/SiteExplorerService/V1/updateNotification?appid=YahooDemo&url=[your sitemap web address]

MSN Live Search

http://webmaster.live.com/ping.aspx?siteMap=[your sitemap web address]

Ask

http://submissions.ask.com/ping?sitemap=[your sitemap web address]

moreover

http://api.moreover.com/ping?u=[your sitemap web address]

According to the sitemaps protocol, the URL to submit a sitemap to a search engine is supposed to be:

<searchengine_URL>/ping?sitemap=sitemap_url

but many search engines don't seem to actually accept ping submissions this way.

Robots.txt Validator

To affect what automated visitors see when they visit your website, you can use a robots.txt file. You'll need to be able to create a file at the root level of your web site. You can use a standard text editor to make you robots.txt file (e.g., TextEdit, Notepad, etc.).

You may want to check the syntax of your live robots.txt file, the one on your site now, using a robots.txt validator. Robots.txt validtors can be very useful to verify you've set your robots.txt file up to do what you really want it to do. It helps reduce human error, especially as the file gets larger.

Remember that while web robots (search engine spiders and such) often do obey the instructions they find in robots.txt files, a robots.txt file is not a security measure. Robots.txt files are your suggestions about what machines should and should not access, they won't control who or what can access anything on your web site. To actually restrict access to your site (or just certain directories) you can often set up authentication, authorization and access control using a .htaccess file.

CSS Cheat Sheet

A handy cheat sheet for CSS that will print out on one page (on most systems).