When it comes to updating title tags, meta descriptions, canonical link elements, etc. on a page-by-page basis, we often rely on the power of the client’s CMS. Whether we’re using WordPress plugins or Drupal modules to get the job done, we generally have a process that is efficient and feasible. No tinkering with template files. No scouring the web for alternative solutions. Simple implementation – just the way we like it.
Content Management Systems with built in SEO utilities are great. What happens, though, when you’re tasked with implementing all of the pertinent HTML elements page-by-page on a PHP based website with a static <head>? Let’s dive right in.
1. Make that <head> dynamic!
In most cases, each static PHP file, be it index.php, contact.php, what have you, will reference the same header.php file via an include statement:
<?php include('header.php'); ?>
The include statement tells the server that any code within header.php should also be included in the file being requested. This way, we don’t have to write a lot of the same HTML on every content page. Instead, we have this one static file from which we can pull the necessary code. Note that theheader.php file doesn’t necessarily contain only the HTML <head>. Generally, it will include any code that is reusable at the top of the HTML document throughout the website (including the logo, navigation, banner, etc.). Let’s look at an example of code we might find in header.php:
<html lang="en">
<head>
<title>Page Title Here</title>
<meta name="description" content="Meta description goes here.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
. . .
This is a bit stripped-down, of course, but it’s serviceable. Notice, though, that our title tag and meta description have static text values. Even if we edit these to be a bit more descriptive of a particular page, we’ll be effectively applying the same title and meta description to every page on the website. Not good. Fortunately, we can make these dynamic values (unique to each page) by using PHP variables. We’ll use the
echo construct to place the necessary page-level
variables(which we haven’t yet created) in the right spots in
header.php.
<html lang="en">
<head>
<title><?php echo $pageTitle; ?></title>
<meta name="description" content="<?php echo $pageDescription; ?>">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
. . .
It’s safe to say that we’ll be implementing titles and meta descriptions on each page of the website. What about something like a canonical link element or meta robots markup, though? We might not want these on
every page, but rather just select pages. To handle these elements, we’ll use a couple of
conditional statements.
If the canonical URL and/or robots content is defined for a given page,
then we’ll include the element(s) in the
<head>. If the condition within the parentheses is met, then the code within the brackets (
{ ... }) is executed.
<html lang="en">
<head>
<title><?php echo $pageTitle; ?></title>
<meta name="description" content="<?php echo $pageDescription; ?>">
<?php
if($pageCanonical)
{
echo '<link rel="canonical" href="' . $pageCanonical . '">';
}
if($pageRobots)
{
echo '<meta name="robots" content="' . $pageRobots . '">';
}
?>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
. . .
Now that we have ourselves a <head> with elements that rely on page-defined variables, we’ve done most of the “hard” work. Let’s move on to defining these page-specific variables.
2. Define page-specific PHP variables
So, for each page on our site – all individual PHP files – we’ll need to define, at a minimum, two variables ($pageTitle and $pageDescription) before our include(header.php) statement. Ideally, we would write in some conditionals to catch cases where these variables aren’t defined; but for now, we’ll just be extra careful to define them on each page. We have the option of defining two additional variables ($pageCanonical and $pageRobots), as well. To define a variable, we use the syntax: $variable = "This is a string";. Let’s go ahead and assign values to all four of our variables for the home page. We’ll be working with the index.php file. (The topic of our site is Orange Widgets).
<?php
$pageTitle = 'Orange Widgets | The Best Orange Widgets';
$pageDescription = 'Visit AwesomeOrangeWidgets.com to find the best orange widgets in all the lands (Oz included).';
$pageCanonical = 'http://www.awesomeorangewidgets.com/';
$pageRobots = 'noindex,nofollow';
include('header.php');
. . .
?>
Simple enough, right? We’ve defined our title, meta description, canonical URL, and meta robots content with four PHP variables. Let’s see what the top of the source code looks like forindex.php.
<html lang="en">
<head>
<title>Orange Widgets | The Best Orange Widgets</title>
<meta name="description" content="Visit AwesomeOrangeWidgets.com to find the best orange widgets in all the lands (Oz included).">
<link rel="canonical" href="http://www.awesomeorangewidgets.com/">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
. . .
Not too shabby, eh? While it might seem like a pain to declare these variables on a page-by-page basis, it’s really not much different than using All in One SEO for WordPress or something comparable for another CMS. Once you’ve familiarized yourself with the concepts outlined above, you’ll find that editing the files directly isn’t as taxing a process as you might have thought. For those of you working on small PHP-based websites, I highly recommend implementing the dynamic<head> elements we’ve discussed. What takes minutes to implement could yield years’ of worth.
