I’ve been doing some old-skool hand-coded sites lately, and I’m loving it. Don’t get me wrong, I really enjoy working with WordPress, but somehow actually coding the pages from scratch is really satisfying. But there’s really useful and convenient reasons why developers and clients want to use a Content Management System like WordPress or Joomla, primarily: on the fly page creation with customization.
I mean, seriously, who wants to copy and paste the navigation bar (for example) into EVERY page of a website? Even if it’s 5-10 pages, once you make one change you have to replicate that exact change in all the pages or else you risk errors and a weak user experience. Well, the answer most folks go to in order to speed up this workflow issue is to use php includes for all the basic layout elements that are repeated for every page. For example, in my current project I have a php include for each of the following:
- head.php
- nav.php
- foot.php
- sidebar.php (optional)
- contact-form.php (optional)
If I change a link in the Navigation file, it is changed in ALL the files right away. Also, whenever I make a change to the <head> in my header.php file it is changed in all the files right away. But on each page, instead of seeing all that html code for the <head> or the navigation, I just see a couple lines and then the main content area. What this does for me is each page provides a totally consistent user experience, but the code is kept to a minimum so I can focus on the content (because Content is King, right?).
That’s Dumb! What About SEO!?
If you know anything about SEO, you have automatic objections to this approach. If every single page of the site has the same exact head information, then Google will spit it out like Vegemite (yes, Aussies, I’m another American who can’t stomach the thought of that stuff).
So here’s how I leverage PHP to get modularized HTML templating with unique meta tags in the HEAD. Here’s the code that I put at the top of each unique page. I’ve annotated it to explain each line.
/* Keep this lower-case. It needs to be lower-case for the page id,
but will be converted to Title Case for the page title. */
$pageTitle = "about us";
/* This is your unique description of this page. It is used for both
the meta tag AND the Facebook Open Graph description */
$description = "Your unique description for this page. This description will be used for both the meta tag and the og:description tag automatically.";
/* Insert exactly how you want this page to appear in the
browser address bar according to the rules you
set-up in your htaccess file. It is used for both the
canonical meta tag AND the og url */
$url = "http://www.puretechmanufacturing.com/about";
/* These next items should be obvious. */
$canonical = "<link rel='canonical' href='$url' />\r\n\t\t";
$ogurl = "<meta property='og:url' content='$url' />\r\n\t\t";
$ogtitle = "<meta property='og:title' content='About PureTech Manufacturing'/>\r\n\t\t";
$ogtype = "<meta property='og:type' content='article'/>\r\n\t\t";
$ogimage = "<meta property='og:image' content='http://www.puretechmanufacturing.com/images/PTM-logo.jpg' />\r\n\t\t";
$ogdescription = "<meta property='og:description' content='$description'/>\r\n";
/* This is the variable called in the default header that pulls
all this information in. */
$ogs = $canonical . $ogurl . $ogtitle . $ogtype . $ogimage . $ogdescription;
/* This is how we include the header. It has to be last in order for all the
previous information to be pulled into it. */
include('head.php');
In my versions, the comments are out and so it only takes up 11 lines. Plus I use NotePad++ which gives me syntax highlights so I can just ignore all the php at the top of the file really easily when I need to work on content. But all of this doesn’t matter if the <head> doesn’t pull that information into it. So this is the code in my head.php file which is pulls the unique SEO and Open Graph data.
<title>My Website | <?php if ($pageTitle)echo ucwords(strtolower($pageTitle)); else echo "Generic Title Text"; ?></title> <meta name="description" content="<?php echo $description; ?>"> <?php echo $ogs; ?>
Of course there’s other scripts and css styles in the head as well, but in order for all the unique stuff to be pulled in that’s ALL I need.
A couple cools tricks to notice: I use a couple strings multiple times to minimize the amount of code and unique info that I have to enter. But in the case of the page title, I wanted to have the Page Title appear as Title Case for the actual page title, but lower case in the body id tag for CSS purposes (not included in the code above, but it’s just <body>). So in the page code, I insert the page title lower-case, then use the handy php function “ucwords” for the <title> tag in the head.php file. The other nice trick is that all the Open Graph tags are inserted into the head just by echoing the $ogs string which is concatenated in the page code.
Some might say that it’s just as much code to look at there as it is to include the whole <head> in each unique page. Technically, factually, it really isn’t. But it might *feel* that way to some people. Well have at it as you like. This *feels* really slim and optimized for my purposes. I also find that I tend to ignore the <head> once I have it set, so having all this info at the top of each unique page gives me the chance to also update it easily when content changes.
So now I have small content-focused files, with the ability to customize the necessary SEO and Open Graph tags on a per file basis without having to sift through piles and piles of code. Fun, right?
Thanks for sharing