entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

2020's hottest tech, AMP Stories has been implemented on pixiv

The team at pixiv implemented AMP Stories, which was released at the end of 2019. I'd like to provide an overview of pixiv’s implementation of AMP Stories.

日本語版はこちら

About pixiv

pixiv is a service where creators can post their illustrations, manga, and novels. As of September 2019, the website features 85 million works posted by more than 40 million registered users. Recently, registrations from countries other than Japan have increased and now account for about 70% of our new users.

About AMP and AMP Stories

About AMP (Accelerated Mobile Pages)

AMP is a framework created mainly by Google for displaying websites faster. One of the benefits of AMP content is that when users open a link to an AMP page from Google Search results, they are served from the Google AMP cache which makes the page load faster.

About AMP Stories

AMP Stories are story-type content that users can view in full screen. Users can quickly switch pages by tapping within the Story. Moreover, the AMP Stories format is free for everyone to use and can be implemented on any site.

AMP Stories - amp.dev

About pixiv AMP Stories

The many works that are posted on pixiv are tagged with hashtags. We created AMP Stories to display popular weekly illustrations sorted by pixiv hashtag.

You can check the actual AMP Stories from the URL below.
Original weekly popular illustrations (01/04/2020 - 01/11) - pixiv

Moreover, we implemented AMP Stories so that works can reach many users even without an effort by their creators while making the topic of each work clear and straightforward.

Post-release results

  • About 35% of users who browsed AMP Stories opened the illustration work pages
  • About 61% of users who browsed AMP Stories viewed them up to the last page

We believe that we could achieve these results thanks to the many users that took an interest in the AMP Stories we created.

Benefits of implementing AMP Stories

1. AMP Stories can be displayed in Google Discover and Google Search

Under certain conditions, AMP Stories will appear in Google Search results in certain territories, such as the United States. By implementing the English version of AMP Stories, pixiv hopes that pixiv content will be displayed in the United States and other countries. There's a high chance that this aspect of AMP Stories will extend to Japan in the future, so we expect more opportunities to share the works of pixiv users to an even larger audience.

The following article from 2018 covers the benefits of introducing AMP Stories when it comes to Google Search results.

developers.googleblog.com

2. Ready-to-use story development format

There's no need to develop your own format from scratch to bring story-style content to your service. The AMP Stories format and development documentation are already available and ready to use, making it easy for anyone to create story-style content.

3. Monetization

AMP Stories includes a feature called Story Ads, where full-screen ads can be placed in the midst of the story. You can see an example of a story with full-screen ads on the page below.

amp.dev

How to implement AMP Stories

  1. Follow the tutorial and create a trial AMP Story. Make sure to thoroughly read and understand the other online documentation
  2. Choose specifications, design, etc.
  3. Develop
  4. Set up analytics and structured data
  5. Release

Pay close attention to these two aspects of your AMP Story:

  • Setting up analytics and structured data
  • Preparing an internal link in the service that leads to AMP Stories

Documentation for setting up an AMP Story

Tutorial documentation

First, I recommend completing the AMP Stories tutorial. You can get a firm grasp on what AMP Stories really is. This tutorial is available in English and Japanese.

amp.dev

Best practices

This document guides you on how to display text, images, and videos as well as how to use animations. I recommend reading this documentation before you actually begin creating your AMP Stories.

amp.dev

Analytics for AMP Stories

In order to check how many views your Stories are receiving and refine your strategy moving forward, you'll need to set up analytics after you release your AMP Stories.

AMP Stories treats pageviews and events separately when it records viewing information. You can learn more about what events occur by reading Analytics for your AMP Stories – The AMP Blog. There are a lot of diagrams included to make this concept as easy to understand as possible.

blog.amp.dev

amp.dev

Adding structured data and other additions

When you have an AMP and non-AMP version of the same page, you can set them as "canonical" or "amphtml".

Also, you can optimize structured data for search engines for AMP Stories as well. You can evaluate your structured data using structured data testing tools. Check out pixiv AMP Stories structured data tools here. By clicking the preview button, you can see how your Story will be displayed within Google Search results.

amp.dev

developers.google.com

In conclusion

Because AMP Stories load at high speeds in a format optimized for mobile users, their popularity is likely to grow moving forward. By using (MakeStories beta), anyone can easily create their own AMP Stories. Why not give it a try yourself?

If you have any questions, please contact me on any of the links below.

20191219014111
mu-ko
  Hello, I am mu-ko, a product manager at pixiv. I like yogurt and UVERworld.