注目の記事 PICK UP

What is AMP that improves mobile usability?

Last Updated 2021.02.03

What is AMP that improves mobile usability?

11-wordpressfirst-header
Do you know the term AMP? It is a trend of the web industry that I began to hear from around 2017, but it is a project to reduce weight and speed by specializing in displaying websites on mobile terminals. AMP is abbreviated and the official name is Accelerated Mobile Pages. This AMP project was launched in October 2015 with google and Twitter as the main companies, and we are trying to promote and spread it by 2021. It has to do with the design of the website. Based on pc design, the website used to build a site that was different from the PC site and the mobile site, but with the advent of the HTML 5 standard, the web design became flexible, and when I looked at the website on a PC terminal called responsive design and when I looked at a website on a mobile terminal, There was a trend to change the design of the website and display it in one web design.

Design and weighting of website pages

Responsive design has shed the boundaries between PC and mobile sites. At the same time, pc sites with variable designs are displayed as they are on mobile devices, so the amount of display data per page has increased dramatically. On the PC page, it was decided to download large data such as featured images and explanation photos and videos in the page on mobile terminals. It became a time-consuming factor to have website pages displayed on mobile devices. For this reason, the AMP project centered on Google and Twitter was launched because mobile-friendly websites are becoming necessary.

AMP will also affect SEO

It is believed that amping your site will be advantageous from an SEO point of view. This is because Google has made it clear that if there is an AMP-enabled page in the search results, it will affect the ranking because the page loading speed is fast.

Google Search indexes AMP pages for a fast, reliable web experience. Discover how AMP looks in Search and learn about structured data.

Developing HTML through AMP Projects

In the AMP project, HTML standards have been developed to the smallest detail so that the data on the website does not become bloated. Its AMP specifications are limited, and the pages displayed are designed to have a simple page configuration, such as the old imode page. How to structure an AMP project

  • AMP HTML/CSS
  • AMP JS
  • AMP Cache

It consists of three main elements.

In order to achieve faster display, we simplify the HTML structure of the website and reduce the amount of data, while at the same time caching amp web page called AMP Cache to the server and transferring data to the user at high speed. This allows mobile users to instantly view the websites they want to see, improving mobile usability.

Evolution of AMP

Amp projects were initially introduced in a way that was compatible with curated media and news sites due to its limited HTML markup and JS standards. However, it was the product sales industry such as e-commerce sites that increased the needs as AMP came to be known. On the EC site, the amount of data displayed per page increased sharply, the page display speed slowed down, and users were disgusted by the slow page loading and left, lamenting that the opportunity loss was large. Among them, it was an e-commerce site called eBay in the United States that succeeded by becoming AMP. From around 2017, the AMP project was also updated to develop and expand the HTML structure that can be used on e-commerce sites and portal sites. In 2018, Japanese food logs and Mynavi were also amp compatible, and amp projects are gaining more and more momentum.

Do future websites need AMP support?

Seo-related terms include mobile-friendly. This means that the website is a mobile-ready design and is also mobile-optimized. AMP is also mobile-friendly, but amp and mobile design websites change the way of thinking a little. Designing a mobile-friendly website is an important factor in SEO that influences search results.

If your website is not mobile-enabled, your search ranking may fall. In today's world, where access on mobile devices accounts for about 60% of the total, web design optimized for mobile access is essential. On the other hand, amp-enabled websites may have an increase in search rankings, but just because there is no AMP-compatible website, the search results ranking will not fall.

Well, this is also the idea and view of SEO in early 2021, and I don't know what will happen in 2022. Even if there is no AMP-compatible website, there is no influence on the search result ranking, but if there is a possibility that the search result ranking will go up due to the AMP-compatible website, there is no loss to prepare. Fortunately, WordPress has a number of plugins that can support AMP. Next time, I will introduce the recommended AMP plug-in.

When WordPress amps the entire website, anyone can easily amp it by simply installing and setting up a plug-in. I will explain how to install the AMP for WP plug-in, make detailed settings, and support amp the website.


WordPress is easy for anyone to amp by simply installing and configuring a plugin. I will explain the design (design) of how to install the AMP for WP plug-in, make detailed settings, and support the website amp.

スポンサードリンク

Related post

  1. 18-resetcss-aicache

    What is Reset CSS – The Basics of Web Produc…

  2. 25-marketing-aicache

    4C Analysis and Cross SWOT Analysis-Marketing Anal…

  3. 17-postandpage-aicache

    Differences between WordPress post pages and fixed…

  4. 02-02-csspseudoclass-aicache

    I have a feeling that the rental server will becom…

  5. 19-chromedev-aicache

    How to emulate and display a mobile device from a …

  6. 10-wordpressfirst-aicache

    Jetpack Plugin – Facebook/Twitter Link web a…

  7. 04-wordpressfirst-aicache

    Settings to install WordPress and do it first R…

  8. 35-newthemeupdate-aicache

    WordPress external themes can now be updated witho…

  9. 26-gdpr-aicache

    Protect the personal information of users in the E…

スポンサードリンク

Featured Posts

  1. 20-marketing-aicache Marketing Definition-From Consumer-Orien…
  2. 05-03-aboutsxo-aicache What is SXO Search Experience Optimizati…
  3. 17-postandpage-aicache Differences between WordPress post pages…
  4. 03-wordpressfirst-aicache Settings to install WordPress and do it …
  5. 19-chromedev-aicache How to emulate and display a mobile devi…
  6. 05-wordpressfirst-aicache Settings to install WordPress and do it …
  7. 02-wordpressfirst-header Settings to install WordPress and do it …
  8. 04-wordpressfirst-aicache Settings to install WordPress and do it …
  9. 29-complianzgdpr-aicache UK GDPR is even tougher-Complianz GDPR &…
  10. 26-gdpr-aicache Protect the personal information of user…

PICK UP posts

  1. 02-02-csspseudoclass-aicache I have a feeling that the rental server …
  2. 25-marketing-aicache 4C Analysis and Cross SWOT Analysis-Mark…
  3. 08-wordpress-header Easy Way to Set Up WordPress – COR…
  4. 07-wordpressfirst-aicache The new block editor is difficult to use…
  5. 14-wordpress-aicache Easily Back Up & Restore WordPress …
  6. 15-wordpress-aicache Delete post revisions on schedule –…
  7. 35-newthemeupdate-aicache WordPress external themes can now be upd…
  8. 26-gdpr-aicache Protect the personal information of user…
  9. 09-wordpressfirst-aicache Work with Google services with Site Kit …
  10. 20-marketing-aicache Marketing Definition-From Consumer-Orien…

Popular posts

  1. 16-onamae-aicache
  2. 25-marketing-aicache
  3. 15-wordpress-aicache
  4. 35-newthemeupdate-aicache
  5. 08-wordpress-header
  6. 01-wordpressfirst-aicache
  7. 17-postandpage-aicache
  8. 03-wordpressfirst-aicache
  9. 29-complianzgdpr-aicache
  10. 06-wordpressfirst-aicache

Latest posts

  1. 17-postandpage-aicache
  2. 02-02-csspseudoclass-aicache
  3. 25-marketing-aicache
  4. 35-newthemeupdate-aicache
  5. 05-03-aboutsxo-aicache
  6. 05-05-sxomarketing-aicache
  7. 20-marketing-aicache
  8. 29-complianzgdpr-aicache
  9. 26-gdpr-aicache
  10. 19-chromedev-aicache

Recommend posts

  1. 02-wordpressfirst-header
  2. 02-02-csspseudoclass-aicache
  3. 06-wordpressfirst-aicache
  4. 17-postandpage-aicache
  5. 30-wpsitemap-aicache
  6. 18-resetcss-aicache
  7. 14-wordpress-aicache
  8. 19-chromedev-aicache
  9. 12-wordpressfirst-aicache
  10. 11-wordpressfirst-aicache
PAGE TOP