Creating a Table of Contents in an AMP HTML

Contents

Creating a Table of Contents in an AMP HTML blog post is actually the same as the TOC for a Non AMP blog, which is to provide ease of navigation to the reader for each chapter of the article that we make.

It's just that the making is a little different from the TOC for Non AMP blogs ie it doesn't use javascript or jquery to make the jump to the target header.

For the AMP HTML TOC blog, we will use amp actions to jump to the target so that this will not create an AMP error.

Usually we find on a web page or blog, a table of contents that contains several lists from the list of content that is in the post.

The table of contents is often referred to as Table of Contents a.k.a TOC. Well today we will create a Table of Contents for AMP HTML blog posts.

This Table of Content for the AMP HTML blog certainly does not use javascript to be valid AMP, but uses the AMP shortcode action that I once shared.

What is a Table of Contents or TOC?

As I said above, Table of Contents or TOC is a table of contents that contains several lists from the list of content that is on the posting page. Usually stored at the beginning of the post or after the first or second paragraph or adjusted.

With Table of Contents or TOC we can jump to certain parts of the content that we want to read. Usually it will be marked with a header for each content. And this is usually used for posts that have very long content, so that readers find it easier to sort the chapters of content without the need to tired of scrolling the screen.

If it is exemplified in a book, there is usually a table of contents page that contains a list of pages for each chapter of the book. With that, we can easily find the page of the chapter we want to read.

And usually this Table of Contents or TOC will also be indexed by Google and will be displayed on the search page in the form of a jump to content link. Later I will update this post if the TOC of this page has been indexed by Google.

Update - After I tried a few keywords, finally the TOC on this page appeared in the search results.


Back to Content ↑

Table of Contents or TOC for AMP

For blogs with AMP HTML, of course you can't use TOC that uses javascript like non-AMP blogs because it will make AMP invalid blogs.

For this reason, I made this Table of Contents or TOC for bloggers who use AMP HTML, so this will make the AMP HTML blog posting page more varied and appear more professional.

To make a Table of Contents or TOC for this AMP blog I will explain below.

Back to Content ↑

Make a Table of Contents or TOC for AMP

Please follow the steps below to create a TOC in the AMP post.

Please add CSS below to your blog's amp-custom style.

#btn_toc{font-weight:bold;cursor:pointer}
    #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
    #btn_toc svg{vertical-align:middle}
    #toc li,.back_toc{cursor:pointer}
    #toc{display:grid}
    :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

Please set height: 40px; margin-top: -40px; according to the height of the sticky menu (if the blog uses a sticky menu), if you don't use the sticky menu then you can delete the last CSS line. Please refer to the following post for the jump to target trick.

Then save the HTML code below to display the TOC in the post, for example after the first paragraph.

<div id="btn_toc" on="tap:toc.toggleVisibility" role='button' tabindex='0'>Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
  <li><a href="#toc_1" title="Lorem Ipsum">Lorem Ipsum</a></li>
  <li><a href="#toc_2" title="Morbi gravida varius fringilla">Morbi gravida varius fringilla</a></li>
  <li><a href="#toc_3" title="Mauris consectetur">Mauris consectetur</a></li>
  <li><a href="#toc_4" title="Donec facilisis nec sem ac mattis">Donec facilisis nec sem ac mattis</a></li>
  <li><a href="#toc_5" title="Donec finibus tellus eget sodales vestibulum">Donec finibus tellus eget sodales vestibulum</a></li>
</ol>
</div>

The number of lists please adjust to the header created and adjust #toc_1 and so on according to the number of lists created.

Then please create a header for each content for the TOC as below

<h4 id="toc_1">Lorem Ipsum</h4>

For H4 tags, please use the minor heading from the post editor tab above then add id="toc_1" and so on according to the position of the header. For the second header, add the code id="toc_2", and so on.

Then at each bottom of the content of each chapter add the following code to make it easier for the reader to return to the top to the TOC.

<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Back to Content ↑</div>

For more clear application, please check the JSFiddle demo below.

Back to Content ↑

Example Table of Content AMP

For a demo or TOC example on this AMP you can try on this page or you can try the JSFiddle widget below.

You can also check how to apply the HTML code in the post to JSFiddle below.



Back to Content ↑

Good luck.