Dynamic meta tags in HTML head?
125 views
Skip to first unread message
di...@steadyhq.com
Apr 28, 2021, 6:23:42 AM4/28/21
to unpoly
Hi all,
I am struggling to find a good way to replace some meta tags in the head when inserting a new fragment.
Problem: page A links to page B via unpoly - page B needs different meta tags than page A.
Problem: page A links to page B via unpoly - page B needs different meta tags than page A.
Replacing the whole <head> leads to flickering as some browsers re-parse the CSS.
If anyone has an idea - I'd be very grateful.
Thanks & have a nice day, Dirk
randl...@googlemail.com
Apr 28, 2021, 7:40:06 AM4/28/21
to unpoly
Hi Dirk,
here are two approaches that have worked for us.
First, you could give the meta tag an `[up-hungry]` attribute. This way, if a matching meta tag appears in a response, it is updated in the current page, even if it wasn't targeted:
<meta name="description" content="..." up-hungry />
Unpoly is able to derive a target selector for this element because it has a `[name]` attribute. If you have something else, like a `link[rel=canonical]` you may need to give it an `[id]` attribute so an unambiguous selector can be derived.
We're using a different approach in an application that (for performance reasons) doesn't render a <head> for fragment updates. In this case we would attach the new meta description to the main content area of the page:
<main meta-description="...">
...
</main>
A compiler would pick up that attribute and transfer it to a meta tag in the <head>:
up.compiler('[meta-description]', function(element) {
let metaTag = document.querySelector('meta[name=description]')
let newDescription = element.getAttribute('meta-description')
metaTag.setAttribute('content', newDescription)
})
Best regards
Henning
Dirk Holzapfel
May 7, 2021, 7:54:27 AM5/7/21
to unp...@googlegroups.com
Hi Henning,
thanks a lot for your response - I was able to solve the problem.
Let me write down the exact problem & solution for reference:
Problem:
We have a lot of dynamic tags in our HTML head. Some of them are special to some pages, so we don't have a fixed set. Those tags need to change when Unpoly does fragment changes - otherwise crawler using JS get wrong head tags.
Solution:
I defined a static head section and a dynamic one. A compiler makes sure all tags after the title-tag get replaced. The dynamic tags to insert are given as a data-attr on the body.
<head>
<!-- static head content-->
<%= render SharedView, "_html_head.html", assigns %>
<!-- title tag is handled by unpoly - everything after this tag is replaced dynamically -->
<title>Foo Bear</title>
<!-- dynamic head content, replaced automatically -->
<%= render("_dynamic_head_content.html", assigns) %>
</head>
<!-- static head content-->
<%= render SharedView, "_html_head.html", assigns %>
<!-- title tag is handled by unpoly - everything after this tag is replaced dynamically -->
<title>Foo Bear</title>
<!-- dynamic head content, replaced automatically -->
<%= render("_dynamic_head_content.html", assigns) %>
</head>
<body data-dynamic-head-content='<%= render("_dynamic_head_content.html", assigns) %>'>
...
</body>
up.compiler('body', (el) => {
document.querySelectorAll('title ~ *').forEach(element => element.remove())
document.querySelector('title').insertAdjacentHTML('afterend', el.dataset.dynamicHeadContent)
})
document.querySelectorAll('title ~ *').forEach(element => element.remove())
document.querySelector('title').insertAdjacentHTML('afterend', el.dataset.dynamicHeadContent)
})
Thanks again for this amazing framework!
Best, Dirk
--
You received this message because you are subscribed to the Google Groups "unpoly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to unpoly+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/unpoly/85299155-169f-4732-8cba-a6aadc1d163an%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages