Templatize Your Website with SSI - Server Side Includes - Step by Step
Most websites maintain the same headers, footers and margin navigations on each page. This is good design. The common look tells your visitor she is in a unified environment and ever-present links make site navigation easy.
As your site grows, changing those common elements can become laborious because changes must be made on each page of your growing site. Using SSI - Server Side Includes, these elements need be changed only once. All your pages can use the same template files for important repeated elements of your web pages.
When you set up pages for SSI, you include special SSI links to separate template files. Your web server includes them in a single web page file before sending them to the visitor's browser, thus the name Server Side Includes.
Convention used in this article: Filenames and URLs are displayed in quotes. Do not use the quotes when doing your work.
In order to templatize your website with SSI, you will need:
1. FTP access to the root folder of your site (the folder which contains your home page, typically named "index.html" or "index.htm").
2. Rights to add files and folders there.
3. Basic knowledge of HTML, to the extent that you can recognize the beginning and ending of portions of your site you wish to templatize.
4. A copy of your website on your local computer. If you have the items listed above, you can download your site to your local computer.
5. Your site must be hosted on an Apache server with SSI enabled.
Step 1 - Check if SSI is Available & Enabled
a. Open Notepad.
b. Click File-Open. Where it says "File of type:" select "All types". Click on your "index.html" or "index.htm" home page.
c. Beneath the line containing the <body> tag, enter the following:
<!--#echo var="date_local"-->
d. Click "File/Save As".
e. At "File of type:", select "All types". Rename the file "s-index.html" and click "Save". This is your future upgraded home page.
f. Upload the file to your server in the root folder.
g. Open your browser and navigate it to your new web-based "s-index.html" file. You should be able to do this by typing your site's URL followed by "/s-index.html". Let's call this example URL:
http://www.yourdomain.com/s-index.html
where "yourdomain.com" will be replaced by your actual domain.
h. If the local date displays on your page, you have SSI enabled.
i. If you do not see the date displayed, try renaming your file with an ".shtml" extension instead of "html". If it still doesn't work, contact your webhost or system administrator.
j. Remove:
<!--#echo var="date_local"-->
from your local "s-index.html". Save it, upload it to your server, refresh your browser and verify that you have successfully removed it.
Step 2 - Create .htaccess file
a. Open Notepad.
b. Paste the following code into it:
Options Indexes FollowSymLinks Includes
AddType application/x-httpd-cgi .cgi
AddType text/x-server-parsed-html .html
AddType text/x-server-parsed-html .htm
c. Click "File/Save As"
d. Navigate to the root folder of your local site.
e. Where it says "Save as type:" select "All Files"
f. Name the file ".htaccess" and click "Save".
g. Upload this file to the root folder of your site.
Step 3 - Create SSI Folder
a. Open Windows Explorer
b. Navigate it to your website's root folder.
c. Left-click the root folder to highlight it.
d. Left-click "File/New/Folder" on the top menu bar.
e. You should see a new folder placed under the main folder. Right-click it and select "Rename". Rename the folder "ssi" (without the quotes). You will save your templates there.
Step 4 - Your First Server Side Includes File
a. Open Notepad. You will have opened an empty file. Type:
Chickens are delightfully silly animals.
b. Click "File/Save as" and navigate to the "ssi" folder you just created.
c. Where it says "Save as type:" select "All Files"
d. Name the file "chicken.sht". This is your very first template file.
e. Open "s-index.html" in Notepad.
f. Just below the <body> tag, paste these lines of code:
<!--BEGINNING OF CHICKEN-->
<!--#include virtual="ssi/chicken.sht"-->
<!--END OF CHICKEN-->
g. The top and bottom lines are simply notations which will render only when the source code is displayed. They will come in handy. The center line of code will tell your server to replace itself with the contents of the file "ssi/chicken.sht".
h. Save "s-index.html", then upload it to the root folder of your web server.
j. On your webserver, in the root folder, create a new folder named, "ssi". Upload "chicken.sht" into the "ssi" folder.
k. Open your browser. Type:
http://www.yourdomain.com/s-index.html
in the address bar. If it was already there, refresh the screen by clicking the "Refresh" button, or by pressing the F5 key. If all went well, you should see our cutesy chicken comment rendered on your page.
l. On a blank area of your web page, right-click and select "View Page Source". Scroll down until you see the "<!--BEGINNING OF CHICKEN-->" tag. It should look like this:
<!--BEGINNING OF CHICKEN-->
Chickens are delightfully silly animals
<!--END OF CHICKEN-->
m. Notice anything? The code "<!--#include virtual="ssi/chicken.sht"-->" was completely replaced by the contents of the "chicken.sht" file with no trace of the original line of code. This is why the beginning and ending notation tags are useful. When viewing the source, the notation tags will be the only way you will know you are looking at files included at the server.
n. Remove the three lines of code in the local "s-index.html", save it and upload it to your server. Refresh your browser and verify that your page no longer is full of "chicken.sht".
I am having way too good a time with that filename!
Step 5 - Create SSI Template Files
a. Open Notepad. You will have opened an empty file.
b. Click "File/Save as" and navigate to the "ssi" folder you just created.
c. Where it says "Save as type:" select "All Files"
d. Name the file "top.sht". This is the future home of the template for the top of your page. Click "Save".
e. Click "File/Save as" again, and again, navigate to the "ssi" folder.
f. Where it says "Save as type:" select "All Files"
g. Name the file "left.sht". This is the future home of the template for the left side of your page. Click "Save".
h. Repeat steps e, f and g again, but this time, name the file "right.sht".
j. Repeat steps e, f and g again, but this time, name the file "bottom.sht".
k. You have now created future homes for templates for the top, left, right and bottom of your web page.
Step 6 - Place SSI Links and Annotation Markers in "s-index.html"
a. Open "s-index.html" in Notepad. Stretch the window wide and short so it covers the width, but only the top half of your screen. Think of this as your source file.
b. Open "top.sht" in a new version of Notepad. If you don't see it listed, remember to select "All types" where it says "File of type:". Stretch the window wide and short so it covers the width,but only the bottom half of your screen. Think of this as your target file.
c. Examine the code in the upper window and make sure you know where the code for the top of your web page begins and ends. You will soon cut this hunk from "s-index.html" and paste it into "top.sht". But before you do:
d. Be sure you have selected a coherent body of code:
TIP #1: Look for hunks of code which begin and end with major tags such as <table> and </table>. Include the tags and everything between them when selecting portions of a web page to templatize.
TIP #2: DO NOT INCLUDE:
<html>,</html>,<head>, </head>,<body>,or </body>
EVER IN SSI TEMPLATES OR HELLFIRE AND BRIMSTONE WILL FALL FROM THE HEAVENS UPON YOUR POOR ACCURSED HEAD and besides which, it won't work.
d. Immediately above the hunk you selected in "s-index.html", type the following three lines:
<!--BEGINNING OF TOP-->
<!--#include virtual="ssi/top.sht"-->
<!--END OF TOP-->
e. Then, right-click-cut the hunk of top code from "s-index.html" and right-click-paste it into "top.sht". It must be removed from "s-index.html".
f. Save both files and upload them to your server. The "s-index.html" will replace the one already posted on your server in the root folder. Be sure to save "top.sht" in the "ssi" subfolder you already created at the server. You will recognize it because it still has some leftover "chicken.sht".
Ha! I did it again! Note to self: Get life soon before too late.
g. Point your browser at:
http://www.yourdomain.com/s-index.html
If it is already thusly pointed, refresh the screen. If your web page looks absolutely normal, you probably did one heck of a good job.
h. If your page looks gnarly, go back to the beginning of this section and try to figure out if you missed including important beginning or ending tags, or if you included the FORBIDDEN TAGSmentioned in TIP #2 above.
g. If you really screw up, start from scratch by deleting all contents of "top.sht", and saving it empty. Then, open "index.html" and save it as "s-index.html" and start again at "a" above.
Step 7 - Go into Production & Go Live
a. Once you are stabilized with templatizing the top of your web page, move on to the other portions, one at a time.
b. Do the full cycle of Step 6 (a thru g) for "left.sht" before moving on to the others. This will reduce chances that you will receive a nasty shock when you open the latest and greatest "s-index.html", only to find that it resembles a genetic mutation of the undesirable variety (as opposed to Angelina Jolie).
Go slowly and deliberately. Remember, these templates will be with you for a long time. Make sure you are including the correct amount of code.
c. At the end of this process, your website will look exactly like it did yesterday. Underwhelming? Yes, until you view the source code and realize that all the content between the notation markers was imported by your server because of your fine work.
d. When you are satisfied that "s-index.html" is functioning properly (check all the links, for instance), you can "go live".
e. On your server, change the name of "index.html" to "x-index.html" and leave it on your server as a backup. Then rename "s-index.html" to "index.html". You are now operating live with your great new templated home page.
Step 8 - Test & Prepare to Propagate
a. There is no rush to propagate your changes to other pages. Your website will work just fine with some pages migrated to the new template system and some not. This will give you the luxury to do a few tests before propagating the changes.
b. Run a few sitemap generating programs on your site to verify that the same number of pages are recognized, and that you have not lost friendliness to search engines. When I first converted my home page to an SSI templated version and ran the XML Echo Sitemap Generator, I was pleased to find that there was no loss of link recognition.
c. Monitor your website traffic for a few days. For my website, it seemed that after converting the home page, my hits from search engine spiders and from search results actually increased to a moderate extent.
d. Now that you are convinced that all is well, it is time to propagate the change.
Step 9 - Propagate Your Changes
a. Change your local filenames to reflect changes you made on the server. For example, change the local "index.html" to "x-index.html" and rename "s-index.html" to "index.html". Now your local website and the live one should have the same content.
b. Create an "empty template page" which you will reuse repeatedly during change propagation. To do this, in Notepad, open the new "index.html", which, if you performed step a above, is now the SSI templated one. Save it under a new file name, "template1.html".
c. While it is still open, locate the point at which your actual home page content, the important stuff in the middle of the page, begins. Above it insert this notation:
<!--BEGINNING OF BODY-->
At the end of the important page content, insert:
<!--END OF BODY-->
d. Delete everything between, but not including the two notation tags you just entered. They will now be next to each other. Insert a few rows between them and save your file "template1.html" again.
e. Upload it to your server, then address your browser to:
http://www.yourdomain.com/template1.html
If you see a wonderfully empty page, which has all the templates rendered at the top, left, right and bottom, then you are one hot webmaster and deserve a well-shaken martini.
f. When you recover from the effects of the martini, you can start your propagation program. Open the first page you want to change in Notepad. Let's call it "page.html". Stretch the window wide and short. Locate it in the top half of your screen. Think of it as the source.
g. In a new version of Notepad, open "template1.html". Stretch the window wide and short and drag it to the bottom half of your screen. Think of it as the target.
h. Right-click-copy only the unique page content from "page.html" and right-click-paste it between the annotation tags you just created in "template1.html".
j. Save "template1.html" under a new filename: "page.html". Close the original source "page.html" WITHOUT saving it.
k. Upload the modified "page.html" to your server, then view it in your browser by navigating to it normally. Be sure to refresh the browser to make sure you are seeing the latest version. If it looks like the original page, congratulations!
l. View the page source. You should see five sets of annotation tags sprinkled through the page. Four of those sets will surround content which was included by the server from your template files. The fifth set will surround the body contents which you manually imported.
m. Now that you know how to update your web pages so that they share a single set of templates, consider the following:
Let's say that your site has 50 pages. You will need to perform the manual update 50 times. After all that work you will have a site visually identical to what you had before. And it will be only moderately more attractive to search engines.
Why not do some SEO (Search Engine Optimization) as you go?
Step 10 - Improve SEO - Search Engine Optimization - as You Go
a. Search engines love regular improvements to websites. Take this opportunity to tantalize them with improved content.
b. Think about the time you can devote to the effort. If you, like me, have a day job and a family, pick a rate of work you can live with. Rather than pulling an "all-nighter" and templatizing your entire site, consider changing, for example, only 3-5 pages per day. At the end of each work session, run a new sitemap and notify Google.
See How To Make & Submit a Google Sitemap
Quick & Dirty Checklist for Upgrading Your SEO
a. Write down a list of maximum 4 keywords or key phrases per page.
b. Include these in page title, meta-keywords, meta-description.
c. Be sure your pages use 2-3 sets of <h1> and <h2> headers, and that your key words and phrases are presented there.
d. Be sure your keywords and phrases are also written within the paragraphs, especially at the beginning and at the end.
e. If your pages contain over 500 words within the unique body portion, consider splitting the content into two or more pages. If you do this, don't use identical keywords and phrases. Modify them slightly for each page to emphasize a different aspect of topic.
f. If you have images, be sure to utilize ALT tags for each image, and use variations of your key words and phrases in this text.
g. Very important: At the end of each work session, run and upload a new sitemap and notify Google.
Best of success to you in this substantial, important venture.
Stick with it and your site will become better immediately and much more easily improved in the future. Your feedback is most welcome.
Like this article? Bookmark it at Del.icio.us
To receive these postings hot off the keyboard,
subscribe to poingology, the newsletter
Mark Meshulam offers:
keyboard hotkey shortcuts and screen grabs,
email ticker reminder system,
send large files with FTP and links, all at
www.poingo.com
posted by Mark Meshulam at 8:55 PM
3 Talk to me!
thanks!
This came in really useful.
Excellent article. You can also add a line to the .htaccess file so it recognizes .htm file extensions in addition to .html. To do this add this line:
AddType text/x-server-parsed-html .htm
Hello
I really enjoy reading your blog. If i were you i would go to http://www.autosurfmonster.com and submit this blog for free so thousands of others can see it.. well i look forward to all the updates. thanks again.
Jessica
Post a Comment
Links to this post:
Create a Link
<< Home