Tag: amp-native

AMP Table of Contents Plugin WordPress Free and Compatible

Free Compatible AMP Table of Contents WordPress Plugin: A Complete Guide

A Table of Contents (TOC) is an essential feature for long-form content, helping readers navigate your posts and improving user experience. For AMP (Accelerated Mobile Pages) WordPress sites, having a TOC that’s both functional and AMP-compatible is crucial. However, finding a free plugin that works seamlessly with AMP can be challenging. In this article, we’ll explore the best free AMP-compatible Table of Contents plugins for WordPress, compare them with paid options, and explain how to install and use them. We’ll also dive into the SEO benefits of using a TOC plugin on your website.

Why Use a Table of Contents Plugin for WordPress?

Improved User Experience: Helps readers quickly navigate long articles.
Better SEO: Enhances on-page SEO by organizing content and improving readability.
Increased Engagement: Keeps visitors on your site longer by making content more accessible.
AMP Compatibility: Ensures your TOC works flawlessly on AMP pages.

Best Free AMP-Compatible Table of Contents Plugins

Here are some of the best free plugins that offer AMP compatibility:

1. Easy Table of Contents

Features:
Automatically generates a TOC based on headings.
AMP-compatible with proper configuration.
Customizable appearance and positioning.
SEO Benefits:
Adds schema markup for better search engine understanding.
Improves content structure and readability.

2. LuckyWP Table of Contents

Features:
Lightweight and easy to use.
AMP-compatible with minimal setup.
Supports smooth scrolling and custom styles.
SEO Benefits:
Enhances user experience, reducing bounce rates.
Improves content organization for search engines.

3. Fixed TOC

Features:
Creates a fixed (sticky) TOC that stays visible as users scroll.
AMP-compatible with proper configuration.
Supports custom colors and styles.
SEO Benefits:
Keeps readers engaged with easy navigation.
Adds structured data for better search engine visibility.

Comparison: Free vs. Paid Table of Contents Plugins

Feature	Free Plugins	Paid Plugins (e.g., Heroic Table of Contents)
AMP Compatibility	Limited (requires configuration)	Fully AMP-compatible out of the box
Customization	Basic customization options	Advanced styling and positioning options
Support	Community support	Premium support and updates
SEO Features	Basic schema markup	Advanced schema markup and analytics
Price	Free	Starts at $49/year

How to Install and Configure a TOC Plugin

1: Choose a Plugin

Select a plugin from the list above based on your needs.

2: Install the Plugin

Go to Plugins > Add New in your WordPress dashboard.
Search for the plugin name.
Click Install Now and then Activate.

3: Configure Settings

Navigate to the plugin’s settings page (usually under Settings or a dedicated menu).
Customize the appearance, positioning, and behavior of the TOC.
Enable AMP compatibility if required.

Step 4: Test on AMP Pages

Use the AMP Validator to ensure your TOC works correctly.
Check your AMP pages to confirm the TOC is displayed properly.

SEO Benefits of Using a Table of Contents Plugin

Improved Readability: A TOC breaks down long content into digestible sections, making it easier for readers to navigate.
Enhanced User Experience: Readers can quickly jump to sections of interest, reducing bounce rates.
Structured Data: Many TOC plugins add schema markup, helping search engines understand your content better.
Featured Snippets: A well-structured TOC increases the chances of your content being featured in Google’s snippets.
Internal Linking: A TOC acts as a form of internal linking, improving site structure and SEO.

Tips for Optimizing Your TOC for SEO

Use Descriptive Headings: Ensure your headings are clear and keyword-rich.
Enable Schema Markup: Use plugins that support schema markup for better search engine visibility.
Keep It Simple: Avoid overloading your TOC with too many items.
Test on Mobile: Ensure your TOC is mobile-friendly and works well on AMP pages.

Conclusion

A Table of Contents plugin is a must-have for any WordPress site, especially if you publish long-form content. With the right plugin, you can improve user experience, boost SEO, and ensure AMP compatibility. While free plugins like Easy Table of Contents and LuckyWP Table of Contents offer great functionality, paid options like Heroic Table of Contents provide advanced features and better support.

Have you used a TOC plugin on your WordPress site? Share your experience or ask questions in the comments below!

November 6, 2020

Solved AdSense AMP Auto-Ads WordPress Not Showing Up 2020
AdSense can be displayed on AMP Pages and Posts on WordPress with many options from manually adding code snippets and using plugins.

Enabling Auto-Ads Option – AdSense Account

This is the first step if you want to display Auto Ads on AMP enabled Posts.

The option is on your AdSense Account page, see the screenshot below click on the AMP is On

Once you click on the AMP is On, a new Window Will Open
Note: this option appears when you have valid AMP pages on your site.

You have to turn on the toggle follow Step 1, Step 2 and click on Done.

Adding AdSense Codes using Reusable Blocks

If you need to add AdSense in your posts specifically at a place while you are writing a new post, you can save the html code in a block and add that to your post anywhere,

On your Adsense Dashboard you need to copy the Ad unit Code

Go to Ads > By Ad Unit > Click on the ” < > ” Get Code Option, You will get an a Code Generetor Page

Copy the Code Snippets in the AMP Tab next to HTML tab

Go to your posts and add a html block

Once the block is added select to use the block as a Reusable Block See the Screenshot below

You have to click on the 3 Dots and in the options for the Block select Add to Reusable Blocks

Give it a name that you can remember like AdSense ADS Slot 1, so whenever you want you can use the block anywhere in your content.

Manually Adding AdSense Ads – All Posts After the_content

You can add these codes to your functions.php, I recommend using a child theme to do that or use Code Snippets Pro plugin to add these as code snippets.

Code Snippets

This is a free plugin available at the the WordPress Repository
```
add_filter ('the_content', 'insertAdSesnseSlot');
function insertAdSesnseSlot ($content) {
   if(is_single()) {
	  $content.= '<div style="content-align:center;">';
	  $content.= '<p><b>Sponsored Links</b></p>';
      $content.= '<amp-ad width="100vw" height="320" type="adsense" data-ad-client="ca-pub-123456789101112" data-ad-slot="123456789" data-auto-format="rspv" data-full-width="">';
      $content.= '<div overflow="">';
      $content.= '</div>';
      $content.= '</amp-ad>';
	  $content.= '</div>';
   }
   return $content;
}
```
Manually Adding AdSense Ads after second paragraph of each post
```
//Insert ads after second paragraph of all the single post content.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
 $ad_code = '<div style="content-align:center;"><p><b>Sponsored Links</b></p><amp-ad width="100vw" height="320" type="adsense" data-ad-client="ca-pub-123456789101123" data-ad-slot="123456789" data-auto-format="rspv" data-full-width="">
  <div overflow=""></div></div>
</amp-ad>';
 if ( is_single() && ! is_admin() ) {
 return prefix_insert_after_paragraph( $ad_code, 2, $content );
 }
return $content;
}
// Function to do this
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
 $closing_p = '</p>';
 $paragraphs = explode( $closing_p, $content );
 foreach ($paragraphs as $index => $paragraph) {
 if ( trim( $paragraph ) ) {
 $paragraphs[$index] .= $closing_p;
 }
 if ( $paragraph_id == $index + 1 ) {
 $paragraphs[$index] .= $insertion;
 }
 }
 return implode( '', $paragraphs );
}
```
Manually Adding AdSense Auto-Ads Code in Header.php

Open your Appearance > Theme Editor > Header.php
After the <head> tag add :
```
<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
```
After the Body Tag <body> add :
```
<amp-auto-ads type="adsense"
        data-ad-client="ca-pub-12345678910111234">
</amp-auto-ads>
```
Adding AdSense using Insert Headers and Footers Plugin

WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager

By WpBeginner available free at the WordPress Plugins Repository

Similar to adding manually you can also add the same if you use Insert Headers and Footers a plugin by Wp-Beginner

Adding AdSense using the Google Site Kit Plugin

Site Kit by Google – Analytics, Search Console, AdSense, Speed

By Google official team free at the WordPress Plugins Repository

Go to Site Kit > Settings > Adsense > Turn On The Toggle

Let Site Kit Place Adsense code on your site turned On will automatically get the ads showing up on your site.

Using AMP Auto Ads Plugin By Weston Ruter

Here is the link of the plugin, that you can download and upload to your plugins directory
https://gist.github.com/westonruter/a41573b932e24810b09949136b9a8445

After Adding the plugin go to WordPress Dashboard > Settings > Reading

On this reading options page, you just have to add your publisher id with complete like
ca-pub-123456789101123

Here is a screenshot

Cons and Pros of Using AdSense Auto-Ads on AMP on WordPress

Cons
- Known bugs Auto Ads Not Showing Up in AMP https://github.com/ampproject/amphtml/issues/28254 and many more open bugs for problems with amp auto-ads.
- Fewer Options for Ads: All Ad Options are not available for AMP like for the Non-Amp Sites, mainly In-Article, in-feed, Link ads.
- Auto Ads Can show up anywhere on the site, that means anywhere between your content that can ruin the design of the site.
- More AdSense Ad Impressions with AMP so better monetization of your content overall.
- AdSense Auto-Ads doesn’t require a fallback for browsers like duckduckgo that do not support Ads and tracking.
Conclusions and Checklist
1. AdSense for AMP on WP can also be displayed by other WordPress plugins available, pro versions etc, the options above are most lightweight to use with almost no effect on the performance of the site.
2. Never Cache the Adsense JavaScript or Ad Codes with any caching plugins that won’t show ads as AdSense uses cookies and analytics to show related ads.
3. Never use your own extra CSS or your own codes inside AdSense codes.
4. AdSense not showing up can be a reason with the bugs that are open and contributors already working on the same you can track them at the AMP HTML Project at Github.
5. Another way to find out if your ads don’t display is using your chrome console by Inspect Element, various other reasons can affect the non-display of the Auto-Ads or Normal Amp Ads like Cookies if they are blocked or are not secured on your server and CORS Policy of your Server or Hosting.
6. Proper placement of ads.txt file is also a must to check if the Ads are not displaying.
7. Amp pages should be valid to get AMP Ads, you can either use AMP Original Plugin to get validations or check your pages manually with an AMP Validator Tool.
8. If you use Cloudflare Rocket Loader you need to ignore the AdSense script from loading to the loader here How can I have Rocket Loader ignore specific JavaScripts? when using Cloudflare on your website.
October 31, 2020
Drastic Bounce Rate Plunge AMP Linker Unification
Understanding Google Analytics AMP Linker & Session Unification

AMP Site showing higher bounce rates?

Then you should follow this post closely it’s a short How-To on Unification of Amp sessions on Analytics Data, Correctly Doing AMP Analytics Session Unification with your domain and testing that the analytics tag is set up correctly with a testing tool in the last step of this post.

AMP Analytics Journey Across Two Sessions

When a visitor with a google search lands at your site on his mobile device particularly, he is on the AMP CDN domain, the sparking sign is not your real domain, for example in the screencast below, a visitor opens a link from google search index he visits amp cache URL that is hosted by google.

Session 1

In this Image, a new visitor goes to google Index finds our Domain and opens the URL that is an AMP URL with a Spark Sign.

The URL looks exactly like this https://www.google.com/amp/s/netnaps.com/

Session 2

From Session one, the Visitor now Explores the site and opens the Blog Button.

This is our Own Domain Or Real URL

AMP Analytics Correct Setup

This post is about the unification of these two sessions a visitors journey from, the AMP Cache CDN URL and the Real URL

For the unification of AMP Sessions, we have to first make an AMP GTM Container,
Google Tag Manager AMP Container.

Jump to this URL – https://tagmanager.google.com/

Click on Create Account at the Extreme Right of the Page Here

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

Add name, select your country

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

Select AMP as a Container, Amp Container has a specific features for Amp if compared to the usual GTM Conatiner

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

Once Container is created you can create a New Tag, Specifically for Conversion Linker on AMP Analytics

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

Add Conversion Linker, to your Tags its a Featured Tag as in the Screencast above.

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

Add your domain name check enable linking across domains.

Add Triggering, Firing triggers to All Pages, Page View

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

Save and Submit, Click On Publish

Screenshot from Google Tag Manager – A Google Product ©2018 Google LLC

You can give any version name to your container and description to remember changes made to this container.

Connecting tag to the Site

If you use WordPress, Edit your header.php file

This goes in your Head Tags :
```

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

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars": {
    "gtag_id": "UA-1234567-3",
    "linker": {
      "domains": ["yourdomain.com"]
    }
    ,
    "config": {
      "UA-1234567-3": {
        "groups": "default"
      }
    }
  }
}
</script>
</amp-analytics>

```
This goes in your Body Tag, Make sure to change your GTM- , and Analytics code above.
```

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

```
Testing the GTM Tags

Jump to this Free Tag Tester here : https://amptagtest.appspot.com/

Screenshot Taken From appspot.com

If everything is Green, you have set everything correctly now see how your Bounce rates go down.

AMP Analytics Limitation

AMP Analytics Limitations As Per Google
Official google link here. That Mentions this Limitation
- Session unification via AMP linker will not happen if a first-time user closes out the AMP page without navigating to next page since the session unification works using link decoration.
If you use two versions AMP and NON-AMP you should follow the above google URL and then implement the same on your NON-AMP Site Versions.

AMP Analytics Tested On WordPress

The above steps were done on a WordPress Latest Version with AMP Original Plugin as a Native Mode, I have also written a post on getting Native Version AMP on WordPress

All the Screenshots Above in this post are taken from Google Tag Manager, A Google Product ©2018 Google LLC, Google and the Google logo are registered trademarks of Google LLC.
October 7, 2020
Amp Native AMP First Standard Mode On WordPress
Accelerated Mobile Pages (AMP) have revolutionized the way websites load on mobile devices, offering lightning-fast performance and improved user experiences. For WordPress users, implementing AMP can be a game-changer, especially with plugins like AMP Native and AMP First Standard Mode. However, setting up and validating AMP on WordPress can sometimes be tricky. In this guide, we’ll explore how to use AMP Native and AMP First Standard Mode, validate your setup, and weigh the pros and cons of this approach.

What is AMP Native & AMP First Standard Mode?
- AMP Native: A WordPress plugin that enables AMP functionality without requiring a separate AMP version of your site. It integrates AMP directly into your existing theme.
- AMP First Standard Mode: A configuration where your entire site is served as AMP pages, ensuring a consistent and fast experience across all devices.
Why Use AMP Native & AMP First Standard Mode?
1. Improved Performance: AMP pages load instantly, reducing bounce rates and improving user engagement.
2. SEO Benefits: Google prioritizes AMP pages in search results, especially for mobile users.
3. Simplified Setup: AMP Native eliminates the need for separate AMP templates, making it easier to implement.
4. Consistency: AMP First Standard Mode ensures your entire site adheres to AMP guidelines.
Step-by-Step Guide to Implement AMP Native & AMP First Standard Mode

Follow these steps to set up and validate AMP Native and AMP First Standard Mode on your WordPress site:

Step 1: Install the AMP Plugin
1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for AMP and install the official AMP plugin by WordPress.org.
4. Activate the plugin.
Step 2: Configure AMP Native
1. Go to AMP > Settings in your WordPress dashboard.
2. Under the Template Mode, select Native.
- This ensures your existing theme is used for AMP pages.
1. Save the changes.
Step 3: Enable AMP First Standard Mode
1. In the AMP > Settings section, enable AMP First Standard Mode.
- This ensures your entire site is served as AMP pages.
1. Save the changes.
Step 4: Validate Your AMP Setup
1. Use the AMP Validator to check if your pages comply with AMP standards.
- Visit your site and append /amp/ to any URL (e.g., https://yoursite.com/sample-post/amp/).
- Use the AMP Validator to test the page.
1. Fix any validation errors:
- Common issues include invalid CSS, missing AMP components, or unsupported tags.
- Use the AMP Compatibility Tool in the plugin to identify and resolve issues.
Step 5: Customize AMP Appearance
1. Go to AMP > Design in your WordPress dashboard.
2. Customize the appearance of your AMP pages:
- Change colors, fonts, and layouts to match your brand.
1. Save the changes.
Pros and Cons of AMP Native & AMP First Standard Mode

Pros
1. Improved Performance: AMP pages load faster, enhancing user experience.
2. SEO Advantages: AMP pages are prioritized in Google search results.
3. Simplified Setup: No need for separate AMP templates or themes.
4. Consistency: AMP First Standard Mode ensures all pages adhere to AMP guidelines.
Cons
1. Limited Customization: AMP restricts certain HTML, CSS, and JavaScript elements.
2. Plugin Dependency: You rely on the AMP plugin for functionality.
3. Validation Challenges: Some themes or plugins may not be fully AMP-compatible.
4. Learning Curve: Beginners may find it challenging to troubleshoot validation errors.
Troubleshooting Common Issues
1. Validation Errors:
- Use the AMP Compatibility Tool to identify issues.
- Replace unsupported elements with AMP-compatible alternatives.
1. Styling Issues:
- Ensure your CSS adheres to AMP guidelines (e.g., inline styles only).
- Use the AMP Design settings to customize your pages.
1. Plugin Conflicts:
- Disable plugins one by one to identify conflicts.
- Use AMP-compatible plugins whenever possible.
Best Practices for AMP on WordPress
1. Test Thoroughly: Validate all pages and posts to ensure AMP compliance.
2. Optimize Images: Use AMP-compatible image formats like WebP.
3. Monitor Performance: Use tools like Google PageSpeed Insights to track improvements.
4. Stay Updated: Regularly update the AMP plugin and your theme for compatibility.
Conclusion

Implementing AMP Native and AMP First Standard Mode on WordPress can significantly improve your site’s performance and SEO. While there are some challenges, the benefits of faster load times and better mobile experiences make it worth the effort. By following this guide, you can set up, validate, and optimize AMP for your WordPress site with confidence.

Have you tried AMP Native or AMP First Standard Mode? Share your experience or ask questions in the comments below!
August 6, 2020