# Add JS to website title

**URL:** <https://discourse.gohugo.io/t/add-js-to-website-title/55103>\
**Category:** support\
**Created:** [June 20, 2025, 8:05am UTC](https://discourse.gohugo.io/t/add-js-to-website-title/55103 "2025-06-20T08:05:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![daviid](https://avatars.discourse-cdn.com/v4/letter/d/67e7ee/32.png) [@daviid](https://discourse.gohugo.io/u/daviid)\
**Post date:** [June 20, 2025, 8:05am UTC](https://discourse.gohugo.io/t/add-js-to-website-title/55103/1 "2025-06-20T08:05:05Z")

</div>

Hello. I would like to add some information from a JSON file to my website title. But I am a little bit lost in ‘title in hugo.toml vs. description on hugo.toml vs title on site’, I have to admit.

This is the repository:

> **[GitHub - davidbeckonline/pegel-konstanz\_website: Repo for Website...](https://github.com/davidbeckonline/pegel-konstanz_website)**
>
> Repo for Website https://www.pegel-konstanz.de/en/index.html - build with love on Hugo (with the relearn theme).

When you google for “Pegel Konstanz” (German for “Level of Lake Constance”) the result on Google will show up as

> _“Pegel Konstanz (Bodensee) :: Aktuelle und historische …”_

From what I understand, this is the combination out of title (“Pegel Konstanz - Bodensee”) and description (“Aktuelle und historische Informationen zum Pegel des Bodensees”). Whereby I am surprised about the “::”. This looks like I modified this.

In any case, I would like to adjust this to

> _“Pegel Konstanz (Bodensee) :: 362 cm (-1)”_

The values for `362 cm (-1)` are dynamic. I am pulling this info from  
`https://pegel-konstanz-for-website.s3.eu-central-1.amazonaws.com/json/currentdata.json`

On my website, this is handled with  
`<span id="website_api_current_level_head">...</span> (<span id="website_api_change_vs_yesterday_head">...</span>)</h2>`

See  
`https://github.com/davidbeckonline/pegel-konstanz_website/blob/main/content/_index.md?plain=1`

I am not even sure, whether this can be achieved with my setup. It is just that other websites on Google are listed with dynamic information in the title. And that looks very convenient for a website, which is displaying current data.

I would appreciate any feedback.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [June 20, 2025, 8:47am UTC](https://discourse.gohugo.io/t/add-js-to-website-title/55103/2 "2025-06-20T08:47:05Z")

</div>

The two colons are defined in your theme’s `title.gotmpl` partial.

You could change your JavaScript code in `static/js/read_api_current_json.js` so that it modifies the title instead of the `span` elements (or in addition to that).

Alternatively, modify said `title.gotmpl` after you’ve copied to the corresponding location in your `layouts` directory. That ensures that your modifications don’t get overridden by a subsequent theme update.

But given the complexity of your theme, I’d probably go with “modify JavaScript”.

Also, you could clean up your GitHub repository a bit. Eg, you’re git’ing your whole theme repository (it seems), including sample site etc. This is just eating space and making the structure more complicated than it needs to be.

---

<div class="post-metadata">

**Author:** ![McShelby](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mcshelby/32/15112_2.png) [@McShelby](https://discourse.gohugo.io/u/McShelby)\
**Post date:** [June 20, 2025, 1:23pm UTC](https://discourse.gohugo.io/t/add-js-to-website-title/55103/3 "2025-06-20T13:23:13Z")

</div>

I also recommend to change the title with Javascript:

The theme’s title is not configurable in way to match your requirement and overriding the `title.gotmpl` partial may cause pain in the future. Also, due to the dynamics of river water levels, this would require you to run page generation every time the levels change.