| |
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
Liquid Vitamins and Supplements site 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 a website monitoring logo and the link to the navigation menu at 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.
- Configure your server for SSI
- Set up your "include" file
- 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:
<!--#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 two examples of situations
that call for splitting the SSI "include" file in two.
The first is on my vitamin site. Return to my
Liquid Vitamins and Supplements site 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 this article
on vitamin c. The row of links directory is not
there.
The second example is this article on search
engine tips. 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 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 personal
growth articles page, 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:
<!--#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!
About The Author
David Leonhardt is a freelance writer, and an online
and offline publicity specialist. Contact him at: Info@TheHappyGuy.com.
Pick up a copy of Don't
Get Banned By The Search Engines or his
media relations plan for business owners or learn
how to promote your website with an
ezine newsletter.
|
