This tutorial features the Feast Plugin, which contains theme enhancements.
The purpose of the Feast Plugin's Advanced Jump To Links is to:
- provide your readers with a better on-page navigation experience
- generate additional links in the search results for your heading tags
The core of it breaks down into two features that when combined, can qualify you for additional links in search engines, and hugely improve your on-site user experience:
- Page anchors, also known as anchor tags, jump links, or "Page Jumps" in WordPress
- An expanded "jump to" menu that links to your h2 tags
We should say up front that there's no guarantee that all (or any) of your recipes will get these links. Search engines reward high quality content with additional rich search results, and if you're not generating these links then there may be a quality issue with your page content or site structure.
Additionally, these jump to links are typically only found in the top 5 positions in the search results. If you're in position 6 and lower, it's unlikely to show.
These particular rich snippets are driven exclusively by on page formatting and not structured data, and can be shown as a "Jump to (heading)" or as additional links below your regular page description:
For clarification, your header is the top section of your website, a heading is an h2 element in your content.
This feature deals with headings and is not related to headers.
And in case you were wondering how they look on site, here is the feast_advanced_jump_to shortcode live:
- How to use it
- Why use it?
- Automated page jumps
- Why only h2s?
- Expanded "jump to" menu
- Search engine benefit
- Rewrite your heading tags
- How does a link to an anchor (page jump) affect SEO?
- Using the block editor
- Do emojis work? 🤷🏻♀️
- Replace the recipe card heading
- Future development
- 💬 Comments
How to use it
Update to the Feast Plugin 3.5.0 and simply insert the feast_advanced_jump_to shortcode where you want it to display.
We do not recommend displaying this above-the-fold. Your posts should start with an introductory paragraph for the reader, followed by an image of the finished recipe (also below the fold), and then the jump links.
We've created a modern guidelines for page headings.
It's critically important that you re-learn how to write headings, because almost nobody in food blogging does this correctly. Headings are a topic that simply have not received any attention before we wrote the modern guidelines for page headings.
These guidelines are for accessibility and SEO compliance:
- do not use headings for styling text
- do not use headings for full sentences
- write your headings as "section" headings
- write headings for screen readers, and avoid acronyms
- do not use your keywords in your headings
- ignore Yoast's recommendations - they're outdated
- do not use too many headings - aim for 5 to 10
- use headings sequentially
- personal recommendation: recipe posts don't benefit from using anything aside from h2
See the modern guideline for page headings document for additional details.
Why use it?
Feast declared 2019 the year of user-experience (I know - we missed releasing it in 2019). We wanted to make food blogs better for the reader, and one of the most popular recent UX (user-experience) changes was the presence of "jump to recipe" buttons.
While it's a great feature, it doesn't come close to the full potential.
All heading tags on a page, not just recipes, can contribute to a better user experience. Google even has an entire section on headings in their SEO document.
Automated page jumps
The WordPress document on page jumps explains the why and how to do it. It also goes more broadly by the name "anchor links".
These are unquestionably a huge UX benefit to readers, but are traditionally tons of extra work.
Extra work that we know you don't have time for. Not only would you have to add an id tag to every heading on the page, but you also have to then link to those headings.
That's why doing this in an automated way makes sense.
Technical note: we make use of the WordPress core sanitize_title() function, which is how your post title slugs are built by WordPress. We also perform a little pre-cleaning of the title, removing all characters that aren't letters (a-z), numbers (0-9), or spaces.
This is only applied to h2s.
Why only h2s?
The decision to exempt everything except h2s was done to keep the page navigation menu focused and comply with both Google's Webmaster Guidelines and screen reader preferences.
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
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
The fact is that 99% of recipes simply don't need anything more fine-grained than h2s.
You can still use h3s and below if you think you need to, they just won't show up in the jump to menu.
Expanded "jump to" menu
If you've ever taken a hard look at the keywords that your recipes get in Google Search Console, you'll see that visitors don't come to your post looking for just one thing.
There's hundreds of different queries about a recipe you've posted, that your readers could have questions about.
In keyword research, this is known as the "long tail", and it's loooooong. The primary keyword on well ranking posts sometimes drives less than 30% of the traffic.
Your actual recipe is the star of the show, which is why the "jump to recipe" button has thrived.
But they also want to know about:
- cooking time
- substitutions (turkey, chicken, beef, pork, lamb)
- scaling the recipe up, or down
- variations (how to make: keto, paleo, gluten free, whole 30)
- how to store it
- how to freeze it
- how to reheat it
- related recipes
This isn't just a great user experience, providing a one-stop-shop for all things about that recipe, it's also beneficial for search engines.
Adding headings addressing these questions and long tail keywords means that your article can show for more queries, getting you more clicks and pageviews.
See this post on click through rates.
Note: do not overoptimize your headings, exclude the primary keyword per the modern guidelines for page headings.
Search engine benefit
"Jump to" links are still (and may always be) a result of in-content post structure.
From an SEO perspective, keyword usage in the page title is still a good practice, but do not do this for heading tags within the post. The heading here is actually incorrectly done, and shouldn't be using the primary keyword.
Your heading tags are headings for your readers. Anything you read about heading tags having to exact match keywords is long outdated - stuffing keywords into heading tags will not make you rank higher.
What this will do if properly implemented (see: word of caution below), is make it possible to generate additional links on your search engine listing.
This means that instead of a single link that may not match a user's query, they're presented with anywhere from 1-3 additional text links that may catch their attention or draw them in.
Not only does this make it seem like your post is more thorough, using good headings means you can pull people in with questions they may not even know they had.
This generates additional clicks for the same post, leading to more pageviews.
What does this look like in the real world?
I have no idea what hardtack is, but I do want to know how to make it soft vs. hard, or fried.
Another example with some emojis, and a useful direct link to ingredients.
I have a 10 cup coffee maker, and no idea how many scoops or tablespoons (or pinches?) of coffee it should have. I probably wouldn't have searched for "conversions" but that could be useful.
Rewrite your heading tags
This feature requires that you've been responsible with your usage of heading tags. In most cases, you'll want to rewrite the heading tags using our modern guidelines for page headings.
Casey Markee has pointed out that some questionable SEOs have recommended putting entire sentences and paragraphs into h2 tags.
This is absolutely not a valid thing to do.
Headings should only be used to break your content into more easily-consumable chunks, centered around the sub-topic introduced by the heading.
There are also conventions to follow when using headings, such as only capitalizing the first letter:
How does a link to an anchor (page jump) affect SEO?
Should you be concerned if people begin linking to a specific part of your page? eg. https://yoursite.com/your-best-recipe#how-to-make-it-paleo
Google calls these parts of the links "fragments", and for the purposes of link equity they just count towards your main post URL.
A fragment (in this case, "Google Webmaster Guidelines on link fragments
#info") generally identifies which part of the page the browser scrolls to. Because the content itself is usually the same regardless of the fragment, search engines commonly ignore any fragment used.
Google also considers linking to headings as perfectly legitimate, and provides guidelines for how to use it: https://developers.google.com/style/headings-targets
Note: these are not the same thing as site links. You can not control site links.
Using the block editor
In both the classic editor and block editor, you can simply type in the shortcode into the content and have it work on the front-end.
My personal preference in the block editor is to use the "Custom HTML" block, because the block editor shouldn't ever try to convert or update these. It specifically tells WordPress that "I know what I'm doing and don't touch this":
Taking this a step further, we can save this as a "Reusable block" and then use the re-usable block in all posts. The advantage of doing this is that if you ever need to change or remove it, you simply need to edit the re-usable block and it automatically updates it in all your posts:
Do emojis work? 🤷🏻♀️
Everything that isn't a letter or number if stripped, so emojis are fine.
As a best practice, we wouldn't recommend using these for headings in recipes.
edit: release 3.5.2 allows for emojis in the anchor text, but still strips it from the anchor link.
Replace the recipe card heading
By default, recipe cards output the recipe title as a heading, and this creates a keyword-stuffed heading that goes against best practices.
It also doesn't tell the reader it's the recipe card - it's just the post title, repeated.
Instead, we recommend using the setting in the plugin to insert the word "Recipe" or "Recipe Card":
This is a more technically correct implementation that follows the "use short, concise headings" rule.
We'll continue developing this based on feedback you provide. Among the things we need to know you're interested in are:
How this works on non-english blogs (eg. accented characters?)
- Yes, as of 3.5.2 you can use any UTF-8 character, which should include non-english languages
- Screen readers - whether the "jump to" links should be tabIndex'd, have alt/title descriptions, or hidden
- How to optimize this for voice control (eg. Alexa, Siri, Google), and how it relates to screen readers
- We've made the decision to only focus on h2 at the moment, in order to keep the "jump to" menu at a reasonable size per search engine guidelines
- Making the table of contents sticky as users scroll, and/or integrating it directly into the header/menu bar
Should we automatically add jump to links for "Comments"?
- Setting added to 3.6.0 to enable link to comments if 1 or more comments exist
Should we replace the recipe card titles with a more generic "Recipe" link?
- Setting added to 3.6.2 to enable custom heading in place of recipe card title
Isn't this just a table of contents?
While some other table of contents plugins are similar, we believe this is a next-level approach that:
- uses keyword-optimized anchor text
- some other table of contents plugins use non-user-friendly anchor text such as #heading-1, #heading-2, etc.
- has best practices built in
- too many options aren't always good: too many headings are bad for screen readers and go against search engine guidelines for headings - h3s and lower generally aren't necessary for recipe sites
Aside from some technical differences, we don't think of this as simply a table of contents. You should think of this as a way to expand on something visitors already love: jump to buttons.
We mentioned above that the long-tail for successful recipe posts is huge, sometimes accounting for over 50% of the traffic. Following modern guidelines for page headings directly helps that long-trail traffic, providing a better user experience as well as enhancing your search engine listing with rich snippets.
- As of 3.6.2, we remove all existing IDs on h2 tags
- You can replace the "Jump To" text with a new setting in 3.6.0
- You can replace the recipe card link with custom text in 3.6.2
- You can filter the output using the feast_filter_advanced_jump_to filter as of 3.6.0
- Potential issue: we're not yet sanitizing duplicate IDs, and while the affected users for this would be extremely small (you've added your own custom IDs on non-h2 elements) and non-breaking (violates nerdy technical guidelines, but no display issues), it should be fixed in a future version