Are you willing to Customize Default Amp for your WordPress site?

Presently, Google has been focusing on the new concept that is Accelerated Mobile Pages (AMP). In the article, I will be explaining about AMP along with its aim and implementation, how to Customize Default AMP for your WordPress site.

So, how you ready to customize Default Amp for WordPress?

What is Accelerated Mobile Pages (AMP)?

AMP works with the purpose to speed up the web page on mobile. These days most people depends on the web as they are using the internet through mobile device mostly on a 2G or 3G connection, this may make the web slow. So, for instant web page load, AMP limits what you can carry out in HTML pages. Most web design is exposed out favoring the website speed. Here, AMP is much more functional on the blogging websites and businesses.

AMP page looks similar a stripped down version of typical website pages but contains every essential content. However, every ad may not work on AMP, all the analytics also may not work with it. Every fluff of your website page is exposed in AMP that includes read more links you may have created in your theme and so on.

Nowadays Google is pushing most of the news sites, blogs to implement AMP. And, if you fail to implement it, you may not get the traffic your website deserves.

How can WordPress users get benefit from Google AMP?

Google initiated AMP HTML project that adds more value to search results redirecting mobile visitors to AMP pages rather than a regular HTML website.

Good news is: There are WordPress themes and plugins available to activate AMP for WordPress blogs. This plugin makes a basic page for your blog and you can also customize it according to your title and icon.

Rules for CSS and AMP

Before we move on the tips to customize default Amp page, let’s take a glance at some rules required following in CSS to our AMP pages.

1. Do not use amp! importantnt to force a style

Better avoid this during your CSS practices as it may end up with performance issues.

2. Use pseudo elements

You can use Pseudo elements (: hover, :: before, :nth-child, so on) here. Yet, you can use them to reference a tag directly.

For an instance:

Good = a: hover, div:: before

Bad = .my-custom-link-class: hover

Tips to customize default AMP for WordPress

At first, you should install and activate AMP plugin.

Then, install two plugins. They are:

• Accelerated Mobile pages by Ahmed Kaludi, Mohammed Kaludi
• AMP by Automattic

After activation, you can move over AMP in the dashboard menu to check out different AMP options.

Afterward, you will be directed to AMP options where you will have lots of options to manage your AMP page. Click on design.

After clicking you will get this appearance for the customization

Here, you can change the header design and text color. You can also select the design according to your wish. To change the design just click on the design and there you will find some options in the drop-down menu.

Selecting the design, you can change the color scheme, the header background on the page. The header background that you pick can also be utilized for the links. Also, you can utilize your website icon or logo if your theme suits it.

Make sure you click on the save button after you make all the changes.

Now, you can visit any post on your site and add /amp/ at the end of the URL as the link mentioned below:

https://digitalwebsydney.com.au/blog/web-design-vs-web-content/amp/

This will show the stripped-down AMP version of the similar post.

digitalwebsydney.com.au/…-web-content/amp

If you want to see the source code of the original post, you will get this line in the HTML  below:

This line states search engines and other AMP that accepts apps or services and the place where you can check the AMP version of the web page.

Troubleshooting

Sometimes, you may go through 404 error when you try to see the amp version. To avoid this error, follow the steps mentioned below:

Go to Setting >> Permalinks page in your WordPress dashboard and click on Save Changes button. Make sure you do not update anything here, just click on save button. This refreshes the permalink structure of your WordPress site.

Wrapping Up,

So, hope this article helped you with the proper guidelines to customize default AMP for WordPress.

If you are willing to take the benefit of AMP, Consult with us. We will guide you throughout the course to implement AMP in your WordPress website.

The post How to Customize Default AMP For WordPress? appeared first on Digital Web Sydney.