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.

Automatically Re-size Height in a Facebook Page Tab App to Prevent Scrolling

Facebook Page Tab Apps allow you to show any web content in an app that displays on your Facebook page.  This could be anything from a contact form to a survey, or even a newsletter signup form.  The content is displayed on Facebook through an IFrame, but it resides on your server, allowing you to connect to any necessary databases or web services to create a rich user experience.

If you have created a Page Tab App, you know that they are restricted to a maximum of 810 pixels in width, but no maximum height is specified in Facebook’s documentation.  During testing, you may find that you have to scroll in both the Facebook window and in the IFrame to view all of your app’s content, resulting in very unfriendly behavior for the end user.

With a small snippet of JavaScript and HTML, you can automatically re-size your Page Tab App’s IFrame to the size of your content.  You just need to include Facebook’s JavaScript SDK and a call to your app’s canvas.

Here is the code:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
	FB.init({
	  appId      : '{PASTE_YOUR_APP_ID_HERE}',
	  status     : true,
	  xfbml      : true
	});
	FB.Canvas.setAutoGrow();
  };

  (function(d, s, id){
	 var js, fjs = d.getElementsByTagName(s)[0];
	 if (d.getElementById(id)) {return;}
	 js = d.createElement(s); js.id = id;
	 js.src = "//connect.facebook.net/en_US/all.js";
	 fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Just include this code on your page and Facebook will automatically re-size your app to the correct height so you no longer have to scroll inside the IFrame. The great thing about the setAutoGrow method is that it sets a timer to automatically re-size your app’s canvas at a 100ms interval, so it will update if you have loaded any dynamic content on your page. Nice and easy!