Jump to content

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

Recommended Posts

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!

Edited by BitBloggist
Changed to Java as the preferred solution over CSS.
Link to comment

@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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 8 months later...

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.

 

 

Link to comment

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.

Link to comment
  • 6 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 years later...
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! 

 

Edited by walevitt
Link to comment
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

image.thumb.png.b2f74c86ea494c58d10b386f7180474f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.