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. Let’s take a real-life example. My site at http://www.vitamin-supplements-store.net uses SSI in a number of places.
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 example above is actually five files. There is the main HTML file for the page. There is a style sheet (CSS) and there are three SSI “include” files — one for the left navigation menu and two for the two navigation menus across the bottom. I could have, perhaps even should have, used more “include” files, but you can be the judge when you’ve finished reading this article.
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 add the website monitoring logo and the link to the navigation menu at http://www.thehappyguy.com, I had to change just one file, and — presto! — the change appeared on every page of the site bearing that navigation menu. It was so very much easier than past updates before I began using SSI.
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
2. Set up your “include” file
3. Call up your “include” file into your web page HTML file
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.
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
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes
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.
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:
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:
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 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 two examples of situations that call for splitting the SSI “include” file in two.
The first is on my vitamin site. Return to http://www.vitamin-supplements-store.net and look at the links across the bottom. The first row is typical website stuff: contact, privacy, etc., which one wants access to from every page of the site. The second is the links directory, which a webmaster does not typically want linked from every page. For example, see the bottom of my humor article at http://www.vitamin-supplements-store.net/articles/eggs.html. The row of links directory is not there.
The second example is this article on search engine tips: http://www.thehappyguy.com/SEO-tips.html. Notice again that there are two different navigation consoles. The first is generic to the site, the second is specific to that section of the site. So a second SSI “include” file, using just one additional line of code, can provide interlinking for the section, without affecting other sections of the website. This is very handy for large sites.
Bonus 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 http://www.thehappyguy.com/self-actualization-articles.html, there is 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:
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!
About The Author
David Leonhardt is a freelance writer, and an online and offline publicity specialist. Contact him at: mailto:info@thehappyguy.com
For a copy of Don’t Get Banned By The Search Engines:
http://www.thehappyguy.com/SEO.html
For a copy of Get In The News:
http://thehappyguy.com/publicity-self-promotion-report.html .
To promote your website with an ezine:
http://www.thehappyguy.com/ezines.html
Info@thehappyguy.com
