According to a survey, more than 50 percent of Google
searches are being conducted on mobile devices. This shows us how important is
a mobile-optimized website for your business/blog website. People are
looking for products, articles, videos, and more using their mobile devices.
Hence, you must also focus on creating a mobile-friendly website. Developers
from all around the globe are charging thousands of dollars for doing that. But
if you're using WordPress CMS, then you'll be able to get it done in few
dollars or even free. In this article, I'll guide you through a straightforward
way to mobile-optimize your WordPress website.
We'll talk about the things that we should take care of
and then we'll discuss the plugin that you should use. As of now, you might
have heard about AMP (Accelerated Mobile Project),
if you haven't then it's a very important topic for you as well. It's a
framework, developed by AMP open-source project. Google is even showing an AMP
icon next to the search results on mobile devices. That's an indicator that
they're preferring mobile-optimized websites over slow and laggy websites on
mobile devices.
Also Read - Bootstrap Navbar Collapse Menu
Still, it's not clear that they're ranking AMP websites
above non-amp websites as there's no valid research on that. But ask any SEO
expert, a mobile-optimized website helps businesses in many ways. That's
because users can browse your website much faster like never before. AMP is open-source
and is being used by e-commerce websites to load their product pages fast on
mobile devices. Even most movie streaming services, e-mail services are moving towards the
AMP so that their page can load faster.
Let's Know How To Optimize WordPress Website For Mobile Devices
As we discussed earlier, the straightforward option is
using a WordPress plugin. There are two of them in the market and we'll be
showing you the process to use one of them. It's called AMP for WP and is rated
more than AMP. Just don't be confused about them, AMP for WP is a freemium
plugin that offers both paid and free versions. Whereas AMP is developed by the
AMP open source community which is great but offers fewer features. As of a
normal user, who doesn't want to mess up with coding or programming stuff, I
recommend using AMP for WP because it offers compatibility with other WordPress
plugins, Add-Ons, Themes, and more.
But all of that comes with an additional cost so it might
not be way on everyone's pocket. Talking about myself, I'm happy with the free
version and have never opted into plaid Add-Ons and whatever offered by the
plugin authors. But you should check them out as there are many interesting
things offered by the plugin authors.
Here are the steps to optimize the WordPress website for
mobile devices. Follow the same steps to get started:
Step 1: Open your
WordPress dashboard and search for the Plugin called AMP for WP. Install and
Activate the plugin to use its features on your WP site.
Step 2: On the
welcome screen, you'll see some options. Select Website Type and Pages
where you need AMP support. I'll leave it to default as I have a simple blog
website.
Step 3: Click on Settings
option, in the branding section you can set your website logo. Click on Upload
and browse your blog icon/logo image. Toggle the Resize button and resize the
image so that it'll fit perfectly on screen. Use the slider to adjust the image
more effectively.
Step 4: Under the
AMP support section, you can choose where you would like to use the AMP
support. If you have a blog website, select all of the options. It'll help
users in browsing your entire website in a faster way on mobile devices.
There's also an option known as AMP takeover, it'll overtake your current
desktop theme and desktop users will see AMP version of your website.
Step 5: If you're
using Adsense on your blog, this step is very important for you. AMP supports
Adsense ads and you can set it using the plugin itself. Click on Advertisement option
and toggle the Adoption to use it on your website. The plugin supports MGID and
Adsense. For AdSense, one needs to enter his Publisher id and AD slot ID. Both
this information is available in your Adsense ad code itself. The plugin can
place Ads on different sections of the article.
Step 6: Now click
on SEO settings and it's the most important part. Make sure the Meta
Description option is checked. Scroll down and select the SEO plugin that
you're using. Then you'll see multiple options and make sure you've checked all
of them. It'll import all the settings from the Plugin and will set the Mets
Description etc. accordingly.
Step 7: We'll now
head towards the Analytics section directly. However, you can try the
Performance, PWA, Page Builder settings to check their functionality. In the
Analytics settings, one can choose what platform they're using to track the
user. In my case, I'm using Google Analytics so I'll enter Google Analytics
tracking id in there.
Step 8: If you're
using Structured Data in your regularly HTML, then you should also check the
Structured Data settings. In my case, I won't touch any of the settings offered
by the plugin.
Step 9:
Notifications and GDPR is for those who want to display a notification
about cookie and GDPR policy to its users. in some countries, it's important to
ask users if they comply with the website settings. You should use it if
mandatory in your country.
Step 10: Those
who're using Push Notifications on their websites to sent notifications and
updates about their blog to the users should change Notification settings. AMP
for WP currently supports Onesignal and iZooto. All you need to do is
set the APP ID, select where, and in what position the Notification modal
should appear.
Step 11: Now, we'll
head towards the Advanced Settings. It's the most interesting part of the
process. Here website owners can choose between many important features. It
includes redirecting mobile users to AMP pages if they've requested a non-amp
page on their mobile devices. We can add Header and Footer content using
Advanced settings. Just make sure it's validated via AMP Project.
Step 12: Not let's
head towards the Design options. Here you can choose the Theme and many
design aspects of the AMP web page. It's similar to what we do while setting up
a WordPress theme. There's nothing complex about it. AMP for WP provides four
free themes. If you want more, you can purchase it as per your needs. I'll go
with the Swift theme.
Step 13: In Global
settings, we can choose the theme colors, typography, infinite-scroll, and
more. It's all about making your website look interesting and as per your
needs. It's just amazing as we're able to adjust the theme settings in the free
version of the Plugin.
Step 14: Header
settings is all about choosing the layout of your menu. It offers a wide range
of features such as Header Type, Navigation Menu design, and so on. Under
Homepage settings, one can choose some basic settings of homepage such as
Excerpt length, post types, image size, etc. You can check out those settings
if needed.
Step 15: Now lets
head towards another important setting, the Single page setting. It's
important to adjust the settings of the Single page because most users will
land on your post page via Google. By default, AMP for WP plugin has enabled
all the features and in most cases, you don't need all those features. I'm
turning off features such as show Featured image on posts and also changing
related post settings. It's for the good of users and also the way you want
your post page to look like.
That's all folks, you've just optimized your WordPress
website for mobile devices. I've tried to keep this guide as straight as
possible. That's because most of you already know what those settings mean and
their functionality. It's just like setting up a WordPress theme.
What I love about AMP for WP plugin is that they're
offering top-notch features and flexibility to their themes and plugin. If you
opt into their premium plan, they'll assist you in a much better way. If you're
an e-commerce store owner, then you should check their premium services and
it's cheap as compared to hiring a standalone AMP developer to design AMP
support for your WordPress e-commerce blog. Those who're good with coding
and PHP can even create additional functionality to the plugin itself.
Also Read - Digital Marketing
Also Read - Input type file css
No comments:
Post a Comment