The Feast Plugin's Advanced Jump To Links is a powerful tool in the hands of the right person, but can also make your recipe pages ugly and worse for visitors if misused.
Here are some modern guidelines for making great page headings.
"Page" here refers to all pages on your site - posts, pages, category pages and the home page.
Jump to:
Do not over optimize
We recommend that you do not use your primary keyword in your (h2 and below) headings. This is unnatural to readers and is a sign of low quality content.
This violates the use short, concise headings guideline from Google, reduces the number of jump links you can get in search engines, and becomes repetitive for screen readers.
Search engines have moved to a topical understanding of pages. They know what the page is about based on your title, images, and the content on your page relating to that topic.
This means that you do not need to repeat your keywords in the headings.
But rather, what we use these headings for is well we have this big chunk of text or we have this big image and there’s a heading above that, therefore maybe this heading applies to this chunk of text or to this image. So it’s not so much like there are five keywords in these headings, therefore this page will rank for these keywords but more, here’s some more information about that piece of text or about that image on that page.
And that helps us to better understand how to kind of frame that piece of text, how to frame the images that you have within those blocks. And with that it’s a lot easier to find… the right queries that lead us to these pages.
John Mueller, Google
Any SEO still advocating this hasn't been paying attention to the last 5 years.
Analysis done on the November 2019 update by Casey Markey and Arsen Rabinovich has drawn a strong correlation between pages that have been penalized and those that have a keyword density over 2%.
The top performing posts have a keyword density around 1.5%-1.7%.
Note: Yoast permits up to 3% keyword density, but we wouldn't advise following those guidelines.
Accessibility and screen readers
Screen readers rely on headings, which means headings should be written to sound natural.
Try to avoid acronyms, as fully capitalized words are sometimes read letter-by-letter by screen readers.
Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank.
Yale web accessibility guidelines on headings
Reference: Yale: headings and accessibility
Capitalization
The initial version of this documentation indicated that capitalization is important. There have actually been no explicit guidelines presented for accessibility or search engine optimization regarding capitalization.
Currently, it's believed to be fine whether you use sentence case or title case. Do not write your headings in all uppercase.
Note: some themes (such as Foodie Pro) use CSS to display the headings as uppercase. This is not a problem as long as you've actually written the heading normally in the block/classic editor.
It is important to be consistent with your preferred usage across a post.
Do not use too many headings
You should generally aim for 5-10 headings max in the content and in the Advanced Jump To.
This again comes directly from Google's guidelines on headings:
Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins.
Google Webmaster Guidelines for Heading Tags
This is why the Feast Plugin's Advanced Jump To Links uses only h2 headings, rather than h3 and lower. Having too many headings makes the page navigation menu too long, making the user experience worse, rather than better.
You can absolutely use h3s if it makes sense for your page, but these have been specifically exempt from the jump to link menu.
We've never seen a good use case for h4, h5 and h6 tags on recipe sites and simply don't recommend using them. If you're one of the 1% of 1% of people who are writing insanely long and technical documents about food or recipes (not a great user experience in 99% of cases), then feel free to ignore this.
Use short, concise headings
Google's guidelines on page headings states explicitly to:
Avoid:
- Excessive use of heading tags on a page.
Google Guidelines on page headings
- Very long headings.
- Using heading tags only for styling text and not presenting structure.
Preliminary testing with the Advanced Jump To Links has shown that using shorter headings leads to more jump to links in the search results.
Using emojis related to the heading makes these headings stand out even more, increasing the likelihood you catch the visitors attention and they visit your recipe. This means more pageviews.
Using short, concise headings helps users avoid the dreaded f-shaped pattern when reading your content, improving the user experience on your site
This ultimately forces you to provide information to readers in a mentally-easily-digestible way.
Do not use h1s for headings
Your page should have a single h1: the post title.
The rest of the headings should be h2s, relating to aspects of the recipe that readers would find useful. For heading ideas, see the Advanced Jump To page.
Use headings sequentially
Headings should not start at h3 or h4 (after the h1 post title), and should cascade sequentially.
Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a
<h2>is not followed directly by an<h4>, for example.It is ok to skip ranks when closing subsections, for instance, a
W3 Web Accessibility Guidelines<h2>beginning a new section, can follow an<h4>as it closes the previous section.
If you've been using headings for visual styling, this should be fixed.
The h2s define the general sections of the post, with some h3s where necessary as sub-sections of h2s. Most recipes will do fine without needing h3s or lower.
Do not combine with other tags
Headings should not be combined with other HTML tags like <strong> or <em>. Any visual styling you want to apply to headings should be applied via CSS.
Do not use unnecessary characters
Headings are by themselves able to define sections of content, and shouldn't contain leading or trailing characters such as "-" or ":".
Rethinking your post structure
Headings define "sections" of your post, relating to specific aspects of the overall page topic.
Imagine you're writing an outline
Similar to writing an outline for a large paper, put some thought into what the main points and sub-points of the content on the page will be and decide where to use heading tags appropriately.
Google Webmaster Guidelines for Heading Tags
Rather than having a long post that's not broken up by headings, think of the post as components centered around a specific topic.
Voice assistants
Much like screen readers, voice assistants may rely on headings to help the visitor navigate a document.
Connie K Campbell says
Is there a way to turn off capitalization in headings and the title in Foodie Pro?
Skylar Bowker says
Great question! Add this to your "Additional CSS":
.post .entry-content h2 { text-transform: none; }Update: you do not need to change the CSS-based text-transform in the themes, as long as you're writing the headings in normal sentence case in the post editor
Connie K Campbell says
Thank you so much!
Billy says
I put this into my additional css but it didn't work for me?
Skylar Bowker says
Hey Billy,
You're not running the Foodie Pro theme, which uses text-transform to display the headings as uppercase even when they're not written that way. Instead, it looks like you've actually written the headings using uppercase letters, which means there's no text-transform to undo.
You'll need to manually rewrite the headings using proper sentence case.
Dan Saunders says
Hey Skylar,
How can I go about disabling the text-transform in the Foodie Pro theme? I'm looking to prevent all headings, including the main page/post heading (and any other items that may be getting transformed), from becoming capitalised.
I've used the above code for H2 tags in posts and pages, but is there a more concise way to disable it across the board rather than having multiple CSS lines for H1, H2 and H3?
Thanks in advance!
Dan
Skylar Bowker says
Hey Dan,
This will remove the text-transform: uppercase; from everywhere I was able to find it:
h1, h2, h3, h4, h5, h6, .widgettitle, .more-from-category a, .genesis-nav-menu a, .site-footer { text-transform: none; }This is not necessary.
Just add this to your "Additional CSS".
Skylar
Dan Saunders says
Perfect! Thank you so much – that's cleaned everything up for me.
Dan
gerry speirs says
Thanks for the help, but I added both codes which helped with my most current post but is the code supposed to fix the capitalization issue across the entire blog?
Skylar Bowker says
Hey Gerry,
The codes only affect the elements they're targeting. In this case, I identified as many elements as I could find, but it's not necessarily the "entire blog". You'd have to be more specific with your question if you're seeing things that have/haven't targeted.
Dan Saunders says
Hey Skylar,
Sorry, I've actually just noticed there's one areas that hasn't changed...
The 'post comment' button is still transformed into caps, but interestingly, it also hasn't inherited my button/link styling – is this managed somewhere different?
At the moment, all the other buttons on my site are blue background/black text and in title case, but that button remains black background/white text in caps.
Thanks for your help!
Dan
Cheryl says
Hi Dan, I'd like to remove capitalization from all headings as well (as you suggested for best practice above). I don't know how to code. Can you tell me in laymen's terms how to add the code and where I can find it? Thanks so much, Cheryl
Skylar Bowker says
Hey Cheryl,
That goes in your "Additional CSS". If you're unable to locate that or don't know how to do it, you can hire Grayson from iMarkInteractive for a quickfix: https://www.imarkinteractive.com/quick-fix/
Dan Saunders says
Hey Cheryl,
It's pretty easy to locate 🙂 When you're logged in to the backend of your site go to Appearance --> Customise which will load up a new screen with a load of options on the left hand side. You should find, near the bottom of that menu, an option titled 'Additional CSS' – click on there and you'll be presented with a box where you can paste the code in.
Hope that helps!
Dan
Marcella says
Won't this make all recipe sites look the same?
Skylar Bowker says
Are the headings going to look similar?
Yes.
And they should.
There are a bunch of very basic things that everyone should be answering.
Ingredient substitutions. Not everyone has exactly your ingredients. Does it need EXACTLY mozzarella cheese or can mild cheddar work? Is permasan going to ruin the dish?
Variations. Your reader has friends and family with different dietary restrictions that they have to accommodate. How do they make it vegan? Keto? Gluten free? Is it safe for diabetics?
Can it prepared in advance? Does it keep well or do the crisp parts turn mushy? Can you bake the dry and wet parts separately and spend 1/10th the time baking it before the actual meal/event?
Is the recipe scalable? Do you need to double every ingredient to make a dish twice that large? Can it be done in one container without burning the top and undercooking the middle, or do you need two containers?
How to store the food. Airtight container? With other liquid foods or solids? Does a piece of paper towel in the container help keep the food from spoiling?
How to freeze it. Does it last 1 month or 6 months in the freezer?
How to reheat it. Can it be microwaved? Regular power or defrost? What temperature and how long in the oven?
What's the best side dish? How do you turn this into a balanced meal?
Answering all of this turns you into a topical expert, which is what readers want, and what Google wants to give them.
Is it going to get repetitive? Sure. But your readers don't care if you're bored writing about the same thing over and over. To them, the entirety of your site is encompassed in that single recipe.
What comments do you get over and over that you aren't addressing?
Whether these are keywords you explicitly find in keyword research tools or not, some percentage of your readers will have some or all of these questions. Your reader isn't a single person looking for ingredients. They're thousands of different people with thousands of different levels of experience and knowledge.
Answering these unasked questions is going to increase the average time on site, and build trust so that they're more willing to subscribe to the newsletter, or look at other recipes. Not for everyone, but for 25% of people. Or 10% of people. Or 100% of people.
This is the same with ecommerce. You don't answer shipping questions in the shipping policy. You answer it on every single product and category page. Shipping cost. Shipping time. Estimated delivery date. Product dimensions. Warranty. Return policy. Inventory levels. Guarantees. Social proof (reviews). Product description - even for products that are nearly identical.
Just because the information is buried somewhere else by the site owner, doesn't mean the person who landed on a specific page can find it, or cares to look. If you don't fill those needs immediately, they're gone somewhere else.
This is the same with recipes. If you don't answer it - Google will. This is one of the reasons that bounce rates are so high, and time on site is so low for many sites.
Sujatha says
Under the heading FAQ(h2), which is better to frame the questions in an H3 tag or in the Bold font? ( like, Can I substitute almond milk instead of whole milk?)
Skylar Bowker says
I'd use an h3 for questions under the FAQ h2. Bold is generally reserved for emphasis.
Headings are used to clearly delineate specific sections: https://feastdesignco.com/modern-guidelines-for-page-headings/
So while the questions wouldn't be a major heading themselves and don't need to be a part of the jump to links, they do make sense as sub-sections of the FAQ.
Daniel Zehr says
Should h2 headings be in regular or bold type face? Thanks!
Skylar says
Personally, I'd make them bold so that they stand out more readily. Headings should provide an "outline" of your post and make it easier for your readers to skim through sections of your content.
But this is a personal preference.
Dannii Martin says
I am trying to remove capitalization from all headers, which I have achieved on the homepage by editing the custom HTML block with the "text-transform: none". This works on both desktop and mobile.
As this only affects the homepage though, I added the following to my Additional CSS to change my post headings:
.entry-header h1 {
text-transform: none; font-size: 42px;
}
.entry-content h2 {
text-transform: none; font-weight: 800 ; font-size: 32px;
}
This has worked for desktop, but mobile is still showing as all capitals. How do I get my post headings to be all Sentence case?
Many thanks.
Skylar says
Due to the high level fo complexity supporting different sites and customization levels, along with ill defined project scoping, we can't offer this for free: https://feastdesignco.com/why-you-shouldnt-make-customizations/
This takes time to define and support, which means it costs money.
If you need this customization made, please submit a support ticket to get a quote to have it done for you.
Julie says
Is there a current way to make headings H1, H2, H3, etc stay lowercase or have an uppercase first letter, but the rest of the word lowercase in posts? Basically, a way to make the headings look like the way they are typed in using the page editor? Confused about the above directions as the CSS has been crossed off in previous comments. Any help would be greatly appreciated! Really enjoying using the Feast plug in.
Skylar says
This is a simple CSS customization that you can make using inspect element: https://feastdesignco.com/inspect-element
And the text-transform property: https://www.w3schools.com/cssref/pr_text_text-transform.asp
Unfortunately, because of maintenance issues and project scoping, we can't do this for free (it costs time = money): https://feastdesignco.com/why-you-shouldnt-make-customizations/#project-scoping
If you'd like this customization done for you, please submit a support ticket.
Blandine says
Hello
If I understand well :
Should I ignore Yoast not turning green in seo as I don't write may long-tail-keyword in H2 in my jump to block ?
Thanks
Skylar says
Yes, you should generally ignore Yoast's content suggestions.
Andrea Vetere says
Hi there!
I use some H3s as responses to some of my H2 headings, should I switch the H3's to lists instead? I also noticed the H3s are all capitalized, so it sort of seems like I'm shouting lol!
Skylar says
The answer here is "it depends" - on your content, how it's being used, etc.
Generally: recipes do not need anything more than 5-10 h2s. They're just not that technical.
For styling/capitalizing, this is built into the theme and you can change the theme, learn how to edit CSS yourself, or sign up for the Feast+ subscription for assistance with customizations.