[SOLVED] How to use turbolinks and have meta tags specific to each page for SEO?

How to use turbolinks and have meta tags specific to each page for SEO?

Question is how to both use turbolinks and have meta tags specific to each page?

Here's application.js:

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require dashboard
//= require turbolinks

Here's the application layout view:

<title><%= yield_or_default(:title) -%></title>
<meta name="description" content="<%= yield_or_default(:meta_desc) -%>">
<meta name="keywords" content="<%= yield_or_default(:meta_keywords) -%>">
<meta name="robots" content="<%= yield_or_default(:robots) -%>">
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

Here's the dashboard CoffeeScript:

jQuery ->
  $("#list_tags").html(list_tags())

list_tags = ->  
  "Title: \"" + $('title').text() + "\"<br />" +
  "Meta Description: \"" + $('meta[name=description]').attr('content') + "\"<br />" +
  "Meta Keywords: \"" + $('meta[name=keywords]').attr('content') + "\"<br />" +
  "Robots: \"" + $('meta[name=robots]').attr('content') + "\""

At the top of the application layout:

<%= link_to "Dashboard", root_path -%>
<%= link_to "Reports", reports_path -%>
etc...

As you click back and forth between Dashboard and Reports, the title tag displayed changes with each click as you'd expect (turbolinks updates the title each time), however the meta tags don't change until you do a full page refresh.

How can I bust turbolinks for specific head elements?

If I add data-no-turbolink on every link going to a page with unique meta information, I don't see what benefit I'd be getting keeping turbolinks.

I read through the issues for turbolinks on github and other people have asked the question but I didn't see a solution? Hopefully I'm missing something obvious.

Solution

I'm going to answer my own question and leave this here in case someone runs into the same confusion.

The way to "bust turbolinks" for the meta tags and other code/scripts is to list then in the <head> section before turbolinks.

Here's a gist of what ended up working for me.

While this renders the page with the desired updated <head> section, the gotcha to keep in mind is that the DOM will still be what's been cached.

In other words, the above code is correct. Just not my expectations of how it would work.