How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor

How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor

404 page is not a kind of main content on your website, since it appears only when visitors come to an unavailable page. However, for better SEO and better experience, we should pay some attention to this kind of page, to harmonize content, and drive visitors to the wanted pages.

So, let’s explore an interesting way to have a custom 404 page with flexible content using custom fields created with Meta Box and displaying it with Elementor. This will help you change the page's content easily in daily use.

Continue reading "How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor"

How to Create an FAQs Page - P1 - Using Meta Box and Elementor

How to Create an FAQs Page - P1 - Using Meta Box and Elementor

Having an FAQs page on your site will help the visitors to find the information they want easily. This also leads to a higher SEO ranking owing to the better user experience. There is an easy way to add questions and answers using custom fields. So, in this practice, we’re going to add FAQs to a page using Meta Box. And, we’ll use Elementor to build the page.

Continue reading "How to Create an FAQs Page - P1 - Using Meta Box and Elementor"

How To Analyze Content in Custom Fields for SEO - Using Yoast SEO and Meta Box

How To Analyze Content in Custom Fields for SEO - Using Yoast SEO and Meta Box

Any website owner knows that analyzing website content for SEO is very important. To do it, people usually use SEO plugins. Among these plugins, Yoast SEO is one of the most well-known and popular. It’s undeniable that this plugin has done its job incredibly. However, it still has a minus point which is the lack of custom fields' content analysis. To solve this problem, Meta Box has launched a free extension called Meta Box for Yoast SEO. Without any further ado, let’s spend the next 5 minutes reading to know how to set up SEO analysis for contents in custom fields created by Meta Box.

Continue reading "How To Analyze Content in Custom Fields for SEO - Using Yoast SEO and Meta Box"

How to Analyze Content in Custom Fields for SEO - Using Rank Math and Meta Box

How to Analyze Content in Custom Fields for SEO - Using Rank Math and Meta Box

A couple of days ago, Meta Box released a brand new free extension: MB Rank Math Integration and received great attention from the Meta Boxer and Rank Math communities. The integration between Meta Box and Rank Math helps you to add custom fields’ value generated by Meta Box to Rank Math's SEO analysis. As a result, you will know more exactly about how your website and posts are optimized for SEO.

Using this integration is also very simple. Just follow the instructions below to add the content from custom fields to the content analysis of Rank Math.

Continue reading "How to Analyze Content in Custom Fields for SEO - Using Rank Math and Meta Box"

How to Add Custom Fields to Yoast SEO Meta Tags

How to Add Custom Fields to Yoast SEO Meta Tags

Normally, when you use Yoast SEO on your site, there will be a section to fill in the title, and description that helps search engines index them easier. You can fill in static content or dynamic content in these sections. But in some cases, you may want to get content not only from those default fields but from custom fields. So, how to add content from custom fields created with Meta Box to Yoast SEO meta tags, just follow these practices.

Continue reading "How to Add Custom Fields to Yoast SEO Meta Tags"

The Fastest Way To Load Google Fonts In WordPress (Part 2)

The Fastest Way To Load Google Fonts In WordPress (Part 2)

Google Fonts is always a bottleneck for website performance. The Google Fonts' CSS is a render-blocking resource, which means that the browser won't render any processed content until the CSS is loaded. It also causes a blank space when the font is being loaded.

In the previous post of this series, I have shown you a way to get rid of these problems using a script from PerfPerfPerf. Since then, Google Fonts has some updates and the PerfPerfPerf's becomes outdated. And we need a better way to load Google Fonts now!

Google Fonts loading problems

Before going into the solution, let's summarize 2 issues, as they are the most important problems with Google Fonts. And these are the problems we're going to resolve in this article.

Google Fonts Render Blocking CSS

When Google Fonts is being loaded, no further content (text, images, CSS, JavaScript, etc.) is loaded. That means your whole page is blocked until Google Fonts finishes loading its CSS.

This problem is critical because it freezes your website when loading and increases the First Contentful Paint (FCP) of the page. FCP is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening. It's a part of the Web Core Vitals and is an SEO factor. So if you have it high, your site might get a lower ranking.

Blank space while loading Google Fonts

The FOIT (Flash Of Invisible Text) effect that causes bad user experience and bad FCP (First Contentful Paint)
The FOIT (Flash Of Invisible Text) effect that causes bad user experience and bad FCP (First Contentful Paint)

Another problem with Google Fonts is that when it's being loaded, the text is completely vanished before your eyes. Only until it's finished loading, you can see the text. This effect is called FOIT (Flash Of Invisible Text).

That causes a really bad experience for your users. And if the loading time is huge, your users might think your website is broken (because they see nothing!).

And FOIT also affects the First Contentful Paint (FCP) as well, and thus might affect your search ranking.

How to fix Google Fonts problems

Load Google Fonts asynchronously

To solve the 1st problem of render-blocking, we need to load Google Fonts asynchronously. That means we'll load the Google Fonts' CSS without blocking loading or rendering other resources.

There are 2 solutions:

Preloading CSS with rel="preload"

preload is a mechanism to load resources without any effect on loading the other ones. It also puts a higher priority on the resources that are preloaded. That means these resources will be load before other resources. You can read more about this on MDN.

Let's assume you want to load Roboto font. Google gives you the HTML like this:

<link href="" rel="stylesheet">

To make the CSS preloaded, you need to change it to:

<link href="" rel="preload" as="style" onload="this.rel='stylesheet'">

The CSS is now preloaded. And when it finishes loading, it'll be applied.

The preload technique works well in all modern browsers.

Using media type

Another solution is using media type, which is supported by all browsers. This technique is created by Filament Group. The HTML markup is simple as follows:

<link href="" rel="stylesheet" media="print" onload="'all'">

What it does is loads the CSS for the print-based media. In other words, the CSS is applied only when the users try to print the page. The loading process is now asynchronous (since we're on browsers). And when it's done, the CSS is applied for all media (which includes browsers).

I've been testing this technique for a while and see a good improvement in font loading. You can test on and websites to see how it works.

Using font-display: swap

To solve the 2nd problem with a blank is when loading fonts, we need to use font-display: swap. Basically, it allows us to display the text first with a fallback font family (usually serif or sans-serif). And when the font is loaded, it swaps the text into the wanted font. This effect is called FOUT (Flash Of Unstyled Text). Unlike FOIT (Flash Of Invisible Text), users still see the text while the font is loaded. So, the user experience is better. And also the FCP (First Contentful Paint) is lower.

The good news is Google Fonts now supports font-display: swap by default. You can see it in the font URL like this:

<link href="" rel="stylesheet">

Notice the display=swap in the URL. The CSS loaded for the font will have font-display: swap.

This technique works in all modern browsers, and it's safe to use.

Just a note that the solution in the 1st part of this series, which uses PerfPerfPerf script, tries to add font-display: swap to the Google Fonts' CSS. It's not needed anymore.

So the final code to load Google fonts now is either of these:

<link href="" rel="preload" as="style" onload="this.rel='stylesheet'">
<link href="" rel="stylesheet" media="print" onload="'all'">

Apply Google Fonts loading techniques in WordPress

The best way to apply the techniques above is adding the code into your theme's header.php file. Or you can create a child theme and modify the header.php file. So your header.php file will look like this:

<!doctype html>
<html <?php language_attributes(); ?>>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="" rel="stylesheet" media="print" onload="'all'">
    <?php wp_head(); ?>
// Other code

I find it's harder to do this if you use page builders. You need to disable default Google Fonts and apply the code above. The only plugin I found that disables the Google Fonts is Autoptimize. Unfortunately, it removes our manual link tag, too.

The best solution for page builders is using Autoptimize to preload the Google Fonts. You can turn it on the settings page:

Preload Google Fonts in WordPress with Autoptimize
Preload Google Fonts in WordPress with Autoptimize

You can see it in action on GretaThemes website.


After applying the new techniques to our websites, I'm quite happy with the result. The loading speed is increased and the FOUT effect is minimal. Users probably don't notice the font change (swapping). And of course, the Google PageSpeed Insights score is higher than before (in my test for's homepage, it has 100 scores for desktops).

I think optimizing the loading speed for Google Fonts is very important for both users and search engines. And you should do it now. Feel free to discuss this with us on the Facebook group, or leave a comment below.

The Best White Hat SEO Tactics in 2020

Best White Hat SEO Tactics

There have been massive changes in the game called SEO. Some hit some webmasters pretty badly while boosting others, resulting in some massive shifts in SERPs.

And while there still are some who use illicit techniques to boost their ranking, slowly but surely, white hat SEO tactics and methods are becoming the safest investment for both short and long-term growth.

So What Has Changed In SEO?

Once considered to be the slow way to the top, white hat techniques are slowly but surely becoming the best way to increase your site’s ranking.

The many changes and updates made to search engines in the past year have made them more adept at catching and sanctioning illegal behavior, which means less spammy and scammy sites in your search results.

Black hat techniques are not as simple to implement as they once were, meaning they are not as cost-efficient, which is good - as this is a big step in moving towards creating a level playing field for everyone.

Here are some of the bigger changes made to SEO:

  • Mobile Indexing Comes First For New Domains

That’s right. Google announced that as of May this year, all new domains will be indexed by default for mobile-first approach. Meaning, sites should provide 100% of the content to both desktop and mobile users if they want to get indexed.

  • SERP’s Diversification

In June this year, Google rolled out the Site Diversity Update which, put simply, guarantees more source website diversity on the first page. You won’t get more than two listings from one website.

  • Improved Content Presentation

As of January, Google has started to present some of the content of other sites right on the top of the search results. Why? Well, when the search engine finds data that is relevant to your search, it presents the most important bits of it. Content and data structure are more important than ever.

There have been many other changes that have left their mark, but the above three are considered to be the game-changers for this year.

With that said, let’s go through the best white hat methods that can make a big difference in 2020.

The Best White Hat SEO Tactics

There are lots of white tactics out there but the ones we’ll mention and explain here are considered to be the most promising and show the best results.

The Best White Hat SEO Tactics 2019

A Focus on Mobile

Let’s be honest here. Much of the surfing and browsing is done with smartphones, and if you haven’t already updated your site to be more mobile-friendly, your ranking will be lower. Why? Google tends to rate mobile-friendly sites higher.

Creating a mobile-friendly site is not that hard nowadays, and there are also a few apps that can help you test your site and suggest improvements.

High-Quality User Experience (UX) Is Crucial

An aspect that is becoming more and more important, due to the rising importance of bounce rates. A better UX means that a user won’t just leave your site immediately after visiting - they’ll stick around and check out more content.

A good UX build is something that requires a lot of work and research, as it covers almost every aspect of a site. Thankfully, there are a lot of guides on how to make a good UX, and the folks over at Google have even made one themselves.

If you are more confident with entrusting your website's UX design to more experienced professionals, consider hiring one of the top UX agencies on this list.

Appropriate Link Building

No links, no love. That’s how it is in SEO. If you want your site to rank higher, you will need links from authoritative sources added to your posts. You only need to keep in mind that there is a fine line between ‘enough’ and ‘too much, which is also a factor that can decide if this is a white hat or a black hat style link building.

Many go with Private Blog Networks (PBN), which is a gray hat method. This method involves creating a web of networks that will all link to your main site, and boost its rating. Although not illegal, this method is still risky. If you want to give PBNs a try, we suggest you also employ a good PBN hosting service, whose PBN hosting services will ensure there won’t be a trace that can lead Google’s search engine to discover your PBN.

SEO solutions

Increased Social Media Outreach

Social media platforms can hugely influence your site’s ranking. Getting your content in front of the massive audiences of Facebook and Twitter is paramount for the success of your online enterprise.

First, you find your audience, or better said, the audience with the highest chance of being interested in what you’re selling. Play nice with all who want to promote your content, and also be kind to return the favor when asked. Don’t be one of those people that writes to others only when you need help. Business partnerships are not just contracts. You also need to have good relationships with others. Creating good relationships with your audience and presenting your brand online the right way might be challenging sometimes. Getting help from a trusted branding agency is always a good option.

Good Keyword Research <=> Good Content

Keywords are not just words put here and there in order to satisfy a certain standard. They were in the past, but today keywords are a combination of words and phrases that are used in a certain niche. Good keyword research will give you a good direction in which you should design and create your content. Simply said, the better the research, the more keywords you will have, and the more you use them (in a relevant way), and the better your content is, the higher your site will rank.

Final Words

These tactics will not make your site #1, but they can help you set the foundation for long-term success. There is no shortcut to the first page on Google that is also sustainable in the long term.

While the rules and ethics of SEO change frequently, white hat SEO methods are what they are and will not change any time soon! What’s more, they are getting more and more effective - they’re the foundation for sustainable business growth. That's why most SEOs prefer completing periodic SEO courses online to improve their knowledge and strategies on a continual basis.

How to disable Gutenberg without using plugins

How To Disable Gutenberg Without Using Plugins

Although Gutenberg is the default editor in WordPress, not everyone wants to use it because of the bad editing experience. And Gutenberg loads CSS files and lots of inline styles on the front end, which will affect your website loading speed. This article will guide you on how to disable Gutenberg with a simple code without using plugins.

Continue reading "How To Disable Gutenberg Without Using Plugins"