Marketing Insights and News | Website Magazine: Digital Marketing Tips and Blog

Make Site Updates Simple with SSI: Server Side Includes

Written by Pete Prestipino | Oct 19, 2006 5:00:00 AM

By Peter Prestipino

You have a website that needs updating. But the thought of modifying each and every one of your pages is overwhelming - if only there were a better way. There isa much better way. In fact, it will make your Web life so much easier you will kick yourself in the virtual pants for not thinking of it sooner or implementing it when you started.

Webmasters and website owners the 'Net over use server side includes (SSI) to reduce the time spent updating and tweaking websites. While it may not be the answer to all of the complex navigation problems of existing sites, establishing SSI at the onset of design will pay off when the inevitable redesign comes or when you need to add something special quickly.

What is SSI and how does it work?
SSI are like puzzle pieces, in that individual pieces (documents) are assembled together to create a final product (your web page). When a Web page is opened, a server looks at the document's file extension to determine whether it is a static document, in which case it can be sent straight to the browser without modification, (e.g., .htm or .html) or a dynamic document that contains SSI commands, requiring additional processing (.shtml). A document with the .shtml extension informs the server that SSI tags are included. Once an SSI tag is found, the server will attempt to run the command and insert the results of each command into one document - the page being viewed by the visitor.

Instead of changing pages one-by-one by pasting revised code over outdated code, SSI enables Web designers to make one change in one place. Take, for example, that your website contains 100 Web pages, and along comes a company sales executive requesting a link to a new white paper on every single page of the site. Without SSI you would have to spend hours making the addition to each individual page. With SSI, however, a quick change to one file adds the white paper to every page on your site and the sales executive is off and running.

There are other benefits to SSI files related to page loading speed. Since one line of SSI code replaces what might have been several in an HTML file, files are smaller and take less space on a server. Since the include file has already been loaded with the first page a visitor sees, the next page is much faster to load.

Getting Started With SSI
To utilize SSI, your server must be configured properly. There is a different setup procedure for both Internet Information Services (IIS) and Apache (and some easy tweaks with Apache) so ask your Web host if the procedure has already been established. Also, ask if it has been set up to parse .html extensions to read SSI correctly. The next step is the actual implementation of SSI on the web page(s) itself.

Suppose you want to replace the code which displays a navigation menu on all pages of your website. Create a separate Web page consisting of only the code for the navigation menu (it is not necessary to have Head, Title or Body Tags - just the text and code of the navigation menu itself), save it as an HTML file and upload it to the appropriate directory.

Then, replace your existing navigation menu with the following code on each page where the old navigation code appeared. For your site, substitute "nav1.html, with the separate menu file name of your choice - something appropriate and easy to remember.



Inserting this simple line of code will tell the browser to request the SSI file. When the browser opens the website, the SSI file is retrieved and replaces the old files. Now, whenever the SSI file is modified, the changes will appear on each page containing the new code (as seen above). The end result is the ability to make one change to one file and have it reflected
throughout the site.

If you have placed the navigation include file in a separate directory (take for instance https://yourdomain/navigation/) this would be the line to place in your code:



Improving Server Side Includes
SSI is a powerful tool that puts the power of refined layout in the hands of designers. There are instances, however, when you do not need or want to put everything into a single SSI file. Say for example you would like one navigation menu for some pages but a different navigation menu for others. When this is the case, creating two SSI include files is the best choice.

You can also use an SSI include file to hide some of your source code. For example, if you are running a proprietary or a third party script, using an SSI will hide the code from prying eyes and speed up loading time.

What about SSI and SEO?
Search engine spiders get what the browser gets - a complete page. How the page was made is inconsequential. Whether static or dynamic, it's just an HTML page.

Search engine spiders read SSI files in the same way that a browser for human visitors does - they do not "know that it is SSI. They "believe that it is simply part of the page. SSI includes are processed by the server while outputting the page in response to the client request. As long as the SSI code contains no errors, the page content created by SSI is no different than any of the other content on the page. Therefore, the underlying SSI code is invisible to spiders as it is to human site visitors.

SSI includes can save you from the time and aggravation of making multiple changes to your site. Plus, they reduce the file size and increase loading speed. Try it out. You'll see that, over time, SSI will drastically cut down on your Web maintenance time and give you more time to be frustrated over other aspects of your site. ■


View full post