How to set title in Halogen?

Help
,
#1

Hi everyone!

What is the most idiomatic way to set <title> and any other head <tag> in Halogen?

1 Like
#2

You want to change it dynamically?

#3

Depending on current route

#4

I think Halgen works within the body tag. Though I’m sure you could change that.

Have you looked at selectElement from Halogen.Aff? You could query select the title and keep a refernece.

#5

Not proficient in Halogen, but I would think that something like this would work: Attempt to setTitle in Halogen · GitHub.

It doesn’t appear to work on TryPureScript though (but that may be just because it’s rendered in an <iframe>?)
https://try.purescript.org/?gist=00600f1deb03b0db401f2a309d4f35f7

What other head tags would you want to set?

1 Like
#6

It’s a sandboxed iframe, yes.

FWIW, in your example, there’s no reason for the intermediate document binding.

HTML.window >>= Window.document >>= HTMLDocument.setTitle "Hello"
2 Likes
#7

Like <meta name="description>

#8

I also haven’t tested this, and it’s not very pretty, but maybe something like this could work: Set title and meta tag from Halogen · GitHub

(Based on this StackOverflow post: jquery - Is it possible to use JavaScript to change the meta-tags of the page? - Stack Overflow)

In TryPureScript there’s no existing <meta name="description"> tag on the <iframe>, and this won’t append a <meta> tag if missing, so not really able to confirm that it works as expected.

Just curious :slight_smile: why would you want to set <meta> tags dynamically from JS?

1 Like
#9

I’m trying to optimize my SPA for SEO, so the Google crawler would fetch a dedicated description for every page. I’m not sure it’ll work, but it’s worth trying.

#10

In order to do that you’d need to zet the meta tags on the server side (I think)

#11

Not necessarily these days, the google bot executes JavaScript and all sorts as far as I’ve seen. I worked on an SPA that was purely front-end and google indexed text from it that was only ever rendered client side!

4 Likes
#12

Hmm, interesting!

I guess another problem would be not having dynamic media previews, altho this might not be so important depending on the app (not sure about every platform, but I know discord doesnt run client side js for example)