Yii 1.x: Adding Title Tags, Meta Descriptions, & Other SEO Tags

As a followup to my post about SEO-Friendly URLs using Yii, I figured I would post this function I created for displaying SEO-related tags in the layout.

Using the Gii generator with the Yii Framework, a custom base controller is created that is a parent for the others. It already contained a property called pageTitle that was used in some of the views. I decided to keep this location and expand upon it by adding in some more properties related to search engine optimization, and then create a function to display the HTML.

Adding Public Properties (Variables) to your Class

In addition to the title tag and meta description, I’ve added the ability to not index pages, and the Open Graph meta tags used by Facebook. The pageRobotsIndex property defaults to true, and will only be used to display the noindex meta tag if it is specifically set to false. The “OG” or Open Graph meta tags determine the title, descriptive text, and thumbnail that is displayed on Facebook when you share a link or like a page.

I’ve left off keywords because they aren’t really used anymore. Google does not use them, and if you stuff too many keywords in there, Bing will consider it as negative (spammy). I am not bothering with them on new sites.

class Controller extends CController
{
    /* SEO Vars */
    public $pageTitle = 'Default Title Tag Here | YourWebsiteName';
    public $pageDesc = '';
    public $pageRobotsIndex = true;

    public $pageOgTitle = '';
    public $pageOgDesc = '';
    public $pageOgImage = '';

Create a Helper Function to Display them in your Template

I created the following function in the same Controller class. To be true MVC, I don’t think this really belongs in the controller, because it primarily deals with display. You could create a separate display widget if you want. I can still sleep soundly at night, knowing it’s here because it keeps it simple, it’s in the same place as the variables, I’m not going to have much else in the controller, and just about all the controllers are going to use it.

// Displays SEO-related Variables
public function display_seo()
{
    // STANDARD TAGS
    // -------------------------
    // Title/Desc
    echo "t".''.PHP_EOL;
    echo "t".''.PHP_EOL;

    // Option for NoIndex
    if ( $this->pageRobotsIndex == false ) {
        echo ''.PHP_EOL;
    }

    // OPEN GRAPH(FACEBOOK) META
    // -------------------------
    if ( !empty($this->pageOgTitle) ) {
        echo "t".''.PHP_EOL;
    }
    if ( !empty($this->pageOgDesc) ) {
        echo "t".''.PHP_EOL;
    }
    if ( !empty($this->pageOgImage) ) {
        echo "t".''.PHP_EOL;
    }
}

Call Function in Template

In the header include for my layout files (views/layouts), this function is then called to display the title tag and meta tags in the portion of the HTML.:

<head>
<meta charset="UTF-8">
<?php $this->display_seo(); ?>

Examples: Setting in Your Views

Here is an example of some view pages where values are assigned to these variables:

    // Basic
    $this->pageTitle = 'Your Custom Title Tag';
    $this->pageDesc = 'Your custom description here';

    // Example For a Model View. Appends app name set in config 
    $this->pageTitle = 'Your Title Tag | '.$model->name.' | '.Yii::app()->name;

    // For Facebook Sharing
    $this->pageOgTitle = $this->pageTitle;
    $this->pageOgDesc = $this->pageDesc;
    $this->pageOgImage = '/images/example.jpg';

    // If you don't want the page indexed
    $this->pageTitle = 'Some page to still crawl, but not index';
    $this->pageRobotsIndex = false;

Recommended Books For Web Devs

Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.

Comments on this Article

May 24th, 2012 | Link

Raheel Dharolia says:

Excellent post buddy… really helpful… Thanks
May 30th, 2012 | Link

Josh says:

Note that I have made an update to Line 24 of “Create a Helper Function” to not CHTML encode the display of the pageOgImage, since this is a URL.
June 7th, 2012 | Link

Mitch says:

Thank you very much. Just what I needed! Your method is a lot simpler then what I had in mind.
June 22nd, 2012 | Link

Pablo says:

Thanks a lot, I wasn’t looking for this, but somehow I finished in your blog and it’s really helpful.
September 24th, 2012 | Link

David says:

Love the blog and great idea, it was really helpful.