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 analysisfor contents in custom fields created by 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.
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.
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)
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:
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:
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 MetaBox.io and docs.metabox.io 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:
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:
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:
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
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 MetaBox.io'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.
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.
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.
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.
Nowadays, except for system fonts, Google Fonts is the optimal option for most websites for typography. However, there will be 2 disadvantages when you load Google Fonts for typical websites as instructed by Google's tutorials, or by the way to enqueue CSS in most WordPress themes:
The next resources (CSS, JS, images, ...) are blocked while loading fonts. You must wait for loading fonts completely, then these resources continue loading.
The text using Google Fonts won’t display while loading, but it only shows a blank space.
The first drawback will make your website load slower. That'll make your Google PageSpeed Insights scores decrease, so does the SEO scores. The other will cause a bad user experience.
So, how do we solve these 2 weaknesses?
Note: the techniques in this post is outdated. Please visit the 2nd part of this series for a better method. The content in this post is still useful for reference.
How to optimize the Google Fonts loading
Our purpose is to deal with 2 above disadvantages while loading Google fonts, to be more specific:
The other resources must load normally, in order to make your website load faster.
The text must display as usual. When the font is loaded completely, the displayed text will use that font. That can cause a second flash when changing the font. However, this effect may be acceptable because it happens in the blink of an eye.
To do these two tasks at once, we will use the script Google Fonts provided by PerfPerfPerf. Follow up the below way:
Supposing that you need to load font Roboto into your website, we generally add the below script after the <head> section of the website (in a file header.php of the theme):
Or enqueue into the WordPress theme as follows ( functions.php ):
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts' );
function themeprefix_scripts() {
wp_enqueue_script( 'themeprefix-fonts', themeprefix_fonts_url() );
}
function themeprefix_fonts_url() {
return 'https://fonts.googleapis.com/css?family=Roboto';
}
Instead of doing so, now you only need to copy the URL of the font https://fonts.googleapis.com/css?family=Roboto and access PerfPerfPerf page, paste that URL into a URL fonts box. Then, copy the code in the text area box and paste that code into the<head> section of the website. Or if using WordPress, you can hook into wp_head as following (insert into the functions.php file of the theme):
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
?>
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous">
<script type="text/javascript">
!function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- End of code snippet for Google Fonts -->
<?php
}
After that, load your website again. You will see that the other resources still load normally while loading the font. And when the font is loaded completely, this text will use that font.
The working mechanism and browser compatibility
The reason why the script of PerfPerfPerf, which has just been created recently, can solve the above problems is dependent on several up-to-date technologies on the browsers.
The working mechanism of this script is quite simple but really efficient:
Using thepreload mechanism to load the font. This one allows the browser to priory load the underground resources without any effect on loading the other ones. Now, all browsers support strongly the preload.
Using thefont-display: swap mechanism to display the text first then load the font completely, turn the text's display into the wanted font. All browsers, except IE and Edge, support this attribute.
In case the browser doesn’t support one of or both mechanisms, the fonts will be loaded as usual and your website is still displayed as before.
Make a point of utilizingfont-display: swap, when you inform font in CSS, you must have fall-back font in the end, as follows:
h1, h2 { font-family: Roboto, sans-serif; }
Don't write as below:
h1, h2 { font-family: Roboto; }
How to load Google Fonts in WordPress themes
It will be a really suitable choice if you do it for your websites. But, for WordPress themes, there will need to get a little tweak.
Have a look at the below code which I used for the EightyDays theme of GretaThemes:
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
$url = themeprefix_fonts_url();
?>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="<?php echo esc_url( $url ); ?>" as="fetch" crossorigin="anonymous">
<script type="text/javascript">
!function(e,n,t){"use strict";var o="<?php echo esc_url( $url ); ?>",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<?php
}
function themeprefix_fonts_url() {
$fonts = array();
$subsets = 'latin-ext';
/* translators: If there are characters in your language that are not supported by Crimson Text, translate this to 'off'. Do not translate into your own language. */
if ( 'off' !== _x( 'on', 'Crimson Text font: on or off', 'themeprefix' ) ) { $fonts[] = 'Crimson Text:400,400i,700,700i'; } /* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */ if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'themeprefix' ) ) {
$fonts[] = 'Merriweather:400,400i,700,700i';
}
/* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */
if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'themeprefix' ) ) {
$fonts[] = 'Merriweather:400,400i,700,700i';
}
$fonts_url = add_query_arg( array(
'family' => rawurlencode( implode( '|', $fonts ) ),
'subset' => rawurlencode( $subsets ),
), 'https://fonts.googleapis.com/css' );
return $fonts_url;
}
This code will do the following things:
Allow the users to choose both loaded fonts and subsets of their using language through the function. Doing this one by translating them from on to off (or maintain them) in the WordPress theme. If you don't know how to translate a WordPress theme to another language, refer to this article.
Generate the JavaScript code for fonts through function themeprefix_load_fonts. This script is copied from the above PerfPerfPerf page. It's using PHP here to change fonts URL only.
Pay attention that you must replace themeprefix with the slug of your theme.
How to deal with page builders plugins or WordPress themes that already load Google Fonts
Not always do you build a theme from scratch? Most people create their websites by using themes from some theme provider or page builder plugins as Beaver Builder or Elementor. In this situation, it will be very difficult to control how to load Google Fonts as well as apply the script provided by PerfPerfPerf.
However, don’t worry, there is still a method to solve this problem. Here takes GretaThemes website as a typical example. This site utilizes Beaver Builder and its available themes to build its web. Because of using the page builder plugin, selecting the font is very easy, with just a few mouse clicks. So, how to optimize Google Fonts loading?
Step 1: See which Google Fonts you are using
For this, you can view it in the theme which you are using, and in the enqueue style section. Pay attention that using page builders may cause it is impossible to get all the fonts like that. The easiest way to get all fonts is by pressing F12 when you are opening the website with Google Chrome or Firefox then see those fonts' URLs in the Network tab:
Get Google Fonts URL in-browser dev tools
Then, copy that URL and save it to use for the below step 3.
Step 2: Disable all Google Fonts loaded by theme and plugin
Next, you must disable all Google Fonts loaded by theme and plugin. You can dequeue CSS files which are enqueued by theme and plugin to get it. However, it takes a lot of time because you must know the IDs of these CSS files. Regarding themes, it is also easy, but it's quite complete if you use page builder.
In place of doing that way, we can use the Autoptimize plugin. This plugin allows us to disable all Google Fonts on the website. Just go to Settings → Autoptimize and select the Extra tab, then on Google Fonts section, select Remove Google Fonts.
Disable Google Fonts with Autoptimize
Step 3: Load Google Fonts into the website
After Google Fonts are disabled, we need to load Google fonts manually. I want you to copy the URL fonts you get in step 1, then access to PerfPerfPerf page, paste the URL fonts into this page to generate the script.
Then, insert that script into your website by adding the following code to the functions.php file of the theme (or child theme):
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
?>
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous"> <script type="text/javascript"> !function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- End of code snippet for Google Fonts -->
<?php
}
Pay attention to changing the above script into the one which you copy on the PerfPerfPerf page.
If you don't want to code, you can use the Slim SEO plugin to insert that code. Go to Settings → Slim SEO, then paste that script:
Insert header and footer code with Slim SEO
Note that Slim SEO is a SEO plugin for WordPress. It supports inserting webmaster verification tags or tracking scripts into the header or footer of the website. We use it to insert our scripts to load Google Fonts. But Slim SEO does more than that. It's a free WordPress SEO plugin that's lightweight, fast and has no-bloat. It's developed by the same team at Meta Box, so check it out!
In case you use Beaver Theme, to simplify, you can go to Customize → Code → Head Code and directly paste that script from PerfPerfPerf to there:
Insert Google Fonts script in Beaver Builder
That's done!
So, we have learned about how to load Google Fonts faster for WordPress: do manually and by plugins. At the same time, we also see how to deal with the page builder plugins. With these methods, your website speed and user experience will increase significantly. So let’s get started it, apply immediately to your website, and let me know the results in the below comment section.
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.
