Adding To The Head of The Page

Chapter 1 - HTML and SEO

Problem

You want to add custom tags to the <head> part of a page.

Solution

Use the toWodgetHead function which comes with Yesod and accepts a hamlet widget.

defaultLayout $ do
  let keywords = "Keyword1, Keyword2, Keyword3"
  let twitterTitle = "This is a nice page"
  toWidgetHead([hamlet|<meta name=keywords content=#{keywords}>|])
  toWidgetHead([hamlet|<meta name=twitter:title content=#{twitterTitle}])

Discussion

In the example we used the toWidgetHead function twice to add two different <meta> tags. The function itself can add any widget to the head part of the page. Unfortunately it is not aware of the parts we have already set. Hence, we need to be careful to not add parts multiple times.