Archived topic
Surround logo with h1 tags?
3 replies · Started by Chris on December 1, 2022
Viewing posts 1–4 of 4
I found a post that details how to add an alt value to the logo's img:
add_filter( 'generate_logo_title', 'tu_change_logo_alt' );
function tu_change_logo_alt() {
return 'Your alt title';
}What I would also like to do is surround the logo with h1 tags, so that alt text is seen by Google as text inside an h1 (https://www.seroundtable.com/google-text-in-an-image-alt-attribute-h1-29007.html)
Optimally, the h1 tags would also surround the anchor tags:
<div class="site-logo">
<h1> <!-- h1 start tag insert here -->
<a href="https://site.com/" rel="home">
<img class="header-image is-logo-image" alt="Site Name" src="https://site.com/wp-content/uploads/logo.png" width="412" height="182" />
</a>
</h1> <!-- h1 end tag insert here -->
</div>Can you suggest a way to do that?
Thank you,
Chris
Hi Chris,
To alter the HTML structure of the logo, you can use filter generate_logo_output. Reference: https://docs.generatepress.com/article/generate_logo_output/
So, a potential code you can try is this:
add_filter( 'generate_logo_output', 'tu_logo_h1', 10, 3 );
function tu_logo_h1( $output, $logo_url, $html_attr ) {
printf(
'<div class="site-logo"> <h1>
<a href="%1$s" title="%2$s" rel="home">
<img %3$s />
</a> </h1>
</div>',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
$html_attr
);
}Fernando - that's awesome, does the trick perfectly - thank you!
You're welcome, Chris!
This archived topic is closed to new replies.
