Modern Homepage Setup

This is the setup tutorial for the Modern Homepage, which is available exclusively through the Feast Plugin.

We have some companion pages to help understand what makes the Modern Homepage different from the theme homepage, but these are not necessary to implement it:

• the modern homepage vs. theme homepage details the differences between the modern homepage and theme homepage
• the rethinking the homepage post outlines the issues we discovered with the theme homepage
• the modern homepage showcase page shows some before-and-after results for sites that have made the switch
• the modern homepage styling guide offers different styling options, unrelated to the theme styling

This tutorial makes use of two new blocks we released in June 2020:

• the Simple Recipe Index (FSRI) block, which displays an image+title of your posts
• the Simple Category Index (FSCI) block, which displays an image+title of your categories
  • note that the FSCI block requires additional setup steps before using, and are an "enhancement" to the Modern Homepage

Follow the steps below to get the homepage setup:

Jump to:

• New sites
• 1. Create the page
• 2. Import the homepage template
• 3. Edit the page title
• 4. Edit the intro
• 5. Trending recipes
• 6. Search
• 7. Edit category #1
• 8. Edit category #2
• 9. Edit the user profile block
• 10. Add another category
• 11. Recent recipes
• 12. Recently updated
• 13. Set your featured image
• 14. Disable social widgets
• 15. Disable comments
• 16. Yoast settings
• 17. Set the homepage live
• Enhancement: styling guide
• Enhancement: Link to your categories
• Enhancement: default featured image
• Troubleshooting
• Optional: Full width Modern Homepage
• White Glove Conversion
• Things you should know
• Unique content
• 💬 Comments

New sites

For sites that have a low amount of content (less than 20 recipes): you can skip this entire tutorial and simply display your 20 most recent posts.

Just insert an FSRI block and set the limit to 20:

The full Modern Homepage setup will not benefit you until you have enough content to break into proper categories. Come back to this once you're getting traffic or feel like you need to rebuild the homepage.

See: how to launch your food blog.

1. Create the page

Create a new page using the block editor, name it "Modern Homepage" and set it to "Visibility: Private"

2. Import the homepage template

Grab the code for the Modern Homepage template here.

3. Edit the page title

We recommend using a short, user-first description (similar to a "tagline") as the homepage h1. To do this, simply click on the post title and edit it.

See this guide on page titles from Google for more information.

We've had feedback from people saying that they don't like the page title appearing, but this is absolutely critical to have for SEO and accessibility compliance. A single page-specific h1 is required for every page on your site, full stop.

Hiding the title is technically possible, but not an option we recommend or support.

4. Edit the intro

Following the site tagline, you should have a 2-3 sentence intro that explains what types of recipes you specialize in and what people love about your site.

See the Yoast Homepage Optimization post for additional tips.

5. Trending recipes

Linking to your top-trafficked posts reinforces their importance to Google, helping them rank, using the FSRI block.

Use this tutorial on finding your top 8 trending recipes and insert them into the "ID" section of the FSRI block.

The post ID can be found in the admin bar on the individual post when visiting that page:

6. Search

The search block is included with the Modern Homepage template and requires no action. Styling included in the Modern Homepage removes the heading and button, and this is perfectly fine for SEO and accessibility.

7. Edit category #1

Update the heading, description and FSRI block, and category link to point to the first category you want to feature.

Note: the FSRI block uses the category slug, not the category name.

The category link below the FSRI block should point to your actual category - to find this, you'll want to navigate to the category normally, or find it in the admin, and copy+paste the link.

8. Edit category #2

Update the heading, description and FSRI block, and category link to point to the second category you want to feature.

9. Edit the user profile block

The about section uses the User Profile Block.

Be sure to change the image (1000x1000, or at least square), heading, description and link.

10. Add another category

Remove the paragraph below the user profile block and practice inserting your own heading, paragraph, FSRI block and paragraph with category link below the user profile block.

11. Recent recipes

For sites with high volumes of social media or email subscribers, the "recent recipes" section can be moved up higher on the page. This is because returning users may be landing on the homepage looking for the newest recipes

For sites that are primarily search engine and Pinterest driven, your recent recipes generally aren't the most relevant or timely content, and this section should stay here.

Nothing needs to be done in this section.

12. Recently updated

Having a "recently updated" section on your homepage helps to give those updated posts a little search engine boost, so that content can be recrawled and pushed up in search rankings.

Nothing needs to be done in this section.

13. Set your featured image

We recommend setting the featured image for this page as your logo at 1200x1200 resolution. This gets pulled for the featured image by social networks like Facebook when you share your homepage. See: image optimization for Facebook.

Follow this tutorial to set your default featured image.

14. Disable social widgets

You don't need people sharing the homepage, and social widgets can slow page rendering.

If running Social Pug (Grow), scroll to the bottom of the block editor and disable it in their settings.

15. Disable comments

You shouldn't need people commenting on the homepage.

16. Yoast settings

Configure the Yoast meta boxes at the bottom of the page using:

• your site tagline as the SEO title
• your homepage intro as the Meta description

Once done, this will look similar to:

• Yoast guide on writing a Meta description
• MOZ guide to writing SEO page titles

17. Set the homepage live

Once you're happy with the homepage, you can set the visibility to public:

Then go to Admin > Settings > Reading and set the Your homepage displays to a static page and choose the name of your homepage (site tagline)

Finally, go to Appearances > Widgets and empty the Homepage: Above, Homepage: Middle and Homepage: Bottom widget areas.

Your homepage should then be live:

Note: after setting the homepage live, do not set it back to private. It needs to remain public.

Enhancement: styling guide

The Modern Homepage can be styled many different ways, without needing to update your theme.

See the Modern Homepage Styling Guide for the video tutorial on applying custom styling.

Enhancement: Link to your categories

We recommend inserting the Simple Category Index (FSCI) block below the "Trending Recipes" section.

Link to your top 4-8 categories to give an internal link boost to them, and the posts they contain.

For more than 8 categories, we recommend converting the theme's recipe index to the Modern Recipe Index.

Enhancement: default featured image

We recommend setting the default thumbnail size in the Feast Plugin by following the FSRI Block troubleshooting tutorial.

Troubleshooting

If you're having issues with the thumbnails (or they're missing), see the FSRI Block troubleshooting tutorial.

Optional: Full width Modern Homepage

You can now convert to the Full Width Modern Homepage if you'd prefer that layout.

There are not SEO, pagespeed or usability benefits to this, it's entirely personal preference. This can be undone at any point.

White Glove Conversion

The Modern Homepage White Glove conversion service is available for anyone who doesn't have the time to tackle this personally, or would prefer not to.

Things you should know

The Modern Homepage is designed with based on best practices we've seen from high performing sites.

We moved the homepage to the block editor because of the amount of customization you can make to it, which is a good thing, but can also be bad if you don't know what you're doing.

Here's the principles behind the homepage:

• your homepage is the most important page on your site for internal linking and is the basis for your site structure
• content and links at the top of the page have what is known as "prominence", which means that users and search engines believe it's the most important - keep your site's introduction and trending/top posts at the top
• posts that are shown on the homepage get extra "link juice" and will rank better than posts not on the homepage
• do not overstuff your homepage by trying to fit everything on it - we recommend keeping it less than 40 links to posts and categories
  • having too much on the homepage can cause a "too many DOM nodes" issue in pagespeed insights and will cause pagespeed issues
• to reinforce your site structure, we recommend converting the theme's recipe index to the Modern Recipe Index
• the headings on the Modern Homepage are important, as they provide landmarks for screen readers to navigate, and are important for search engines, see the Modern Guidelines for Page Headings
• the unique content in the paragraphs provide context for your readers, and additional information about your site to search engines, and are important to include

Unique content

We've had enough questions about the site title + intro paragraphs that this bears repeating: it's necessary.

Some people feels this "detracts" from the homepage or that it's too much of a change, and unfortunately that's simply not important.

When it comes to optimizing the homepage, check your ego at the door.

Your homepage is possibly the most important page on your site, and the content there tells Google (and site visitors) what the entire content of your website is about.

Not having any unique content, or not having enough, is a problem.

This is very simple:

• The page title (h1) should be your Yoast page title
• The intro paragraph should be your Yoast page description
• The 1-2 sentence sentence explanation for each category displayed with FSRI blocks should explain why this lives on your page and the idea behind the category
• Imagine a blind person has landed on your site and the only information they're aware of, is what is in the page content (no headers, no sidebar, no footer, no images) - do they understand what you're about?

You want to at least mention the keywords your site/categories/posts rank for, but don't try to optimize this page at all. That's not the purpose here.

Focus on providing context, and a little teaser for your readers to dive deeper into the site.