[Obsidian Publish] Use H1 (when available) rather than filename as webpage Title on Obsidian Publish

[sampajano]

Use case or problem

Currently, Obsidian provides the option to “Hide page title” on Published pages.

When this option is turned on, the H1 (i.e. Heading 1), instead of the filename, will effectively become the title which user sees for each page.

However, the filename is used as the Page Title, which shows up primarily in 2 places:

1. Google Search result — This is very important for my use case because I usually have a much more detailed H1 title, and often containing special characters, whereas my filenames are kept short and concise (and free of special characters) for ease of typing (an example). When the filename is shown in Google Search results, it’s NOT representative of the real title of my page.
2. The name of the Chrome tab and bookmarks — This is less of a concern for me but it’s still helpful to have the user see a the same page title (which is the H1) show up as the tab name — it’s more consistent behavior for the viewer.

Proposed solution

Use the first H1 tag available on the note as the Page Title (explained above) on Obsidian Publish hosted pages. If no H1 is available, then fallback to using the filename as the page title, as it’s doing today.

Current workaround (optional)

Not aware of any workaround. Would appreciate any workaround ideas if there are any!!

Related feature requests (optional)

This request is somewhat similar to the a previous FR but it’s actually different — it’s specific to Obsidian Publish but not the main app — it’s a less intrusive feature and potentially much easier to implement (e.g. through post-load javascript).

---

This is an important feature to me and would greatly appreciate any considerations and help! Thanks!!

[sampajano]

Actually… Right after filing the FR, i came to realize that this can be done with Obsidian’s custom JS support, So i have a solution now!

With the simple code snippet like this:

const first_h1 = document.getElementsByTagName("h1")[0];
if (first_h1) {
  document.title = first_h1.innerText;
}

---

That said, i’d still think it would be a good default behavior for Obsidian Publish, when the “Hide page title” option is turned on — I’d say it’s the more expected behavior.

Thanks for considerations!!

[sampajano]

Actually, i’m not sure if my above mentioned solution will affect Google Search results — since that might only rely on the <title> tag of the page.

Will report back once i confirm in a few days…

[obsequious]

See Use H1 or front-matter title instead of or in addition to filename as display name

[sampajano]

Thanks for the info!

Although, does that solution only work on the Obsidian app?

My question is regarding the Obsidian Publish webpage title. Would that works too?

[sampajano]

According to this page, Google seems to be primarily relying on the <title> tag for the page title.

So my javascript-based solution would likely not work (or consistently work) for Google search results.

[sampajano]

I have confirmed that Google Search results are NOT fixed by the javascript fix i mentioned earlier – it still shows the filename as the page title.

[sampajano]

An alternative idea is to allow the page title to be specified using Frontmatter.

[maxen2021]

Second this. Building a zettelkasten with numeric filenames does not look good on the website at all.

Custom JS requires my own domain and certificate, and I don’t see a way to modify the file tree either:(

[Tagg_Lee]

It could be not related to this topic, i just want to tell you this.
You can fix the url with “permalink” in the frontmatter.

https://medium.com/@mtzfox/format-obsidian-publish-urls-with-templater-and-yaml-3eca397a5629

[hex.16]

Hey @sampajano , do you find a way to properly address this?

[vaniwiki]

I need to be able to set meta header title separately from the filename. My pages are named 1, 2, 3, 4, and so on, which doesn’t make for nice SEO titles. The H1 or even frontmatter title property would work well for me. Another things that doesn’t work for me is the description property, that have been advertised to work in the official documentation… Yes, I have a custom domain.

[kevchoi]

This would be very helpful because my notes include dates and numbers, which really messes Google search results and page titles in tabs and bookmarks! Would love page title to be specified used frontmatter.