Add META Tags to WordPress Head

By  on  

The reason that WordPress is so developer-friendly is their awesome hook system.  Depending on a post category (or seemingly anything else), you can modify the contents of the page, the theme templates, and everything else.  WordPress is amazing.

One recent use case I had was wanting to modify the <meta name="robots" content="{index? follow?}"> tag based on the post's category:  if the post is in category A, use noindex,nofollow, otherwise use index,follow.  After all not every post is a reflection of the overall site content.

Completing the task was easy using the WordPress hook system, specifically the wp_head hook:

// Worker function - echo tags to be added to the header
function dont_follow_some_posts() {
  global $IMPORTANT_CATEGORIES, $post;

  if(isset($post) && is_single($post) && in_category($IMPORTANT_CATEGORIES['sponsored'], $post->id)) {
    echo '';
  }
  else {
    echo '';
  }
}

// Hook into "wp_head" to add meta tags
add_filter('wp_head', 'dont_follow_some_posts');

You can use this hook to add anything to the site <head> but CSS and JavaScript files have their own methods so don't use this hook to add styles and scripts.

Take control of your WordPress instances by using the awesome hook system!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

Discussion

  1. Hi David,

    This is cool. Instead of using SEO plugins we can use this to noindex and nofollow certain categories.

    By the way, What if I wanted to do this to tags?

    How do I do that?

    Regards.

  2. George

    Is there a reason to add index, follow even if its the default behaviour?

  3. This would be more easy for any developer to put directly into the code rather than using the category option in WordPress. But, Plugins in WordPress are also SEO friendly and mean a lot.

  4. Hello David, good tweak :)
    I would like to add that i ever you use this tweak, be sure that you are modifying a child theme and not directly on the theme himself. If you do not use child theme, on the next update, everything will be lost

  5. Nice one David,

    It might be worth mentioning that this needs to go in the themes ‘functions.php’ file.

    As Murat suggests, make sure you use a child theme otherwise all your changes vanish next time there’s an update. I always advise clients to use child themes (or create one for them when required) – https://codex.wordpress.org/Child_Themes has all the info you need…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!