Jump to content

Changing header sizes on blog page, but keeping them as h2, etc. for SEO

Recommended Posts

Posted

Hello!

I'm working on a client's blog (currently not published) and she really doesn't like the huge size of her H2-H4 for her blog posts.

While I'm able to use assign custom styles to decrease their size without doing it globally, I checked the code and they lose their "H2, H3, H4" status. Because we are doing the blog partially for SEO purposes, I feel we'll lose out on a lot of opportunities if we're losing these.

Is there any code I could do instead? I tried doing various class and ID selectors so I could change just the size for blog posts, while keeping the H's, but not a single one worked. I'm not sure why, I couldn't seem to select anything. Is there some sort of trick for selecting things with HTML or CSS in the blogs? 

A few approaches I tried:

Selecting the h2 titles of certain sections

section[data-section-id="63cff1814c84ba211416e2ff"] h2 {
  font-size: 1.5rem ;
}

Selecting the h's of specific divs

#yui_3_17_2_1_1718391594494_5333 h2,
#yui_3_17_2_1_1718391594494_5333 h3,
#yui_3_17_2_1_1718391594494_5333 h4 {
  font-size: 1.5rem !important;
}

I tried putting each of these separately in both 

Page Header Code Injection

and then

Post Blog Item Code Injection

And no luck.

I've never had a problem using different methods to select things for CSS on "regular" Squarespace pages, so I wonder if I'm missing something? Thank you!

 
 
 


 

  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

Thank you so much! I didn't have any luck. Here's an example of an H3.
 

image.thumb.png.63fa3dd08a509dbd0f06ef4e4d9021a8.png

I tried to change it to 5px just to see if it would get teeny tiny and I could know if I was selecting it, but the size didn't change. I tried putting the code (modified from h2 to h3) in both the page header code injection and post blog item code injection, see below

 

image.png.f82655da41eeee4ae70a078679917462.png

 

example:

image.png.eee74f0f0c3628e882ce91ad3f43cf8d.png
any ideas?

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.