Pagefind uses h1.header-title as page title for results - what could we do?

[theophinetheodore]

While trying to integrate Pagefind into a Hugo website with Typo set as the theme, I noticed that all the search results seemed to have {{ site.Title }} as the title, and not the page title.

Here's a screenshot:

As you can see in the screenshot, the link leads to /posts/post1, but the link is named "My New Hugo Site", which is the site's title, instead of post1. (Ah, just noticed the screenshot doesn't include the cursor, my bad.)

I looked into what was causing this, and it turns out Pagefind ranks headings and since the site title is the first <h1>, Pagefind assumes it to be the page title.

Potential Solutions

1. Add data-pagefind-meta="title" to the page title.

layouts/_default/single.html:

<h1 class="single-title" data-pagefind-meta="title">{{ .Title }}</h1>

This is the most elegant solution in my opinion. But I assume you guys might be averse to adding stuff related to another project, but it would solve a lot of headache when trying to integrate Pagefind with a Hugo website with Typo enabled. Another thing to point out is, I haven't looked much into the source code, but I'm sure there are titles in other pages as well, so we have to add this attribute to those <h1>s as well.

2. Replace the <h1> of header-title with a <h2> and let the page title retain its <h2>.

In layouts/partials/header.html, replace:

<h1 class="header-title">
        <a href="{{ site.BaseURL }}">{{ site.Title }}</a>
</h1>

with this:

<h2 class="header-title">
        <a href="{{ site.BaseURL }}">{{ site.Title }}</a>
</h2>

Sure, the issue could be solved since the header title has less ranking than the page title, but maybe it can cause issues with screen readers. (I have no idea.)

3. Remove the <h1> entirely and keep the <a> tag.

<a class="header-title" href="{{ site.BaseURL }}">{{ site.Title }}</a>

This too would work, but .header-title CSS needs to have a text-decoration: none to remove the underline. Also, screen reader probs.

[tomfran]

I am not in favor of adding custom tags for someone that might be using a given search provider.

I guess there might be a way to tweak your Pagefind setup to index things as you want.
If there's not, I would go on and apply one of your required changes to your local theme directory.

Note that you might need to tweak css as-well, I suggest using custom CSS for that.