How I Do Page Level Meta Tags With Docpad

DocPad is a fantastic Node-based tool for generating static web sites.  I have used it on a couple of simple, content only web sites and it gives you all of the needed tools for templates, programmability and creating reusable components.  For all of those sites that don’t really need any server side functionality, it’s a great alternative that leaves you with a set of web site files that you can host right on Amazon S3.

In my time with DocPad I have only found one missing feature built in support for page level meta tags.  Search engine optimization is constantly changing and new features such as Open Graph and Twitter card tags are absolutely necessary for the visibility of your content on social media.  If you’ve combed through the DocPad documentation like I have then you have no doubt come across DocPad’s meta block as a potential solution.  Except the meta block strangely does not allow you to add meta tags to it as is the case with the style and script blocks.

I came up with another solution using the document meta data in DocPad that works great for me.  Here’s how it works:

In Your Layout File

Your layout file should define all of the meta tags that will have the same values across the entire site and then pull in the page level values from the document.  Here’s an example of what I do:

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="<%= if @document.url == "/index.html" then "website" else "article" %>">
<meta property="og:title" content="<%= @document.heading %>" />
<meta property="og:description" content="<%= @document.description %>" />

In the example above you can see that the og:locale tag is set to a static value, since that will stay the same across all pages. The og:type tag will choose between website or article depending on if it is the home page or not. Finally, I have the og:title and og:description tags pulling from my custom document metadata that we will add next.

In Your Documents

No configuration is required to add items to a document’s meta data on the fly.  All you have to do is update each file and define the meta data you need, then save and regenerate.  If you haven’t yet defined these, it’s no problem. Your generated output will leave them blank in the meantime.  Here’s the top of an example document:


---
title: "Home"
layout: "default"
isPage: true
heading: "My Home Page"
description: "A description for the home page."
---

…Your HTML content here.

When your site is generated, the heading and description meta data will be pulled into the meta tags that we set up in the layout file.  This method works great for me.  I only define information on the page level that is specific to that page.  It’s right where it should be.

Advertisements

From the Bookmarks Bar – August 3, 2013

It’s a little late, but I’ve got a few awesome links for this week’s bookmarks bar.  They include a great new piece of open source software, an update to an awesome web development framework and some suggestions for self improvement for developers.

Tox

Tox is a brand new piece of open source software for secure messaging, calls and video chat.  It was created to provide a more secure alternative to Skype following the news that Skype was providing data to the NSA.  While it is not in wide release at this time, you can pull from the Tox git repository and build the application on your machine, if you would like.

12 Things That Would Make You a Better Developer

While I can’t say that I agree that all of these are absolutely necessary, many of these can help you become a much more efficient developer at the least.  I would recommend the section on pushing for more automation.

Bootstrap 3

Twitter’s Bootstrap framework for front-end web development has just unleashed the release candidate of version 3.  The framework boasts an all new flattened look with a focus on speed improvements.  Don’t like the look?  There are plenty of add ons out there to customize Bootstrap to your liking!

Thanks for checking out this week’s links.  Found any cool Bootstrap designs?  Let me know on Twitter!