This WordPress Tutorial will teach you how to design a blog page (or post) in WordPress. Here, we will cover WordPress Gutenberg Blocks, Overall page design, and how to add SEO elements to help your page rank on Google.
Page vs. Post
First, you must understand the difference between a page and a post on WordPress. Technically a page and a post are both “web pages”.
A blog post can be part of categories that help organize your content. A page can be many things based on your WordPress Plugins.
In my case, I like to keep pages for my evergreen content (non time-sensitive information) such as the About Page, Contact Me, Location Info, Home Page, etc.
I use blog posts for my every day writing.
Unless you are using a specific type of page that changes in design based on your theme or plugin elements, your page and post design would look the same.
Depending on the version of WordPress that you are using, you may have access to the classic editor or content blocks by way of the Gutenberg editor which is the most recent.
I suggest activating your content blocks.
If you have the latest version of WordPress, Find Settings, and then choose ‘Writing’. You’ll notice an area that displays the options ‘Classic Editor’ and ‘Block Editor’. Toggle Block Editor on.
You’ll now that content blocks are activated when you see the + sign appearing on your editor.
In this guide, we will use the elements offered in the content blocks to design our blog posts and pages.
This Layout should help you better understand the flow of the page design. Keep in mind, when I say “Page”, I’m talking about a blog post or page type.
Your WordPress Page Title should 50-60 Characters Long. Depending on your Plugins, you might also have an seo Title and a Social Media Title that can differ.
The slug is the word that comes after your top level domain name and the slash. thisismywebsite.com/slug. It’s best to use Keywords in the slug and dashes between words. 3-4 words maximum is ideal.
Intro, Excerpt, Metadescription
This video features the SEO Plugin YOAST.
Your Intro should be about the size of a tweet. Around 120 characters, the intro can be used as your excerpt and Meta description and is a quick, appealing explanation of what your page is about.
If you are using an SEO Plugin, you can generally set your meta description to be filled automatically from your excerpt. SEOPress is used in the graphic below.
Video or Other Rich Media
Wherever possible, I like to start my article with a video. Including a video on your blog is easy using the simple embed codes from Youtube, Vimeo, and even social channels such as Facebook.
From Youtube, simply click share, then embed, and then copy and paste the code into an HTML block.
If the Youtube embed option is available on any video on Youtube, then the user has given permission for you to use the video.
This does not mean you have the license to modify the video. You can embed it.
Of course, if you have your own videos, that’s even better.
Including videos on your blog plage can help increase the visitors time spent on your website. This is referred to as ‘Dwell Time’.
It can be a positive signal to the search engines that your page is high quality.
Table of Contents
The table of contents allows the visitor to choose an item from the table of contents menu and directly be taken to that section of the page.
This can help improve the user experience and therefore the quality of the page itself.
Simply click on Plugins in your WordPress Dashboard. Do a search for ‘table of contents’ and you will find WordPress Plugins such as Table of Contents Plus or Easy Table of Contents.
Choose one that is currently supported.
Each paragraph could be 300-500 words long with seperation between sentences. I like to add a space after 1 or 2 sentences so it’s easier on the readers eyes.
Each paragraph can have elements from the blocks.
You can add an image, video, list, related post or any other element to create a better user experience.
It’s a good idea to break up paragraphs with the separator widget in blocks or another element such as the divider from shortcodes ultimate like I use.
I like to include the Related Posts block. It allows me to include posts from a particular category and include images, post content, and offers various sorting options. You can view the sample here: