5 Simple Files That Will Make Your Website Pop

August 19th, 2012 Leave a comment
Like the article?
5 Simple Files

These days, with everyone so wrapped up in social marketing, search engine optimization and other forms of website promotion, it is easy to forget that there are some simple ways to make your site stand out. In this article, I will discuss some of the lesser-known and little-used ways that you can make your website pop with just a few files. They are easy to use and understand and you can add them to your own site right away to start seeing the benefits. None of these are an absolute must, but they do help look professional at the very least, but in most case, the benefit is larger than that.

Robots.txt

The purpose of the robots.txt file is to let search engine crawlers know which parts of your site you want indexed and which parts are off limits. It is a great way to opt out of having sensitive areas of your site added to the index. Since we have talked extensively about this one in a previous article, I won’t get too in-depth now. Go check it out if you want more information on how it works.

The benefit of having a robots.txt file is that it makes your site appear more accessible and professional to search engine crawlers, thus improving your ranking in the results. Since it is really easy to use and set up, creating one for your site will be a snap.

Favicon.ico

This small icon file is short for “Favorites Icon” and is a small image file for your site. Most people know this as the little picture that shows up in the URL address bar of the browser or in their bookmarks list when they add the URL. This is an excellent way to add some personality to your site or do a little branding. Since every major browser supports the favicon.ico and they are really easy to make, there is no reason not to have one.

Creating a Favicon File

To create one of these little icon files you will need a graphics editing program that can save into the .ico file format. IcoFX is a free tool or you can use a site like Converticon which takes a PNG, JPEG or other graphic file and converts it to an ICO.

Usually these files are 16 X 16 so that it is the same scale that it will be when displayed in the browser. There isn’t really an “install” process for these files; simply save the file as favicon.ico in the root directory of your web server. The browser will look there by default to see if you have the ICO file and if so, will apply it to the address bar and bookmarks section if necessary.

If you don’t have access to your root folder and you want to add a favicon anyway, you can add a little HTML line to your HTML documents that lets the browser know where to find it. This line goes in the <head> section of your HTML document.

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

Favicons and Apple

Apple devices such as iPod, iPad and iPhone can use a version of the favicon file that can be used to display on the Home screen. These icons should be 57 X 57 with 90-degree corners to look their best. To add one of these, use the following HTML in the <head> section of your document:

<link rel="apple-touch-icon" href="images/icon.png" />

This way, if users want to store your site on their Apple device, there will be a nice icon with your logo or other design to help you stand out.

Sitemap.xml

The site map file kind of goes with the robots.txt file. The robots.txt file tells search engine robots where they are not supposed to go and the sitemap.xml file lists your site structure and pages, which can help the crawler robots get around. By default, crawler bots will look for this file in the root directory of your website.

This file can also be used to submit your site directly to search engines so they will know how to navigate the different areas you have available before they get there. Here is a basic site map file:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url><loc>index.htm</loc></url>
     <url><loc>contact.htm</loc></url>
</urlset>

The first two lines explain to the browser that it is an XML file, encoded in UTF-8, but after that you are free to add your page locations. Each URL needs to be enclosed in the <url> and <loc> tags to ensure the file can be properly read. Like most things on the web, there is a governing set of standards and protocols for sitemaps, which can be found here: http://www.sitemaps.org

Like with the favicon, if you do not have root access to your website, you can add the following line of HTML to the <head> section of your document to let browsers know where your sitemap resides.

<link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />

Dublin.rdf

This little-known and under-used file is very important if you have been doing any kind of search engine optimization with your metadata. The Dublin.rdf file is part of the Dublin Core Metadata Initiative (DCMI) specification that acts as a container for officially recognized Meta elements and can help categorize your site for easier indexing. Think of it as a card-catalog for websites. It isn’t out to replace Meta tags but it is trying to make the location of information easier by supplementing that information. Here is an example of what the file looks like:

<?xml version="1.0"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc= "http://purl.org/dc/elements/1.1/">
     <rdf:Description rdf:about="http://www.yoursite.com/">
          <dc:contributor>Your Name</dc:contributor>
          <dc:date>2011-07-26</dc:date>
          <dc:description>This is my website.</dc:description>
          <dc:language>EN</dc:language>
          <dc:publisher>Company</dc:publisher>
          <dc:source>http://www.yoursite.com/</dc:source>
     </rdf:Description>
</rdf:RDF>

These RDF files are just like XML files and have a DTD and other similar rules to go with them. To get the full rundown, you can visit: http://www.w3schools.com/rdf/rdf_dublin.asp

Creating a Dublin.rdf file

Creating a Dublin.rdf file is not as easy as the files we have previously looked at but there are some ways to make it easier. You can either create one of these files from scratch, copying the DTD information and adding in your own tags, or you can generate one using various web tools. There is a list of valid DCMI metadata items that can be found here:

Once you have the document complete, you will have a library of useful information about your site that will improve the interoperability and usability of your site or between your site and applications. When you have completed the file, use this link in the section of your HTML page to let the browser know that you have an RDF file available.

<link rel="meta" type="application/rdf+xml" title="Dublin" href="dublin.rdf" />

Opensearch.xml

The last document we are going to look at is the opensearch.xml file. This XML file allows you to add custom search engine listings on your site so the user can utilize the browser’s built-in search box to look for items.

Using the name opensearch.xml is not required but it is the accepted convention. You will need to create the XML file with the required attributes and add in any customized tags needed to describe your site. Here is an example:

<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
     <ShortName>My Site</ShortName>
     <Description>Search this website.</Description>
     <Image>favicon.ico</Image>
     <Url type="text/html" template="http://www.google.com/search?sitesearch=http%3A%2F%2Fwww.yoursite.com%2F&amp;as_q={searchTerms}"/>
</OpenSearchDescription>

There are some basic required tags in the above example:

  • Shortname – This is the title for the search extension
  • Description - This explains the purpose of the box
  • Image - Optional. Usually the favicon or could be a search-related image for your site
  • Url - the MIME type and template attribute that links to the search terms

These are the standard tags and there are many more tags that you can provide. For a complete listing see: http://www.opensearch.org

Once you have your search XML document created, you can use this link on your HTML page to add it into the section of your document:

<link rel="search" type="application/opensearchdescription+xml" title="Website" href="opensearch.xml" />

Conclusion

I hope you have found this listing of files useful. These are simple ways that you can add value to your site without having to spend time on new features. By making your sites work better with the web they reside on, you will ultimately have an easier time in marketing, promotion and search engine placement, as well as showing a professional image to your visitors. There is more to a web site than just the HTML, CSS and scripting, so feel free to dive into making these files for your own site.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment