• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » SEO

    Modern Recipe Index

    Published: Apr 15, 2020 · Modified: Jan 12, 2023 by Skylar · 17 Comments

    This tutorial features the Feast Plugin, which enhances and extends your theme to improve SEO, pagespeed, accessibility and user experience.

    The Modern Recipe Index is a replacement for the theme's recipe index, by using the Simple Category Index (FSCI) Block.

    • is more customizable to suit your style
    • improves user experience by making navigation simpler
    • improves SEO by supporting good site structure
    • improves SEO by removing drop-down menus
    • improves accessibility by removing javascript
    • improves accessibility by fixing heading structure
    • improves accessibility by removing the outdated "featured posts" widget
    • improves accessibility by removing drop-down menus

    The goal of the Modern Homepage was to convert the most "important" page on your site to a better version of the traditional recipe index. Doing this helps:

    • show more useful content content than just "recently published", such as trending posts, categories, posts by category and recently updated
    • reduce click depth to key categories and posts
    • add unique content (important for SEO!)

    With that done, the theme's recipe index becomes obsolete because it's just a thin-content duplicate of the homepage.

    However, some people do get traffic to it, have incoming backlinks, and didn't want to let it go. So we recommend converting the theme's recipe index to the Modern Recipe Index, which features categories, not recipes.

    example of the modern recipe index showing images of categories
    Jump to:
    • Simple category index block
    • Convert the recipe index
    • Add a search bar
    • Organizing
    • Customizing
    • URL
    • Indexable vs. no-index
    • Other indexes
    • Problems with the old theme recipe index

    Simple category index block

    Review the FSCI Block (Feast Simple Category Index) tutorial to learn what you need to know and how to use it.

    If you haven't set it up yet, the FSCI requires brand new images to be created and assigned to the category before the block will function properly.

    We do not recommend using the FSCI block to display all categories and you'll get a warning when doing this. You should use the "Categories (slug, slug)" field to specify specific categories, and group related categories.

    fsci block screenshot showing the categories field being used

    If you have a low number of categories (eg. 10) then you can simply display them all, until the site gets more complex.

    Hint: as a general rule we see a minimum about 1 category per 10 posts on most sites, which means you should have over 100 posts for 10 categories. In our opinion, using categories when you have less than 100 posts is a waste of time.

    A better benchmark is roughly 1 category for every 20 posts on a site.

    Each category must have a unique description.

    Note about staging sites: The FSCI block doesn't work well on staging sites - in this specific instance, we recommend making this change on your live site.

    Convert the recipe index

    Instead of deleting the recipe index, we can actually use it for something the homepage shouldn't do: display all your categories with the simple category index block.

    Make sure to open the page using the block editor, not the classic editor. To do this, open the recipe index page and change the "Template" from "Recipe Index" to "Default Template" and update the page:

    classic editor template settings

    Then switch to the block editor:

    For themes that used the "Secondary Sidebar" layout, you'll need to change the Genesis Layout to "Default Layout" in the Genesis sidebar.

    page layout option in the genesis sidebar
    The Genesis sidebar is accessed through the "G" button in the top-right corner of the block editor.

    Add a search bar

    No matter how well you categorize your posts, or visually organize you categories, the search bar is always going to be the easiest way for readers to find the content they want.

    Add a "search" block to the Modern Recipe Index, and styling it like the homepage:

    example code for the modern recipe index search

    Add the following to your per-page CSS for the Modern Recipe Index, in order to hide the label and search button (for styling+simplicity):

    .wp-block-search { margin: 57px 0; padding: 0; background: #FFF; }
    .wp-block-search button, .wp-block-search__label { position:absolute;left:-10000px; top:auto; }

    Also make sure to add placeholder text to the search block.

    Organizing

    We don't recommend nested categories, however, you can use regular H2 heading tags to visually "group" related categories without actually nesting them.

    Using H2s helps Google to understand that there are "subsections" of the page, as well as helping users of screen readers to more easily navigate the page.

    Customizing

    Building this with the block editor as opposed to categories introduces opportunity to add unique content, and build the Modern Recipe Index in a way that's more useful for your readers.

    You can enhance the Modern Recipe Index with:

    • reviews or comments from posts in that category
    • "as seen in"
    • newsletter subscription

    URL

    You can rename the page title, but don't change the URL.

    Indexable vs. no-index

    The Modern Recipe Index should be indexable by search engines (not-no-indexed).

    Note that the same word is being used here in two entirely different contexts - a "recipe index" is an imitation of a recipe book's index. Search engine indexing is the practice of search engines crawling your site and storing a copy of it to possibly rank.

    Generally, recipe indexes don't rank and this is not a goal for the Modern Recipe Index.

    Other indexes

    Now that the recipe index is built using the block editor, you can create other "indexes" for non-recipe content.

    For example, you can create a separate

    • travel index
    • crafts index
    • knitting index
    • parenting index
    • cooking tips index

    Note: Sites that focus exclusively on recipes will outperform mixed-content sites in the long run. We recommend that food blogs be exclusively recipe content.

    Problems with the old theme recipe index

    The old recipe indexes that came with the themes have a number of issues:

    • they use the "featured posts" widgets, which are not SEO or accessibility compliant
      • duplicate links - one on the image, one on the title
      • uses h2 for post headings, despite titles not being headings, which breaks screen readers navigate by headings
      • uses semantic HTML article tag, against its intended purpose
    • they sometimes incorporate third-party javascript-based plugins that are not accessibility friendly, and do not provide adequate internal linking
    • they rely on a mobile-user-unfriendly drop-down form plus javascript
    • the category-drop-down menu doesn't provide any internal linking, which is bad for click depth (SEO)

    Instead, the recipe index should be built using HTML output (using the FSCI block) that can be crawled by search engines, doesn't rely on javascript that can slow down pagespeed, and supports proper internal linking for site structure.

    More

    • Skip lazy loading first post image
    • SEO
    • Internal links
    • Modern Sidebar

    Reader Interactions

    Comments

    1. Alicia Pope says

      October 25, 2020 at 2:28 pm

      Am I correct to understand that this option removes the facet? I have a lot of allergen-friendly recipes and the most exciting thing about these themes was the ability to click boxes and search on multiple criteria. For example, gluten-free, dairy-free, and dinner.

      Is this possible with the new recipe layout?

      Reply
      • Skylar says

        October 25, 2020 at 5:24 pm

        We no longer recommend or support javascript-based filtering plugins due to serious issues with SEO and accessibility.

        It's much more important to focus on proper site structure and accessible content: https://feastdesignco.com/food-blog-site-structure/

        Reply
    2. Jhankhana says

      March 24, 2021 at 2:53 am

      How do I create a Modern Recipe Index if I never created a Recipe Index?

      Reply
      • Skylar says

        March 24, 2021 at 3:38 am

        Just create a brand new page 🙂

        Reply
    3. Jennifer Lopez says

      March 29, 2021 at 6:46 pm

      I had created a recipe index page using the FSCI and everything was working well for a while but I notice for the last month or so, other non recipe categories are showing up as black file folders on the page even though, those categories are not in the code to even be on this page. Do you know what might have changed or how I can fix it?

      Reply
      • Skylar says

        April 13, 2021 at 8:14 am

        These shouldn't be showing up if you've specified the categories correctly (the "slugs").

        If this is how it's been set up, please submit a support ticket.

        Reply
    4. Sabine says

      May 23, 2021 at 5:51 am

      The breadcrumbs showing on this page are obviouly unneccesary right? Can I just "disable Yoast breadcrumbs on this page" in the settings?

      Reply
      • Skylar says

        May 23, 2021 at 7:53 am

        Yes 🙂

        Reply
    5. Taylor says

      August 20, 2021 at 2:38 pm

      How can I edit my recipe category pages? For example, when I click-through my modern recipe index catagories to my sorted recipes there is a dark block of color beneath each recipe post. How can I remove that unwanted styling?

      Reply
    6. Krissy Allori says

      September 28, 2021 at 9:26 am

      Hi Skylar, I have some of my categories nested. Should I un-nest them and redirect old category links? Or just leave them be and not nest in the future? I don't want to make google angry. Thanks!

      Reply
      • Skylar says

        September 28, 2021 at 10:29 am

        This is something that will have to be looked at on a site-by-site basis. I would reach out to Mediawyse or TopHatRank for some site-specific guidance.

        We never recommended nesting categories, so we have no experience or expertise in how to undo nested categories.

        Reply
    7. Bobbi Mullins says

      February 04, 2022 at 8:25 pm

      Why doesn't it show a checkmark beside "Modern Recipe Index" once I set it up as it does for the Modern Menu, Modern Footer, and Modern Homepage?

      Reply
      • Skylar says

        February 05, 2022 at 9:31 am

        Great question! The other pages you create need specific slugs, which is how we identify them. The Modern Recipe Index replaces the themes recipe index, which never had a consistent slug, so everybodys page is named something different.

        The checkmarks are more of a visual reminder than an actual configuration list.

        Reply
    8. Maryam says

      March 08, 2022 at 6:34 pm

      Hi Skylar - I'm having trouble moving my recipe index to the block editor. I update the page attributes template to 'default' but there is no place for me to 'update' the page, and then switch to the block editor. Do you know why that might be the case?

      Reply
    9. Christie says

      April 26, 2022 at 3:34 pm

      Hi Skylar, thanks for this helpful tutorial! Is there a way to add a "Read more" under each image thumbnail per recipe post? I ask only because I created an index page for my social media followers and unfortunately a lot of them don't know that you can click the picture or text to lead to the recipe. So I was hoping to provide more instruction. Thank you!

      Reply
      • Skylar says

        May 06, 2022 at 2:51 pm

        "read more" is poor quality anchor text for SEO and not accessibility compliant and not something we'd recommend.

        You can add an instruction paragraph above the listings to "click the image to be taken to the category" if your audience finds that necessary.

        Reply
    10. Famidha Ashraf says

      August 19, 2022 at 4:51 pm

      Hi,
      I am new to WordPress and am currently on staging. I started off making a page for Modern Recipe Index but will hold off publishing until after I go Live. Meanwhile, I would like to know how did you add an "ALL" list of categories in bullets in Cultured Palate? I can't seem to find it in the video.

      Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.