Archived topic
duplicate page headings question
3 replies · Started by James on February 15, 2022
Hi Guys,
I was hoping you could help me with a couple of points.
If you look at this page: https://www.linux-wlan.org/vpn
You will see there are two headings (H1's) What Is A VPN?
The code that generates the two H1's is below
<h1 class="gb-headline gb-headline-1f9858a2"><span class="gb-icon"><svg viewBox="0 0 8.145 54.189" xmlns="http://www.w3.org/2000/svg"><path d="M4.262 40.052V0l-.439.438v39.613l.439.001zm-.439 3.853v9.845l.438.438.001-10.284-.439.001zm3.883-11.29v17.518l.439-.439V32.615h-.439zm0-8.273h.439V9.495l-.439-.439v15.286zM.439 21.074V4.056L0 4.495l.001 16.579h.438zm.001 6.274l-.439-.001v19.347l.439.439V27.348z"></path></svg></span><span class="gb-headline-text">What Is A VPN?</span></h1>
<header class="entry-header" aria-label="Content">
<h1 class="entry-title" itemprop="headline">What Is A VPN?</h1></header>
I can see that you can disable the second one by ticking the "content title" box
under disable elements in the wordpress page dashboard.
However, when I do this I'm left with the messy H1 code in the html source:
<h1 class="gb-headline gb-headline-1f9858a2"><span class="gb-icon"><svg viewBox="0 0 8.145 54.189" xmlns="http://www.w3.org/2000/svg"><path d="M4.262 40.052V0l-.439.438v39.613l.439.001zm-.439 3.853v9.845l.438.438.001-10.284-.439.001zm3.883-11.29v17.518l.439-.439V32.615h-.439zm0-8.273h.439V9.495l-.439-.439v15.286zM.439 21.074V4.056L0 4.495l.001 16.579h.438zm.001 6.274l-.439-.001v19.347l.439.439V27.348z"></path></svg></span><span class="gb-headline-text">What Is A VPN?</span></h1>
I just want to have one H1 on the page (in the blue image header area) but I'm afraid the long code above might not be search engine friendly.
I don't get why the code doesn't show the H1 in a clean and simple way as follows:
<h1 class="h1">What Is A VPN?</h1>
One more question. Can you please explain how I can reduce the height of the "blue earth" header so there is less space under the "What Is A VPN?" text.
Many thanks
James
Hi there,
the H1 Headline in the Block element ie. this one: <h1 class=”gb-headline gb-headline-1f9858a2″> contains an inline SVG image, which is the additional code you see. Search engines know how to read HTML, so they will know what to do with that code and they will identify the text within.
If you do want to clean that up, then you will need to remove the inline SVG icon.
You can do that by editing the Block Element titled: Global Page Header found in Appearance > Elements ( or via the Admin Bar Elements menu when viewing the page ).
Select the Headline Block and delete the Icon SVG HTML:
https://docs.generateblocks.com/article/headline-overview/#icon
And whilst you're editing that element - your second question, select the Container Block and adjust the Bottom Padding.
Thanks for clarifying the H1 and padding issue David and for your fast support.
I have already changed the padding and will now decide whether or not to bother removing that svg HTML.
Cheers
James
You're welcome!
