How does google treat h1-3's that are styled to be smaller than a lower class of heading?

Question

For example:

You have you h1

<h1>Epic SEO Keywords</h1>

then right below

<h2 class="Massive text">Enjoy the future of you, visualise your dreams</h2>

Will Google render that page and treat the h2 as the true h1 for the page?

Answer 1

AFAIK, Google relies on H1, H2, etc only, and not on how these styles look like. Your H1 will be the main title for Google, not your H2.

Answer 2

Will Google render that page and treat the h2 as the true h1 for the page?

Both, Yes and No.

Google fetches the HTML of your page and then analyzes it in different ways. Google examines one or more pages to extract the content of the page separate from the headers, sidebars, footers, etc. Once Google has the content, it breaks it down to a DOM (document object model) where the content is organized in order of tags and precedent where importance is assigned to each content segment. From here, semantic analysis is performed to understand the content and the importance of topics, terms, links, etc.

After Google has indexed using this data, Google will "look" at the page by rendering it. Google started rendering pages to stop some common spamdexing methods where content was moved off-screen, hidden, etc. Rendering quickly changed to include styling cues and modify weighting signals of content elements.

So to answer your question, at first No because the DOM model places the h1 over the h2 and relates the h2 to h1 and any content in between; and then Yes because the rendering could potentially change the importance of the h2.

We all style headers. On one site, I styled h6 in one section to be larger than the h1 for the page. Originally, the h6 was the h1, however, this did not make sense from a styling and usability sense. I downgraded the h1 to h6 and styled it to be larger than the new h1 header tag. I made the change because I wanted the h1 to be picked up as being important, however, I wanted users to focus on the h6 for usability. While I recommend that people not do this as a rule, sometimes it makes sense. In my case, the h1 was important for on-page SEO and the h6 was important for usability. There are times to break the rules a bit. But please know that Google still saw my h1 as important and the change actually helped search performance. In other words, the h1 remained more important than the h6 even as I styled the h6 to be more significant to the user. I specifically chose h6 to signal that the styled header should not be taken as too important.