Search highlighting breaks HTML layout

Not quite sure what to suggest, as that title attribute appears to be coming from the theme more than anything.

For example, with the TwentyEleven theme, I’m getting rendered results of this:

<a  rel="bookmark"><em class="algolia-search-highlight">Spaceballs</em> the Flamethrower</a>

Where it’s not outputting a title attribute. That said, I know the Algolia object post_title property is definitely listed as one of the Algolia properties to highlight. Seems like the parts meaning to highlight are getting extra attributes included.

Closest way I can think of to get around this would be not as ideally editing your theme search results, and probably more ideally amending what attributes get highlight treatment via your Algolia index configuration settings.

By default Algolia applies to all searchable attributes, which the title is, but if you specify specific attributes, then it only applies to those.

Twenty Eleven is thirteen years old and isn’t a block theme; have you tried it with a current theme? The local .test link you posted isn’t reachable for me, so I can’t test it.

It was meant just to show the result and the lack of broken markup.

I’ve tried with TwentyTwentyTwo as well.

Here’s the title markup that came of it:

<a  target="_self"><em class="algolia-search-highlight">DDP</em> Yoga</a>

and for a visual, I have also provided a screenshot.

So at least at this point, it’s still a matter of the attribute being rendered as part of the results template.

I’m presently curious if the template is applying the the_title filter to this spot, as here’s the code we have for highlight with native search template plus title results. Or perhaps title="<?php the_title(); ?>"

public function highlight_the_title( $title, $post_id ) {
	$highlighted_title = $this->current_page_hits[ $post_id ]['_highlightResult']['post_title']['value'] ?? null;

	if ( ! empty( $highlighted_title ) ) {
		$title = $highlighted_title;
	}

	return $title;
}
add_filter( 'the_title', [ $this, 'highlight_the_title' ], 10, 2 );

Essentially replacing the title value with the returned highlighted result from Algolia. In your example case, it’s being output as part of an attribute instead of say inside some <h2></h2> tags or similar.

The output in question is coming from a PHP-rendered custom block, which contains the title attribute as a means to additional SEO improvement and usability strengthening. It would be disadvantageous to have to remove these attributes, as they will degrade the quality of the code in this regard.

I definitely get why you’d want it on the links, don’t get me wrong. The question is how to avoid for your specific case as us changing things somehow on our end, would affect many more.

I’m not seeing any easy way to conditionally apply our filtering, and instead of adding code our end to help you to add your own code to prevent it, it’s honestly be easier via Algolia Index configuration to just exclude the post_title attribute from receiving the spot in the $this->current_page_hits[ $post_id ]['_highlightResult']['post_title']['value'] array index, which comes from Algolia.

How would you suggest that I modify the behaviour; how can I access the $this->current_page_hits object which you’re referencing? Is there a hook available for this purpose?

The only ways I can think of to handle this are:

1. Somehow prevent the add_filter in the first place on our end. We’d need to figure out how to get the correct instance of the class and all that. It’s a bit of a mess.
2. We the plugin developers add an apply_filters() to the filter spot, where we’re potentially outputting the highlighted version of the title, to potentially return early. You the site owner using that filter to tell it to return early. See my comment about us adding code to have you add code to prevent the issue
3. You the site owner, if able, amending how the titles are being added, which would basically require getting the current $post global so that you could do say echo $post->post_title so that the the_title filter doesn’t get applied in the first place.
4. Edit your Algolia index configuration to only apply highlights only to specified attributes, one of which would NOT be post_title