Creating AMP HTML for Faster Mobile Pages


What Is AMP?
AMP stands for Accelerated Mobile Pages, an open-source project led by :contentReference[oaicite:0]{index=0} to improve the loading speed of mobile web pages.
Google Developers Japan
Development is carried out according to the rules of a new framework called AMP HTML.
With traditional HTML alone, many elements such as images and interactive features cannot simply be reused, meaning that new designs and coding are often required.
However, most tags can still be written following standard HTML markup rules, so once you understand the key points, it becomes easier to create valid AMP pages correctly.
AMP has already been integrated into many websites since the project began, and development is still ongoing.
More AMP-specific custom tags are expected to be added in the future.
Basic sample code is available on the following site, and by actually coding these examples, you can better understand the important concepts.
GitHub (English)
Benefits of AMP
• Faster Display Speed
AMP not only improves page speed through optimization, but also allows AMP HTML pages to be cached on search engine servers.
• Clear, Image-Based Listings as AMP Content
Because AMP pages can appear at the top of search results in a visually rich image-based list, they tend to stand out more compared to other content.
Things to Keep in Mind When Using AMP
• You must code according to the AMP HTML framework rules, which means existing HTML often needs to be modified.
AMP includes its own restrictions and unique rules, and externally written CSS and JavaScript files cannot be freely loaded.
• Restrictions on certain tags (such as img, iframe, form, input, etc.)
To improve speed and optimize content, some tags are restricted or prohibited.
For example, tags like img and iframe must be replaced with custom AMP tags such as amp-img and amp-iframe.
Tags such as form and input are generally not allowed under AMP specifications.
However, standard structural tags such as h1, div, p, ul, li, and table can still be used.
• JavaScript cannot be used freely
As a general rule, JavaScript is not allowed in AMP pages.
Only specific scripts such as application/ld+json, which are required for displaying AMP pages in search results, may be included.
Coding with AMP
We will now explain the key points for proceeding with AMP coding.
Finally
These are the key points for coding in AMP.
At present, there are not many websites where AMP is consistently applied in search engine results. The most reliable examples can be found in media sites that have been officially recognized as AMP project partners by :contentReference[oaicite:0]{index=0}.
(You can verify this by searching for sites such as Sankei News or Mynavi News on Google.)
Since search methods and implementation standards are still not fully established, it will likely require some trial and error to determine how AMP pages are properly displayed.
The HTML created in this TIPS will be used as we continue experimenting with ways to make sites display as AMP pages.
RECENT POSTS
Vol.203
What Is Design Management
Vol.202
Why Hiring No Longer Works— Redesigning Organizations and Decisions for an Uncertain Age
Vol.201
How to Choose a Branding Agency: 5 Criteria to Avoid Failure
Vol.200
Design Management: A Practical Guide for SMEs and Startups to Drive Real Results
Vol.199
How to Rebuild Brand Competitiveness: A Practical Guide to Brand Management for SMEs
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships









