How to set title in Halogen?

Hi everyone!

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

1 Like

You want to change it dynamically?

Depending on current route

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.

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>?)

What other head tags would you want to set?

1 Like

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"

Like <meta name="description>

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

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.

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

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!


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)