Change blog post title from Header 2 to Header 1 (Java or CSS Preferred)

Hello!

I've recently changed my site template to Tudor (Skye Family), and noticed that most of my blog pages don't have an H1 associated with them.

For example, on this blog page:

https://bitbloggist.com/video-game-blog-collection/top-10-switch-games-so-far

The text "10 Best Switch Games Right Now" is automatically classified as an H2 instead of an H1. There's no way to change this in the style editor, so I believe I'll need some custom CSS to change this.

Also, this change only needs to apply to individual blog posts, as I don't want my home page to have multiple H1's listed.

Thanks in advance!

@BitBloggist CSS can't change h2 to h1, and any html tags.You need to edit Template Files, and change h2 to h1 tag.

Thanks @tuanphan. That makes sense. So each time that I go through and create a new blog, I'll have to change the heading from h2 to h1, or is there a section of the code that will make this happen automatically?

@tuanphan Would getting tricky with some CSS help though? My thought is maybe to hide the Blog Post Title/Item Title on the Blog Page, and then Manually Add the H1's at the top of the post. Would there be some way to still display the date and category tags?

@BitBloggist As far as I know, to change a tag from h2> h1, you will need to use JavaScript or edit the Template, then type h1 instead of h2.

With CSS, you can hide / show any element on the web

@tuanphan, I have zero expertise when it comes to using Java, and downloading all of the required portals to make changes... I guess I'll just have to wait until a fix comes out?

You definitely can update the template to change this to be a <h1> tag instead of an <h2>. You would need to turn your site on for developer mode, pull down the code, change one line of code (change line 14 or blog.item to be an <h1> instead of an <h2>), then commit that back to your site. 

If you are still trying to fix this reach out to me if you are running into any issues.

Actually you could add a Code injection as well if you wanted to.

<script>
	window.onload = function () {
		var els = document.querySelectorAll('.entry-title--large');
 		for (var i = 0; i < els.length ; i++) {
            els[i].outerHTML = '<h1>' + els[i].innerHTML + '</h1>';
 		}
	}
</script>

if you want to change to something different just change the <h1> tags.

Hi, 

I tried your code injection which has been working well! There's only one problem is that when I used this code, I cannot change the blog post title. The code have to be removed to change the copy.

Can you please help me on this?

Thanks!

On 11/14/2020 at 6:15 AM, TessPham said:

Hi, 

I tried your code injection which has been working well! There's only one problem is that when I used this code, I cannot change the blog post title. The code have to be removed to change the copy.

Can you please help me on this?

Thanks!

Hi. Do you still need help on this?

Yes I figured it out! Thanks!

On 4/27/2020 at 5:13 PM, Kennyv said:

Actually you could add a Code injection as well if you wanted to.

 

<script>
	window.onload = function () {
		var els = document.querySelectorAll('.entry-title--large');
 		for (var i = 0; i < els.length ; i++) {
            els[i].outerHTML = '<h1>' + els[i].innerHTML + '</h1>';
 		}
	}
</script>

if you want to change to something different just change the <h1> tags.

@Kennyv @tuanphanWould just adding this code injection do the trick for all my blog titles? I have added the code injection to the HEADER CODE INJECTION under ADVANCED SETTINGS but don't know how to check if it's working — when I look in Chrome at the source code for the page, the only place h1 appears is in the script itself. 

I am trying to get all my blog titles to be h1 on my website, i.e. on this page:

https://www.thecompleteworksofshakespeare.com/tragedy/hamlet

is there a way to check if the code injection is working? I want my blog pages to rank better in SEO but with no h1, it's not going well, so I'm hoping this trick will work.  Thank you! 

On 3/11/2023 at 2:52 AM, walevitt said:

@Kennyv @tuanphanWould just adding this code injection do the trick for all my blog titles? I have added the code injection to the HEADER CODE INJECTION under ADVANCED SETTINGS but don't know how to check if it's working — when I look in Chrome at the source code for the page, the only place h1 appears is in the script itself. 

I am trying to get all my blog titles to be h1 on my website, i.e. on this page:

https://www.thecompleteworksofshakespeare.com/tragedy/hamlet

 

is there a way to check if the code injection is working? I want my blog pages to rank better in SEO but with no h1, it's not going well, so I'm hoping this trick will work.  Thank you! 

 

I see it already h1 here