html tutorial, internet tutorials

A quick guide to SSI (server side includes)

With the help of Server Side Includes (SSI), you can include dynamic content into otherwise static web pages in such a way that the content is written into the web page´s source code before being delivered to the visitor, hence it´s part of the web page and spiderable by the search engines (which is a big benefit from the SEO point of view).

SSI can be used to include different types of content into your web pages, for example:

  • the output of a CGI script or CGI environment variables
  • other variables like server date, last modified date of a file, document path, etc ...
  • the output of PHP scripts and other scripts or executable files
  • html code and content of external documents

This is what happens when someone visits a SSI enabled web page of your site.

  1. Visitor requests a document from your website, f.ex. your homepage.
  2. Before sending the document to the visitor´s browser, your server looks for SSI commands inside the document´s source code and writes the content (f.ex. output of a CGI script or the content of an external html document) into this page.
  3. After the parsing process your server sends the document to your visitor´s browser.

  Benefits of using SSI on your website  

Probably the major benefit of SSI is that you can easily update certain parts of all your web pages at once. Many webmasters are using SSI for menus, footers, headers, sponsor ads, etc ... . Especially menus, footers and sponsor ads are sections that get frequently updated.

For example: on EasyWebTutorials.com, the content of the sidebars on all pages are inserted from two external files. So, everytime I want to add a new link or a different sponsor ad to the sidebars of all the pages at EasyWebTutorials.com, I only need to update two external files.

The second big advantage is that you can include dynamic content, f.ex. the output of a script, into static web pages, so the search engine spiders can find this dynamic content, too.

For example: on TheJungleMarketer´s homepage there are two "tip of the day" sections. This content is pulled out of a database by a PHP script and parsed into the page before it is sent to visitors (and search engine spiders).

  Requirements for making SSI work on your site  

Your webhost must support (i.e. allow you to use) SSI. Some don´t, but most of the popular webhosts do.

Your server must be able to recognize which documents need to be processed, i.e. in which documents (web pages) it needs to look for SSI commands and process the includes before sending the pages to your visitor´s browser.

This is usually accomplished by giving those web pages a special filename extension: .shtml or .shtm.

Now if you already have an established website and your pages have .html or .htm as filename extensions, you certainly don´t want to rename all of your webpages and lose your search engine rankings. In this case, you can use the .htaccess file to enable SSI on .html and .htm pages, too. Simply add the following line to your .htaccess file in your website´s root directory.

AddHandler server-parsed .html .htm

Note: If you haven´t a .htaccess file yet, simply create a new document in your favorite text editor and paste the above line into it, then save the file as .htaccess and upload it to the root directory of your website.

Server Side Includes are only processed when a file is loaded from a web server, i.e. when you view the web pages in your browser calling them from a URL (like http://.... ). When viewing your web pages on your desktop, you won´t see the includes.

  How to use SSI in your web pages  

Inside the source code of your web pages, you need to place the include commands (see below) within a comment tag in the location where you want the content to be inserted.

Examples:
<!--#include virtual="footer.html" -->  to include the content of a different file
<!--#exec cgi="/cgi-bin/hitcounter.cgi" -->  to include the output of a cgi script

The most common SSI command you´ll probably use is #include. With this command you can include the content of an external file in your web pages. Use this for headers, footers, menus, sidebars and ad blocks.

As said, you need to place this command inside a comment tag and then specify the document you want to be included with virtual="Path/File". As "Path" you must use the relative path to the document and "File" is the document (for example a .html or .htm document) that you want to be included.

Let me give you an example that will make it easy for you to understand it:

Take a look at this page (opens in new window). I´ve built this page as an example for what can be done with SSI. The menu on the left, Google Adsense on the right, the footer and also the newsfeed are included in this page using SSI. This is how the page looks like after being processed by my server. When you take a look at the source code of the above page, you´ll find all the dynamic content parsed into it.

And here is the source code of this page before processing.

<html>
<head>
<title>ssi example</title>
</head>

<body>

<table width="97%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td>
<a href="http://www.easywebtutorials.com">
<img src="../images/logo.jpg" border="0" alt="EasyWebTutorials"></a>
</td>
</tr>
</table>

<table width="97%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td width="170"></td>

<td rowspan="2" valign="top">

<!--#include virtual="../carp/newsfeed.php" -->

</td>

<td rowspan="2" width="130" valign="top">

<!--#include virtual="sponsors.html" -->

</td>
</tr>

<tr>
<td width="170" valign="top">

<!--#include virtual="menu.html" -->

</td>
</tr>
</table>

<table width="97%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td>

<!--#include virtual="footer.html" -->

</td>
</tr>
</table>

</body>
<html>

The first include is the output of a php script (CaRP Caching RSS Parser), whose function is to parse headlines from a newsfeed into the webpage.

The second include is a file which contains only the java script code for Google AdSense. I could add more banner ads or any other html code to this file of course.

The third include inserts the content of the file menu.html whose source code you can see below. Anytime I want to add a new link to the menu of all web pages, I only need to update this one file.

<a href="../">Home</a><br>
<a href="../blog/">Site Blog</a><br>
<a href="../articles/">Article Directory</a><br>
<a href="../contribute.html">Submit Your Tutorial</a><br>
<a href="../link.html">Link To Us</a><br>

And finally, the last include is the content of the file footer.html.

<p align="center">
<a href="../index.php">Home</a> :::
<a href="../contact.html">Contact</a> :::
<a href="../advertise.html">Advertise</a> :::
<a href="../contribute.html">Contribute</a> :::
<a href="../link.html">Link Us</a> :::
<a href="../sitemap.html">Sitemap</a>
<br><br>
<a href="../terms.html">Terms of Use, Disclaimers, Privacy Policy</a>
<br><br>
<span style="font-size:12px">© 2005 EASYWEBTUTORIALS.COM</span><br>
</p>

 

  Other SSI commands are for example:  

#flastmod: to insert the date when the specified document was last modified
<!--#flastmod virtual="index.html" -->

#fsize: to insert the file size of the specified document
<!--#fsize virtual="download/carptutorial.zip" -->

#echo: to insert CGI environment variables or other variables
<!--#echo var="DATE_LOCAL" -->   for the local time
<!--#echo var="SERVER_NAME" -->   for the server name

#exec: to insert the output of a script
<!--#exec cgi="/cgi-bin/hitcounter.cgi" -->

I hope this short guide has helped you to understand Server Side Includes and how to implement them on your website. For more information, simply search Google for "ssi" or "server side includes".

 

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
© 2005-2009 EASYWEBTUTORIALS.COM
Page copy protected against web site content infringement by Copyscape