When working on constructing the archives of a newsletter I was faced with a big problem. How could I update the navigation bar on 70+ individual pages every week? One possible answer was to use a Search and Replace utility on my computer and re-upload all the files to the server each week. This was a less than ideal solution. Instead I ended up using Server Side Includes (SSI for short) to solve my dilemma. This brief tutorial will show you how you can save hours of work by utilizing SSI on your site.
Although you don’t need to know exactly how Server Side Includes works, it’s a good idea to have a basic understanding of what happens when someone accesses a page on your site on which you used SSI. First the server reads the HTML page that is called, and searches it for SSI calls (more about that in a moment). If it finds an SSI call to another page, it opens the other file and parses it so that the two files become one. The parsed file is then sent to the browser of the visitor requesting the page. Since all parsing takes place before the file is served, there is no trace of the SSI call when you view the source of a page.
Before you can start experimenting with SSI you’ll need to ensure that the server that your site is hosted on supports it. Virtually all professional web hosting companies support SSI and several free ones, among them Hypermart.net also allow you to employ SSI on your site.
You can implement SSI in two different ways on your server. Most servers by default are configured to search for, and parse SSI calls only in files that end with a .shtml extension. On some servers it is also possible to tweak the settings so that files that end with .htm or .html are parsed. Contact your webhosting company to see if this is possible on your server. If not, you’ll have to rename all your pages so that they end with .shtml and change all internal links so that they reference the .shtml pages instead of the ones ending with a .htm or .html extension.
Once you’ve got all that information sorted out it’s time to put an SSI call onto your page. The code that you need to use is:
<!–#include virtual="/includes/something.htm"–>
What that does is take everything in the something.htm file and dump it into the place where you put the SSI call. This means that the something.htm will NOT have the standard background color and HTML definitions that tell the browser the background and link colors, the title of a page etc. Remember, everything in something.htm will be dumped into the file that calls it — you don’t need to specify Background/link/text colors, Meta Tags and Title Tags in the something.htm file, as long as the file that contains the SSI call has them.
That’s it! Upload something.htm and the file that references it to your server and test it out. The next time you need to make a change that affects multiple files, all you have to do is edit something.htm and upload it to your server.
Server Side Includes FAQ:
- Will search engines index .shtml files? Yes, none of the search engines have problems dealing with files that have the .shtml extension
Yes, search engines will see the page exactly the same way you do. The server parses the page before sending it to anyone, including Search Engine spiders.
Yes, Server Side Includes do to some extent slow down the serving of your pages, especially if you are on an overloaded server. However in most cases the half-second or so difference in page loading is barely noticeable and well worth the convenience.
Matt MickiewiczMatt is the co-founder of SitePoint, 99designs and Flippa. He lives in Vancouver, Canada.
