SSI Tutorial: Why and How
to Use Server Side Includes
By David Leonhardt
If you are a webmaster or a website owner and have not yet used server side includes (SSI), I am about to make your life soooo much easier. SSI can save you a lot of time updating your site. Set them up right at the beginning and you will be forever grateful that somebody thought up SSI.
In this article we will look at what SSI is, why it makes life so easy, and exactly how to set up SSI on your website...and then I'll share two little bonus tricks I've discovered.
What is SSI?
SSI actually covers a number of features to improve your website. I am going to speak here of just one critical improvement, referred to as an "include" file.
Essentially, an "include" file is a separate file that your web page can include as if it was part of the page file.
If you are used to using FrontPage or have recently learned HTML, you probably assume that every web page is a single html file. The page you are reading now is composed of ten separate files, not including the style sheet. There is the main HTML file for the page. There is a style sheet (CSS) and there are eight SSI "include" files for various common features across the top, bottom and left side. Plus a couple files for the floating social buttons.
Why use SSI?
SSI makes it easy to bring changes to your website. There are some changes you will need to make to every page or to every page in a specific section. Your website might start out with just 10 pages, and you might figure that it is no big deal to cut-and-paste a change to the navigation menu 10 times.
But each time you add a page, you have to update that menu. And with each new page added, you have to paste one more time. When you reach 50 pages (Never thought your website would grow that big? You're not alone.) it becomes very tedious to update.
For instance, when I wanted to change the reprint permissions for this page and all other articles, I had only one file to edit for all the articles, rather than having to edit each article.
There are two other benefits to SSI "include" files. Because a single line of code replaces what might have been several dozen in each HTML file, your files are much smaller, taking less space on your server. And, because the "include" file has already been loaded with the first page a visitor sees, the next page is much quicker for visitors to load.
How to set up SSI?
You need three things to set up SSI.
1. Configure your server for SSI
First, you need your server configured for SSI. Ask your web host if this has already been done. Also ask if it has been set up to parse .html extensions to read SSI.
2. Set up your "include" file
3. Call up your "include" file into your web page HTML file
If your server has been set up for SSI, you are one step closer. If it has also been set up to parse .html extensions to read SSI, you are two steps closer.
Not all hosts support SSI, but most do. If yours does, but it has not been set up for your account, look for the .htaccess file in your root directory (where your index.html or home page file is stored). In my experience, this is not usually viewable using an FTP process; you have to find it through your control panel.
The .htaccess file is a text file. If you do not already have an .htaccess file on your server, you can create one in NotePad or even in Word (just save it with a .txt extension), but whatever you do, make sure not to write over a .htaccess file already on your server. If it is already there, just add the following lines to the file, being careful not to erase anything that is already there:
AddType text/html .shtml
So far, so good. But this will recognize only .shtml files for includes, and you probably don't want to change the .html extensions to .shtml on all your pages, if for no other reason because it will mess up all your inbound links to those pages.
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes
So add this line. In theory, it should be the second line, but careless me has gotten it to work at the end, too:
AddHandler server-parsed .html
Save the edited .htaccess file to the root directory of your server.
As an aside, there are several ways to configure your server for SSI. This one has worked for me across several hosts.
So much for the techie stuff, now you need the second element: the "include" file itself. Suppose your "include" file is the navigation menu. You don't need "head" and "title" and "body" tags. Just type in your text and code just the way it would appear in your webpage. It's that simple. Save it as an HTML file, and load it to your route directory or to its own directory.
All you need now, is to call up your navigation menu in each file you want it to appear in. To do this, a simple line suffices where a whole column of code and text once stood.
Here is the line to place in your code:
<!--#include virtual="nav1.html" -->
This assumes that nav1.html is the name of the "include" file and that it is in the same directory as the page it is being inserted into. If you place the file into a directory called "nav", you would have to include code like this in your web page file:
<!--#include virtual="/nav/nav1.html" -->
That's all you really need to know. But here are a couple bonus tricks that will make SSI "includes" work even better for you.
Bonus SSI Tip #1
You don't need to stuff everything into a single SSI file. What if some elements you want on some pages and others not? Let me offer an example of a situation that call for splitting the SSI "include" file in two.
On this page, there is an SSI file for the navigation bar, which includes the elements that should show up on every page. Within that SSI file is a second SSI file that cllas up additional menu items just for marketing-related articles.
Bonus SSI Tip #2
You can also use an SSI "include" file to hide some of your source code. I will show you a ridiculously simple way to do this.
There are at least two legitimate reasons why somebody might want to hide parts of their code. The most obvious would be if you are running a proprietary script. The second is if you are running a script that displays content, but shows up as a script in the source code. This was my challenge.
At the bottom of the navigation menu at my http://thehappyguy.com, there used to be a "Happiness Quote of the Day". In fact, it is a random quote that reloads when the page reloads. I had included the random-text script in the SSI "include" file, but the search engines were seeing the script in the source code, not the text that human visitors were seeing. So I placed the script in its own "include" file, which I inserted like this into the main "include" file:
<!--#include virtual="randomfile.php" -->
Now the search engines see the same things as humans see. Why would I care? Search engines visit more frequently pages that change more frequently. That does not mean the site will rank higher, unless frequent change is part of the search engine's ranking algorithm, but it does mean that other changes will be indexed faster.
To sum up, SSI "includes" can save you time and headaches when changes need to be made to your site, plus they reduce the file size and increase the loading time of your pages. Once you've set up the server to read SSI, all you need to do is create an "include" file and call it up in your web page using one line of code.
I can hardly believe I wasted so much time cutting and pasting before I learned about SSI. You won't believe it either!
For more free website and webmastering articles for reprint, please see our article directory.
Note that we no longer allow reprinting on the Internet, as Google strongly frowns on this means of promoting a business. However, we often write helpful guest posts, so please feel free to send us an email if you are interested or if you wish to reprint offline.