Efficient Website Maintenance With Include Pages (SSI)
 

Efficient Website Maintenance with Include Pages (ASP-Based SSI)

Keep Your Content Fresh

Having valuable content and keeping this content fresh and up to date is absolutely critical if you hope have a truly successful website - one that contributes significantly to your business’s goals and aspirations. 

Content that is informative and current provides a real value to your website visitors.  Additionally, great content can help establish your business as a leader in your market and is perhaps the most crucial element in obtaining high rankings for your website in the search engines - which account for over 85% of all traffic on the internet. 

Indeed, both your actual visitors and the major search engines prefer and to some degree demand valuable, fresh content.  The truth, however, is that many small business websites have word for word the same content as the day they were launched.  This is doing a disservice to your visitors, and is not likely to produce many sales, leads, inquiries or calls to action that you had originally hoped your site would bring in.  

This article aims to provide a few simple tips for successful and efficient website maintenance using include pages.  Include pages can be used by anyone looking to quickly and easily manage and maintain their website. 

What is an Include Page?

Include pages are separate files that can be used as a component of another web page.  Their most common use is to store a particular component of a site that is common to most of all of the pages within a site.   

As an example, let’s say I have some footer information that I would like to have at the bottom of every page of my website - perhaps a copyright statement, a few links to the main pages of my site (such as the home page, the contact page, etc).  Let’s then say that some time after launching my site I decided I wanted to change the wording in this footer on each page.  Traditionally I would have to physically change the footer on each and every html page.  This is not a real big deal if I have a 5 page website - but if my site is 50 pages it could be a pain - so much so that this is often an excuse not to make appropriate changes. 

The next bit of reasoning might suggest the trusted “copy and paste” method.  Sure you could open up all 50 web pages, make the change on one page, and copy and paste it onto every other page.  This would indeed save you some time - but you’d still have to save all 50 pages and upload or publish them to your server.  Again, a bit too time-consuming for such a small change. 

Enter include pages.  In this instance I could simply create a small html page that has all my footer information exactly how I want it to look.  I would save the file with some intuitive name - perhaps footer.asp.  Then I would put a small piece of code on each web page that essentially tells the page “plug in the include page here!”  Now, each time I modify my one include page - the footer.asp file - the change is reflected on all 50 pages of my website.  Even better is the fact that I now only need to publish the one include file, rather than all 50 pages. 

Using Server Side Include Pages

A server side include page is dependent upon software on your server to call each of your include pages into the page when requested by a web browser.  An example of a server side include technique is to use ASP (Active Server Pages) to provide your page file - complete with any include pages within it - to the browser.  When viewing a page using ASP server side include pages to provide some of the components of the page the end result displayed to the user is identical to the same page with the component hard-coded on it (rather than provided by the common include file).  In fact, if you view the source of the page even the html code displayed would suggest that the component being provided by the include page is actually hard coded on the page.

Let’s use some illustrations.  A common website might have four main regions or components to its design.  The header, navigation, body and a footer.   

In most cases, the header, navigation and footer are identical from page to page - with only the body content changing, dependent upon the given topic of the page.  Thus, it would make sense to utilize include pages for each component that is to remain the same from page to page.  By using include pages there is only one instance of the code for each of these components.  This ensures consistency across each page, and makes it much faster to make a change to any of these regions (as you only have to make the change to the one include file).

In many ways include pages can be compared to using frames in that with frames typically only the body content that is unique to each page changes, whereas the header, navigation and footer for each page are all pulled from the same file.  There are numerous advantages though in using include pages rather than frames, including some advantages in achieving rankings in the search engines as well as some aesthetic and compatibility considerations in using frames. 

Okay Great, So How Do We Do It?

First, decide where on your page you want to place the contents of the include file.  You may opt to have your header file at the very top of the <body> code on your pages - or to put your footer include file at the very bottom.  You can use include pages within a cell in a table if you like as well.  For this example we’ll pretend to use our header.asp file as the include page on our “contact us” page - contact.html.

Next, create your include page.  You may save it as something such as header.asp or header.html.  Note that the include file itself can be either an ASP or HTML file.

Third, place the following code where you would like your include file to be placed:

<!-- #include file="header.asp" -->

If you are using FrontPage you can go to Insert > Web Component > Included Content > Page and select your include file.  The FrontPage code does the same thing as the above code but will look like this:

<!--webbot bot="Include" U-Include="header.asp" TAG="BODY" -->

Lastly, save your file as an ASP extension.  In the case of our contact.html file we’ll need to save it as contact.asp and upload it to our server.  So long as our server is running ASP we can now open a browser and go to the contact.asp file on our website and see the end result.

If we repeat this process with all our web pages to add in the code for each include page where we want it we’ll save a great deal of time in future maintenance.  Indeed, its most beneficial to simply use include pages from the start if possible.  Now to make changes to the header of every page on your website you can simply open your one header include file, make your changes, save it an upload it and the change is reflected on every page.