Lukas Z's Blog

Reminder: Put Semantic Data on All Your Pages

Just a quick reminder for all you web-devs out there: Put semantic metadata on all your pages.

Here’s the three usual suspects that I consider most important:

  1. Rich Snippets, there is a handy testing tool from Google
  2. Twitter Cards, there is a Twitter preview tool
  3. OpenGraph

In case you don’t know why you should care: If someone posts a link to your page or if it shows up in search results, it will look better and give the user more information on what to expect when they click it.

Just for fun, you can create a helper to do that. Here’s my crappy version (which doesn’t support Rich Snippets, because they have a different purpose and usage):

require 'rubygems'
require 'action_view'
require 'erb'

class MetadataHelper

  include ActionView::Helpers::TagHelper

  def initialize( opts = {} )
    @title        = opts[:title]
    @url          = opts[:url]
    @description  = opts[:description]
    @image_url    = opts[:image]
    @author       = opts[:author]
    @name         = opts[:name]
    @type         = opts[:type]
  end

  def old_school
    Array.new.tap do |arr| 
      arr << ttag( @title )
      arr << mtag( 'description', @description )
      arr << mtag( 'author', @name )
    end.compact
  end
  
  def twitter_card
    Array.new.tap do |arr| 
      arr << mtag( 'twitter:card', 'summary' )
      arr << mtag( 'twitter:url',  @url )
      arr << mtag( 'twitter:title', @title )
      arr << mtag( 'twitter:description', @description )
      arr << mtag( 'twitter:image', @image_url )
      arr << mtag( 'twitter:author', @author )
    end.compact
  end

  def open_graph
    Array.new.tap do |arr| 
      arr << mtag( 'og:type', @type )
      arr << mtag( 'og:url',  @url )
      arr << mtag( 'og:title', @title )
      arr << mtag( 'og:description', @description )
      arr << mtag( 'og:image', @image_url )
    end.compact
  end

  def all
    [ old_school, twitter_card, open_graph ].flatten.join( "\n" )
  end

  private

  def mtag( name, content )
    tag( :meta, { name: name, content: content }, false, false ) if name && content
  end
  
  def ttag( content )
    content_tag( :title, content ) if content
  end

end

template = ERB.new <<EOS
<!DOCTYPE HTML>
<html>
  <head>
    <%= helper.all %>
  </head>
  <body>
    <p>Hello people!</p>
  </body>
</html>
EOS

helper = MetadataHelper.new( { 
  title:        'Test', 
  url:          'http://www.lukaszielinski.de', 
  description:  'Just testing',
  type:         'article',
  author:       '@lukaszielinski',
  name:         'Lukas Zielinski',
  image:        'http://mugs.mugbug.co.uk/500/mb.i_love_html_red_love_heart.coaster.jpg'
} )

puts template.result( binding )

And yes, I know, I have to put it on all my pages, too. But the day only has so many hours..

P.S.: You can follow me on Twitter.

Comments

Webmentions