william.baxterParticipantFebruary 3, 2020 at 10:15 amPost count: 9
How can I change the tab headings so they’re H2’s rather than H4’s?
I’m using tabs to display content, but I need them as H2’s as they’re effectively titles for SEO purposes.
Thanks in advance.marklchavesParticipantFebruary 4, 2020 at 1:29 pmPost count: 873
Interesting problem. I didn’t see an Avada hook for this in the Avada docs.
Shout if you have any questions.william.baxterParticipantFebruary 4, 2020 at 5:04 pmPost count: 9
Thank you for the very detailed reply.
I’ve tried the JS you created but I’ve been unable to re-create the outcome.
I can only imagine it’s because I can’t explicity change the property of body to include <body onload=”changeTabHeadingToH2();”>, or can I? A bit stuck with this one. I’m seeing no errors through the console so the JS is definitely firing correctly.
Many thanks 🙂
WillmarklchavesParticipantFebruary 4, 2020 at 10:20 pmPost count: 873
onload()is “old hat”.
I also added two
console.log()statements to the CodePen just so you see signs of life.
Yell if you get stuck anywhere.william.baxterParticipantFebruary 5, 2020 at 10:47 amPost count: 9
Worked absolute wonders! Top man.
Really appreciate the help and I’m sure others will find the solution useful 🙂
Willwilliam.baxterParticipantFebruary 5, 2020 at 12:42 pmPost count: 9
Quick question. Getting some really funky behaviour going on here…
When I inspect element, the JS loads the headings as H2. However, the source code of the page itself displays H4’s.
What could be causing this? I’ve tried putting the JS in the head, as I thought it could be caused by loading at the bottom of the body.
WillmarklchavesParticipantFebruary 5, 2020 at 2:09 pmPost count: 873
Yes, confirmed. My script accesses the DOM (document object model). That means my script must be at the end of the page. Bottom of the
</body>is where most inline JS should live on a page.
Also confirmed that what you are seeing in the source and dev tools is correct. They will be different.
The source from
ctrl Uis the original source generated by WordPress. The dev tools inspector shows the DOM that the browser actually renders. My script will load and run only after the page is loaded from the server and the DOM is built from the page source. After my script is run, the DOM is updated and displayed to the browser.
Hope that makes sense 😉
Enjoy!marklchavesParticipantFebruary 5, 2020 at 2:55 pmPost count: 873
I’m anticipating your next question. Will Googlebot see my new H2s? The answer is yes. It should. Because page rendering is done before the page is sent for indexing. That means Googlebot will see the H2s instead of the H4s.
If you discover anything different, let me know. I might have a server-side solution by then lol.
Ah, the joy of WordPress themes.william.baxterParticipantFebruary 5, 2020 at 3:41 pmPost count: 9
Thanks for the clarification.
Once again, appreciate the help you’ve provided 🙂
Willwilliam.baxterParticipantFebruary 6, 2020 at 9:29 amPost count: 9
Another question for you, Avada generates a tab ID for example #tab-8456764d35db1a5210g.
Is it possible to re-write this with ID’s pulled from the tab title.
So the URL would append #tab-1, #tab-2, etc.
Many thanks 🙂
WilljothaesParticipantMarch 10, 2022 at 4:11 pmPost count: 1
Thanks for this great help, Mark.
Exactly what i was looking for – just that i needed to get rid of Headings at all in the Tabs labels and needed to turn them into “p” / Paragraph – and your solution worked like a charm 🙂
Why turning them from h4 into “p”? Because the real valuable Headlines are “inside” the tab element (not in the tab label) and because i am using the same wording (like “Risks”) on many tab labels on different portfolio item single pages and my SEO tools complained about using same H4 headlines again and again. So using your solution and turning from H4 to “p” solved it just perfectly.
- You must be logged in to reply to this topic.