SEO Task: Correct H1s on Root Domain #474
Conversation
|
cc: @AmandaPerino, @jathayde |
|
Would you be able to share screenshots of what is affected in the design? I don't think we should shy away from making more significant changes to the CSS - this is the point of this project, and why I pulled @jathayde into it. We just need to understand ahead of time where all of the changes will cascade. |
|
To echo @AmandaPerino comment, if the style gets messy then we can adjust it with specific CSS overrides. I would recommend creating a cheat sheet of the headline styles for the site as they exist, regardless of the HTML they attach to. Something more like The starting point is the semantic markup of the document. That should take precedence. |
|
Attaching some screenshots here for changes in this PR. Changing duplicate h1 to h2 on homepage 
Adding an h1 on 
|
|
Here is a before/after of suggested change (by Ranker) that I chose not to make. To me, it doesn't seem to add anything but let me know you think. In terms of seach, when I search "rails docs" or "ruby on rails docs", the 1st result is the guides page and 2nd is this /docs page. Instead of adding that "Ruby on Rails Docs" h1, I did update existing h2 to h1. |
|
Hi @AmandaPerino - I almost forgot, thanks for the reminder about screenshots, I added them now! Looking back the only 2 changes I didn't make were about adding an H1 on top of an H2, where the text of the H1 didn't seem to add anything new (the docs one above, and one of doximity page). If you like the 2nd image above though, I can go ahead and update! The only impact on the styles is the diff between h1 and h2 - font size, etc. |
Hi @jathayde 👋 Good to see you again, I remember meeting at Rails World in Toronto. So, I think I get what you're saying - we should update the html tags to what semantically makes sense (h1, h2 etc.) and then apply styles with classes like Also, I would be happy to do a call with you to go over the CSS for this site. (I have no strong opinions about CSS/design, and as a "fullstack" developer who leans towards the "backend", I shall humbly take any guidance 😂) |
|
@bhumi1102 So in the similar fashion discussed on #475 we can do the home h1 => h2 conversion to still mimic the larger size. I feel we want to namespace the home page however, to limit it to there. I think the most robust way would be to pass the page id if present into a class name on
I think that would work. so we'd have |
Hi @jathayde - so our desire is to change the markup to h2 but still keep the h1 styles? In that case I just pushed a commit implementing what you suggest above about |
|
@bhumi1102 this would be the same kind of changes as I discussed in #475, but with a different name spacing for each block. I'd recommend we change them to |
If you look at the current diff, I've implemented the And is this the h1 attributes from h1 {
color: $color-red;
font-size: 47px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 43px;
} |
Co-authored-by: Amanda Perino <[email protected]>
|
I've made the last change and resolved merge conflict with |
Can we please make this header: Docs: Everything you need to get started. That way "docs" is in the H1 as intended but nothing else has changed. |
I'm having a hard time telling from the thread, but did the font size for these new h2's (You're in good company.) change? |
Hi @AmandaPerino - the font size of "you're in good company" and such did not change. The goal with the changes has been to update the markup (from h1 to h2) while retaining the existing styles, so visually the page looks the same. Here is a screenshot from my localhost deploy: 
|
|
Couple of side-by-side screenshots for comparison. I like the heading on the blog! There is some noticeable shift to the spacing on the homepage when looking at them, but I don't think it's a huge deal, just notice it especially in the second screenshot you can see it looking at the "Everything you need" box.
|
I missed this comment last week. I've updated it how you suggested now. Here's a screenshot: 
|
Thanks for taking a look @zzak! 🎉 For the spacing (I'm trying to notice what you mean), are there any additional CSS changes we need or is it alright as is? Otherwise, I think I've addressed all the comments @AmandaPerino. |
|
I'd guess the |
This PR addresses the issues mentioned in this task.
Note: I did not make all suggested H2 to H1 updates (as that affects the styles and layout in undesirable ways). In some cases I updated the existing the H1 to be a bit more description.