Escaping Meta Tag Content? Help

[rdegges]

Hi there.

I’m currently running into a frustrating issue that I can’t seem to figure out =/ I’ve got a template that looks like this:

<meta name="description" content="{{ .Page.Description }}">

Simple enough – it outputs a meta tag. Then in one of my posts (this is a blog), I’ve defined my frontmatter to look like the following:

---
layout: blog_post
title: 'blah blah'
date: 2018-09-21T00:00:00Z
description: "This is a cool post. It's pretty awesome."
--- 

I am snipping some supporting stuff out of the templates above for simplicity, but the issue is the apostrophe in the page’s description.

When I view the source code of the page, the meta tag appears like this:

<meta name="description" content="This is a cool post. It&amp;#39;s pretty awesome.">

I’ve tried using {{ .Page.Description | safeHTML }}, {{ .Page.Description | htmlEscape }}, and {{ .Page.Description | htmlUnescape }} – none fix the problem for me.

What am I doing wrong?

[FelicianoTech]

Instead of safeHTML have you tried using safeHTMLAttr?

In theory that should work since what you’re setting is the value of the content attribute.

[rdegges]

That doesn’t seem to work.

If I modify my template to look like this:

<meta property="og:description" content="{{ printf "%s" .Page.Description | safeHTMLAttr }}" />

Then I get the same output. If I use %q instead of %s, it gets worse, e.g. <meta property="og:description" content="&amp;#34;This is a cool post. It&amp;#39;s pretty awesome.&amp;#34;" />

I’m trying everything but running out of ideas.

[benmarte]

That’s pretty weird this is what I use for my description meta tags try doing this and letting it use your page content as your description to see if it still does the weird apostrophe thing.

<meta name="description" content="{{if isset .Params "description"}} {{.Params.description}} {{else}} {{.Page.Content | safeHTML | truncate 300}} {{end}}">

[rdegges]

Hmm, I just tried it that way (using .Params.description like you are instead of .Page.Description), but I have the same bad behavior. Hrmm…

What version of Hugo are you using? I’m on Hugo Static Site Generator v0.40.1 linux/amd64 BuildDate: 2018-04-25T17:16:11Z

[benmarte]

I’m using hugo 0.48, that might be the problem you have an older version of hugo.

[rdwatters]

Huh. Thanks for bringing this up @rdegges. Just started a new Hugo project yesterday and now realize that I’m having the same issue in <meta> tags. I’m using v0.49-DEV/extended on OSX, and both safeHTML and safeHTMLAttr don’t seem to help when I build the site.

[rdwatters]

I’m sure you’ve already checked this, but I think I never noticed because I’m always looking at the meta tags inside Chrome’s dev tools, which automatically converts #39; to an apostrophe when I’m doing local dev, so I didn’t notice. However, on build, I’m definitely seeing the same issue…

[rdegges]

Glad I’m not the only one! I just upgraded to 0.49 on linux (64 bit), and I’m still seeing the exact same behavior. I’ve tried just about everything but literally cannot find a way to get it to render without escaping the apostrophes.

I’m at a total loss here. Really confusing.

Anyone else have an idea?

[benmarte]

Can you post your config.toml? I have this on mine:

pluralizelisttitles = false

[blackfriday]
   extensions = ["hardLineBreak"]
   nofollowLinks = true
   noreferrerLinks = true
   hrefTargetBlank = true

Although I don’t think any of this matters just spitballing ideas here.

[rdegges]

Sure, here is my config:

name = "blah"
email = "blah@test.com"
baseURL = "https://blah.test.com"
googleAnalytics = "UA-15777010-4"
languageCode = "en-us"
title = "My Site"
theme = "mytheme"
pygmentsCodeFences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true

disqusshortname = "myblog"
paginate = 10
paginatePath = "page"

[permalinks]
  blog = "/blog/:year/:month/:day/:filename/"

[outputFormats]
[outputFormats.RSS]
mediatype = "application/rss"
baseName = "feed"

[FelicianoTech]

This issue looks similar to this: https://github.com/gohugoio/hugo/issues/5236

That could be “solved” by 1) Switching to safeHTMLAttr which is the right filter to use but also another PR to Go like the one I did here: https://github.com/golang/go/pull/27805

The problem for this one is that quotes can have an extra meaning since some people use single quotes for attribute values.

---

To summarize the above, the Go templating system is removing it because it’s suppose to. A new PR would be difficult (for me at least) because right now Go has a blacklist of characters allowed within quoted attributes. It makes no distinction between single and double quotes.

Meaning if I made a PR to allow a single quote, the way I did for the “+” character. it would also be allowed in a situation like this:

<meta name="description" content='{{ .Page.Description }}'>
``

In which case the single quote from your page's description would break the HTML.

[rdegges]

Hmm, I just read through your PR and the thread of convos on GitHub. It’s an interesting problem. It seems like sort of an edge case.

The blog I’m building is for my company which has quite a few readers (we’re migrating from jekyll). Unfortunately, I don’t know if Google bot (or any of the other search engine bots, for that matter), will properly render the page title/description for search results if an apostrophe is escaped like that.

Also, you mentioned that you can “solve” this problem by using safeHTMLAttr – can you show me how you do that? I tried safeHTMLAttr by doing: {{ printf "%q" .Page.Description | safeHTMLAttr }} but that didn’t change the results for me. Maybe I’m using it wrong? I also tried %s, for what it’s worth.

[FelicianoTech]

@rdegges

Also, you mentioned that you can “solve” this problem by using safeHTMLAttr

Only with the upstream changes to Go.

Do you use Google Search Console? If you do, you can see what information they’ll pulling so maybe you can see if their indexing things right that way? I’m not, this is something that needs to be solved.

[rdegges]

Ah, that’s a great suggestion! I’ll give the Google search console a test and report back tomorrow! =D Glad to find out I’m not crazy though.

[benmarte]

Does it still do it if it reads text from the content instead of the description? Maybe my server has an older version of go or something because I can’t reproduce this issue

[FelicianoTech]

It happens for me when text is read from .Params or something similar. I’ve tried with both Hugo v0.47 and v0.49, on Ubuntu 18.04.

[butaca]

I’ve seen this issue before and it’s related to the go html/template package:

[NOT A REAL PROBLEM] How to avoid HTML ascii code in SEO <meta> tags?

If you really want to know the technical stuff behind this, you could find this read interesting: https://golang.org/pkg/html/template/ Basically the template system that Hugo uses is context aware and doesn’t trust stuff that is parametrized. That’s why the safe functions exist, to tell the template explicitly “you can trust this”. However, I found that in some contexts even the result of the safe functions is filtered. I don’t think there’s a way to bypass this. However if you hardcode the at…

What I found is that If you minify your site with hugo --minify the attributes are unescaped.

[benmarte]

Interesting might be why I can’t reproduce, gonna have to try minifying to see if I can reproduce.

[RobSimpson]

Hi guys!

I have the same issue rendering through a shortcode, i.e.

{{< form-contact action="http://formspree.io/youremail+site@example.com" >}}

escapes the ‘+’ character. I tried all the safe options already.

Running hugo 0.49 on Ubuntu 18.04.