注目の記事 PICK UP

How to intall and advanced AMP for WP

Last Updated 2021.02.03

How to intall and advanced AMP for WP

12-wordpressfirst-header
When you make WordPress an AMP-enabled website, you can support AMP with two main plug-ins. One is the AMP plug-in. Google is also involved in the development of this plug-in and is recognized as the official plug-in of the AMP project. At first, I installed this AMP plug-in, but it was difficult to understand how to set it up, so I was not know if it was possible to coexist with a normal website and an AMP-compatible site, so I used this AMP for WP plug-in. This AMP for WP plug-in is
https://Your Domain/Content/amp/
Below, all the content of your website will be built. This means that when you visit your website on a mobile device, you can access the AMP page by accessing the /amp/ following URL when you are on an AMP-enabled page, and by accessing the URL that removes /amp/ from the URL when accessing a normal mobile site. Depending on your settings, you can also automatically link to AMP-enabled and non-AMP mobile pages. I think this is a big advantage. I would like to explain the detailed setting of such a useful plug-in AMP for WP immediately.

AMP for WP Install

Amp for WP plug-in installation. Enter AMP for WP in the plug-in→ form from "New" in the "Plug-in" menu on the left side of the Management Screen. When you see the AMP for WP plugin, press the "Install" button to install the plug-in. When the installation is complete, press the "Enable" button to activate the plug-in. When the plug-in is enabled, an item called AMP is added to the left menu of the management screen, so click the AMP menu.

AMP for WP Advanced Settings – Settings

When the AMP for WP plug-in settings menu opens, click the Radio button in Advance Setup to switch to advanced settings in Advance Setup.
Then open the Settings screen.

AMP for WP Advanced Settings – General

12-wordpressfirst-01
Upload your website logo. The logo is a logo image for pc sites. If you select "Fixed width" from "Resize", it will automatically resize to the appropriate image size.

12-wordpressfirst-02
Select the type of content you want to amp on the WordPress website.

Posts
Pages
Homepage
Archives [Category & Tags]
Category
Tags

The above items are enabled for AMP on this site. The concept is that by attaching /amp/ to the URL of the entire website, an AMP-based page is displayed. The idea is that users who visit amp pages will be able to view the website while improving mobile usability by going around in amped content.
Finally, don't forget to save by pressing the Save Changes button.

Advanced AMP for WP Settings – Advertisement

12-wordpressfirst-03
Next is the ad settings in the AMP page. There are two types of advertisements, but in Japan, it is only Google Adsense.
Select Adsense for AD Type. And then

Data AD Client
Data AD Slot

Fields will appear, so enter data for each. For Data AD Client and Data AD Slot, pull it out of the ad code when you created the Google Adsense ad unit. For details, please check the link below.

Your publisher ID is the unique identifier for your AdSense account. To protect the security of your account and make it easier for us to find account-specific details, you may be asked to provide thi

12-wordpressfirst-04
On this site, we only use Above the Post Content (at the top of the post page) andBelow the Post Content (below the post page).
Adsense ads can be placed elsewhere, but this site automatically inserts Adsense ads on Site Kit By Google, so we don't show ads elsewhere. If you have Site Kit by Google installed, it will automatically place adsense ads in AMP content.

An official plugin called Google's Site Kit by Google has been announced in WordPress. This plugin can be used with tools necessary for SEO and web marketing, such as Google's Search Console Adsense Analytics.

In addition to installing the Site Kit by Google plug-in, you need to enter html code for adsense calls for AMP pages. Adsense auto-insert HTML code for AMP can be set from amp for WP settings described later after referring to the link below.

Auto ads for AMP automatically place AdSense Auto ads on your AMP pages. After you've added the AMP auto script and ad code, Google will automatically show ads on your AMP
AMP for WP Advanced Settings – Analytics

12-wordpressfirst-05
Analytics settings. Amp for WP allows you to set up various access analyses, but here we will explain the settings for Google Analytics. When Google Analytics is turned on, you can enter "Tracking ID", so enter the Analytics property set in Site Kit By Google. It will be a string starting with UA-. Currently, google analytics 4 is not supported for the latest analysis of Google Analytics. However, we think it will be rich to support Google Analytics 4 in future updates. This is because this AMP for WP plug-in has been developed by companies and has released a paid version, so it is likely that it will be the first to respond to the latest technology.

ADVANCED AMP for WP Settings – Notice Bar & GDPR

12-wordpressfirst-06
Whether or not cookies are displayed on the user-accepted approval screen and on the GDPR approval page for the EU. The cookie user approval screen works fine, but the Notice Bar and GDPR screens cannot be used at the same time. You will be choosing one or the other. There is no approach to EU users at this time, so we are not using the GDPR screen. If we start to develop english pages in the future, we will switch to the GDPR screen.

Advanced AMP for WP Settings – Advance Settings

12-wordpressfirst-07
Next is advance settings flying a little. This field is set to:

Search Result Page in AMP
Category Description
Enter HTML in Head
Enter HTML in Footer
Auto Add AMP in Menu URL

The points in Advance settings are enter HTML in Head and Enter HTML in Footer items. By entering the HTML code in this form, you can automatically advertise google adsense.

<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

The first line is the code you need to use Google Adsense and enter it into enter HTML in Head.
The second line is the code you need when using the Notice Bar &amp; GDPR's Notice Bar. This is also entered into enter HTML in Head.

In the Enter HTML in Footer form, type the following code:

12-wordpressfirst-08
The above code is set with the amp-auto-ads code entered in Enter HTML in Head.

<amp-auto-ads type="adsense" data-ad-client="ca-pub-4997344186044584"></amp-auto-ads>

This is what enter HTML in Head defines the amp-auto-ads tag and outputs it in the body tag in Enter HTML in Footer. This code is output only within the AMPed page and does not output when it transitions to a non-AMP page. The above code is an example, and ca-pub-49973441860444584 is the Google Adsense ID of this site. When you get Google Adsense, you will be granted such an ID. For more information on how to run automated ads on amp-turned-pages, see Google Help below.

Auto ads for AMP automatically place AdSense Auto ads on your AMP pages. After you've added the AMP auto script and ad code, Google will automatically show ads on your AMP

The Auto Add AMP in Menu URL affects the menu settings. "Appearance→ Automatically add /amp/ to the URL so that all menus set in "Menu" link to AMP-enabled pages. Enabling this setting increases the chances of an increase in the rate of turnover in AMP content. Depending on the theme, the global header menu at the top of the page and the footer menu at the bottom of the page change to amp URLs, which improves usability and makes it mobile-friendly by linking amp content to AMP content.
Next time, I will explain how to set up advanced settings – Design for AMP for WP.

Do you know the term AMP? AMP is a project to speed up the display of websites on mobile devices, and is promoted mainly by Google and other companies. Since Google is involved, seo and web marketing are naturally effective.


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. 06-wordpressfirst-aicache

    Prevent unauthorized WordPress logins with SiteGua…

  2. 09-wordpressfirst-aicache

    Work with Google services with Site Kit by Google

  3. 07-wordpressfirst-aicache

    The new block editor is difficult to use. In such …

  4. 13-wordpressfirst-aicache

    How to set up amp for WP in detail – Design

  5. 17-postandpage-aicache

    Differences between WordPress post pages and fixed…

  6. 11-wordpressfirst-aicache

    What is AMP that improves mobile usability?

  7. 08-wordpress-header

    Easy Way to Set Up WordPress – CORE SERVER (…

  8. 04-wordpressfirst-aicache

    Settings to install WordPress and do it first R…

  9. 18-resetcss-aicache

    What is Reset CSS – The Basics of Web Produc…

Latest posts

  1. 30-wpsitemap-aicache
  2. 17-postandpage-aicache
  3. 15-wordpress-aicache
  4. 16-onamae-aicache
  5. 14-wordpress-aicache
  6. 13-wordpressfirst-aicache
  7. 12-wordpressfirst-aicache
  8. 11-wordpressfirst-aicache
  9. 10-wordpressfirst-aicache
  10. 09-wordpressfirst-aicache

Recommend posts

  1. 09-wordpressfirst-aicache
  2. 10-wordpressfirst-aicache
  3. 11-wordpressfirst-aicache
  4. 13-wordpressfirst-aicache
  5. 17-postandpage-aicache
  6. 01-wordpressfirst-aicache
  7. 05-wordpressfirst-aicache
  8. 02-wordpressfirst-header
  9. 12-wordpressfirst-aicache
  10. 04-wordpressfirst-aicache
PAGE TOP