Tag: AMP

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
Adding AMP Cookie Consent in WordPress Manually or Plugin
Monday 26 October 03:13
This post relates to AMP Cookie Consent Only for “WordPress” On How you can add cookie notice in AMP with two options.

Manual option and with a plugin, While manual option only will display that you use cookies and visitor can accept that, the plugin does what actually is required the consent of the visitor whether he wants to use the cookies or not.

At the end of this short tutorial, I have given the pros and cons of both options.

Manually with the HTML Code + CSS

Add AMP Notification Code To Your Header

Here is a code you can just copy-paste in your child themes header.php file, make sure to include the code before the closing </head> tag
```
<amp-user-notification id="my-notification" class="sample-notification" layout="nodisplay">
<span>We use cookies by browsing, you consent to use of cookies &nbsp;&nbsp;Cookie Notice
<a href="https://netnaps.com/cookie-notification/">Cookie-Notification</a><button on="tap:my-notification.dismiss">Accept <span class="dashicons dashicons-yes"></span></button></span>
</amp-user-notification>
```
Note : I am using the Default Twenty Twenty Theme on my WordPress Blog

Add CSS to Your Extra CSS
```
amp-user-notification.sample-notification{
background: linear-gradient(90deg, rgba(255,255,255,1) 35%, rgba(250,250,250,1) 100%);
}

amp-user-notification.sample-notification {
 border:1px solid grey;
 padding: 1rem 1rem;
 line-height:2;
font-size:1.4rem;
 border-width: 0px 0 0;
 box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.1);
}
amp-user-notification.sample-notification > span {
    display: block;
    margin: 0 auto;
    max-width:720px;
}
amp-user-notification.sample-notification span > button {
    min-width: 80px;
	  margin-left:1.5rem;
    display: inline-block;
    padding: 0.4rem 0.6rem;
    font-size:1.3rem;
    color: #ffffff;
	  line-height:1.5;
    background-color: #0052D5;
    box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.3);
    appearance: none;
}      
```
Css you can change, as per your websites look and theme.

Here is the Result :

The screenshot shows, how the Cookie Consent appears.

Add a Plugin For GDPR Cookie Notice

Why I am recommending the below plugin is the only reason it is 100% compatible with an AMP First Site, AMP in a Standard Mode, Desktop or Mobile.

While this can also work with the other environments like Transitional Mode for AMP or even if you don’t use AMP, or Disable AMP later, it won’t give any problems.

Also, the Plugin is lightweight; that is, it doesn’t make your site slow or runs any non required queries or scripts.

To Install the plugin and set it up properly :

Go to Plugins > Add New > Type in Search ” gdpr felix ” as its by Author Name : Felix Arntz

Settings for Plugin GDPR Cookie Notice By Felix Arntz

After, Installing and activating the plugin, click on customize

This Takes you to the, customize option window

Policies option you can select all your policy pages

Privacy Policy Page, Cookie Policy Page and Cookie Section ID

Cookie Section ID is the anchor URL or ID Attribute that directly redirects a visitor to your Cookie section inside your Privacy policy page,

On this Option ” Content ” you can visually customize your cookie consent notice, to anything as per your requirements.

In the Appearance section, you can change colours and completely style the cookie consent notice as per your sites colours and theme.

This is the integrations options, where you can control the cookie-based features with the checkboxes as per your requirements.
- The manual option above eliminates the use of another extra plugin on your site.
- Everything normally works if you use the manual option ads and analytics, sessions on AMP are unified.
- With the plugin, its code is as per the required cookie and GDPR Notice, as everything is triggered cookies for analytics or ads only on the user consent.
- Valid for AMP, All validations are passed with both the options.
Cons
- Amp Linker Session Unification in AMP Tag Test Fails if you are using the plugin option.
  Reason analytics are triggered only when the visitor gives his consent.
- If you use Ads, from AdSense or similar channels that use cookies, the Ads won’t display till the user gives his consent, as cookie sessions start after the consent, in the plugin option.
- First Contentful Paint or FCP can be effected in the page speed tests, as this adds an extra element on the page, both options plugin or manual.
- An extra request or query is added to the page with both the options.
October 25, 2020
Stunning Web Stories for WordPress Turbo-Charge Your 2020 Blog
Web Stories on WordPress A Step-Wise Tutorial

Web Stories Are Stunning!
Using the WordPress Plugin for Web Stories Here is an example
Installing Web Stories for WordPress Plugin

Plugins > Add New > Type ” Web Stories ” Install and Activate.

Settings For Web Stories for WordPress Plugin

From Admin Menu, you have three options as in the screenshot above.

Dashboard
The Dashboard shows you everything to get started with the stories,
use the Create a New Story button to jump to the editor and add a story.

All Stories

The all stories option shows you web stories that you have already made and saved, in all modes published, drafts, etc. like posts.

Add New

It takes you to the editor to add a new story.

If we see tab wise on the Dashboard, it shows you three options
(1) My Stories, (2) Explore Templates (3) Editor Settings

My Stories

My Stories option, relates to your web stories that you have created and display them in a format All Stories, drafts, and published if you have many search bar.

Explore Templates

Explore the Templates option relates to pre-made templates bundled along with the WordPress Plugin. It makes it easy to get started and understand how web stories work.

Editor Settings Google Analytics for Web Stories for WordPress

In the editor settings, you can add your Google Analytics code to track views of the story, add your logo that should be precisely 96×96 pixels a perfect square. In the end, a data-sharing option checkbox to improve the plugin.

Editor Settings and Features for Web Stories for WordPress

Upload Image or Video option connects your WordPress default media gallery to upload the images or videos. You can select any web stories supported picture formats or video clips and attach them to your web stories.

With Blue Upload Button you can add the New Files as Uploads.

Text option as T has few presets for Text Formats, Like Heading ( H1, H2, and H3), Paragraph, Caption, and Overline.

SEO of your content into headings and subheadings short paragraphs and citations.

Shapes next to Text option has 12 Basic shape elements that can be very useful to highlight and better display the story format.

Add the Title option Here you can give a title to the story.
It automatically creates a permalink for the web store.

Below the Editor, you have Delete Page, Duplicate Page, New Page, Undo and Redo options.

Duplicating the page with this option to take all the elements to the next page as same and change a few details like text or pictures as your story usually goes, the background can be the same for pages, and text you can edit.

Page advancement feature at the end of this panel to control whether the story auto-plays or the reader has to tap for the next page or slide.

The duration can also be controlled default is 7 seconds.

I recommend keeping elements inside the safe Zone.

Disable or Enable Safe Zone Option. Safe Zone is a markup for adjusting your elements in a zone that is viewable to all devices. By default is enable.

Below that, you have the Grid View Option.

Grid view shows all your web stories pages in a grid view, easy to select one of the pages to edit if you have 30 Pages on a story.

Keyboard Shortcuts for publishing stories with ease of keyboard

Adding Links in Web Stories, This is useful if you have an Affiliate link, or have to link a visitor to your post.

Design Tab for Web Stories WordPress Plugin makes it easy to use Google fonts, select layers, change font colours, Size Position, and all preliminary design features a plugin could have inbuilt.

Page Attachment Links

Adding Links To Web Stories On Background With Swipe Up Learn More Button

To add links to your story when a user can swipe up to go to a page with text as “Learn More” or whatever you want to give kindly have a look at the below screenshot.

To add this Learn More Button in our Web Story select the background and add the URL this is called

Page Attachment,

Also, you may change the text from “Learn More” to anything you wish to another awesome feature of the web stories for WordPress plugin.
Displaying Web Stories for WordPress on Posts or Pages

To display web stories, open your blocks in the editors select Stories Block,
Next, add the URL of your published story to embed like in the screenshot below.

Add a Cover for Web Stories

Cover for the web stories – Dimensions for the image is 360 x 600 pixels.

Make the cover attractive, as a cover of a Good Story Book.

Structured Data SEO for Web Stories for WordPress
Web Stories being a post type, can easily select an Article in a Yoast free plugin, a screenshot above.

You have to go to Yoast > Search Appearance > Schema Settings.

For Another Popular and better plugin than Yoast, Rank Math Free also fully supports the Web Stories for WordPress,

Rank Math’s Dashboard shows a toggle to enable Google Web Stories for WordPress.

Here is a small checklist :

Check this official link by Google to check best practices for Web Stories SEO.

Minimum And Maximum Pages for Web Stories
Ideally, a web story should have 10-20 pages, but a minimum of 5 and a maximum of 30 pages. Make a story with a minimum of 5 and a maximum of 30-page slides.

Completeness in the story
The story should be complete, should not end without any reason or right direction.

For example, if a recipe story could be for making a new salad, but that should cover each part from starting with vegetables used to being served on the table.

What you are trying to narrate in the story should be valid and relate the pages from start to end. Avoid skipping pages and publish information that is not clear what you want to narrate.

Use of Minimum Text With Clear Fonts Size Display
Title length and Text in story pages should be short as it’s for mobile devices; the fonts should be clear and readable for everyone. If possible, keep Text below 10 to 12 words per page.

Guidelines for Videos
If you add videos, use short clips 15 seconds per slide, use any app to clip the long videos into short clips, and see what video format would work best that uses minimum storage space and outputs with the best resolution.

Follow Content Guidelines
The Web Stories can also get into Google Discover on Android phones, so best is to follow the Discover content guidelines.

Don’t overuse multiple elements on a story page.
Please keep it simple, elegant, light, and short don’t use more and more elements on a single slide page.

As the user views a page for 5 seconds to 7 seconds, keep minimum details and Text that a user can read easily in that view time.

Guidelines for Images
Use good quality resolution images that are clear and unique in your story and relate to your narrative. As the story is in a Portrait mode, avoid the use of landscape format.

I usually keep on improving Checklists on my blog. One of my lists can be of your interests here 15 Tips to Avoid Structured Data Errors AMP on WordPress.

Another useful resource to read about SEO for web stories is from the official AMP Blog here.

Seo Web Stories WordPress: Official Video

Templates Included

Pick up a pre-installed template for your First Story, change the same with your unique content, like Title, headings, and page story you have created,
to quickly get started with the google web stories.

Note: Your content, whatever you make, should always be unique.

With the templates, you get a clear idea of how the stories should work properly and how many visitors you are getting on your stories with google analytics,

If you have any errors or warnings at the google search console, you can also validate that with a fix.

Updates :
Friday 13 November 02:02
With Latest Release Now WordPress Version 1.1 Web Stories Plugin Also Supports Gifs from Tenor, that you can add in your stories, Videos and Ai Writer

🔥 Web Stories for WordPress 1.1 is up, and has a bunch of cool new features:

☑️ GIFs built-in, courtesy of @gifkeyboard
☑️ High quality text sets, courtesy of @iA
☑️ Video caption support for improved SEO + A11Y

👉🏼 Read more: https://t.co/kuDu40msI8 pic.twitter.com/RPI15yTkIv
— Paul Bakaus (@pbakaus) November 12, 2020
Please Find 10 Free Resources to make awesome Web Stories of-course in a web story below
October 11, 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

Online Website Testing Tools Free List for 2020

Sunday 9 August 01:07

Online Website Testing Tools Free List All Tools Are Free in the List Below

Monday 10 August 20:45

Tool Link	What does this Free Tool do?
Safety Security Checks
Mozilla Observatory	The Mozilla Observatory has helped over 170,000 websites by teaching developers, system administrators, and security professionals how to configure their sites safely and securely. Free
Google Safe Browsing Check	Safe Browsing is a service that Google’s security team built to identify unsafe websites across the web. Free
SucuriSite Check	Free website security check & malware scanner
Qualys SSL Labs	SSL Server Test, This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet.
HSTS Scan / Submit	HTTP Strict Transport Security (HSTS) Scan, Check Eligibility, or Add Domain to the list.
Alien Vault	Open Threat Intelligence Community
Virus Total	Analyze suspicious files and URLs to detect types of malware, automatically share them with the security community
Pentest Website Scanner	Discover common web application vulnerabilities and server configuration issues. Free Limited Scans
ImmuniWeb	Website security test, Takes approx 10 Mins Time to scan.
UpGuard	Free Website Security Scan with a score.
JitBit SSL Check	SSL Check scan your website for non-secure content.
AMP Tools
Amp Validator	Checks for Google AMP Validation Free
AMP Tag Test	A tool to Test AMP Tags for Analytics
AMP Cache URL	A tool to Generate AMP Cache URL’s
Cache & Cookies
Cache Checking	This tool lists which web files on a website are cached and which are not. Furthermore, it checks by which method these files are cached and what the expiry time of the cached files is.
Web Cookies Scanner	Web application vulnerability and privacy scanner with support for HTTP cookies.
SEO, Accessibility, PWA
WebHint	Use the online scanner for a pre-configured set of rule checks to see what the tools are capable of and how your website is doing.
Google Rich Results	Does your page support rich results? Check on this Link by Google.
Google Structured Data Testing Tool	Checks for Structured Data Free
Google Review Link Generator	Generate a link to get Google Reviews with this tool.
Mobile-First Index Checker	Check Index of Mobile-First Index You can review all the current announcements and important resources related to mobile-first indexing from here.
Performance Testing Tools
Fast Or Slow Speed Test	Fast or slow is a Global Speed Profiler, You can test your Page Speed from Various Global Locations.
Google Page Speed Insights	Make your web pages fast on all devices, by analyzing in details how your page loads and check what exactly is blocking the speed.
GTMetrix	How fast does your website load? Find out with GTmetrix See how your site performs, reveal why it’s slow and discover optimization opportunities.
Pingdom	Page Speed, page load time, analyze it and find bottlenecks.
KeyCDN Tools	Website Speed Test, Performance Test, HTTP Header Checker, HTTP/2 Check, Brotli Test, IP Location Finder, DNS Checker, Ping Test, Ping IPV6 Test, Traceroute Test, BGP Looking Glass, Certificate Checker, Certificate Chain Composer SHA256 Generator, SSL FREAK Test, TLS Logjam Test and More.
Cloudinary	Website Speed Test Image Analysis Tool
WebPage Test	Webpage test to check complete page performance like Security score, First Byte Time, Keep-alive Enabled, Compress Transfer, Compress Images, Cache static content, Effective use of CDN.
Class C IP Address Tester	Class C IP Address Testing Tool
Ranking & Analysis
Site Rank By Alexa	Get a free, automated website analysis to quickly gain insights into a site’s strengths, weaknesses, and digital marketing opportunities.

Testing a website is the most important thing to do if you own a website or a blog that is dynamic, has a database that too on a regular basis,

thus to keep my site updated and develop the same better I keep on checking my website on these tools I have collected above, simply I have given a short description of what these tools do, once you go to these tools you can check further with the terms and conditions they have for testing a website, mostly all these tools are free and safe.

Some are also very well renowned and are must for every website.

Hope you like this list, if you wish to suggest some more please comment below I will check the same and add the same if its in reference to the matter of the post.

August 9, 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
List of Plugins tested on AMP Standard Mode
List of Plugins Tested on AMP Standard Mode: Boost Your Website’s Performance

Accelerated Mobile Pages (AMP) is a game-changer for improving website speed and user experience on mobile devices. By using AMP, you can ensure your site loads instantly, which is crucial for retaining visitors and improving SEO rankings. However, not all plugins are compatible with AMP Standard Mode. To help you out, we’ve compiled a list of popular plugins that have been tested and work seamlessly with AMP Standard Mode. These plugins will enhance your site’s functionality without compromising AMP compatibility.

What is AMP Standard Mode?

AMP Standard Mode is a WordPress implementation that ensures your site adheres to AMP guidelines while maintaining full functionality. It allows you to use AMP-compatible plugins and themes to deliver a fast, responsive, and user-friendly experience.

Popular Plugins Tested on AMP Standard Mode

Here’s a list of widely-used plugins that are fully compatible with AMP Standard Mode:

1. Yoast SEO
- Description: Yoast SEO is one of the most popular SEO plugins for WordPress. It helps you optimize your content for search engines and improves your site’s visibility.
- AMP Compatibility: Fully compatible with AMP Standard Mode.
- Plugin URL: Yoast SEO
2. WP Super Cache
- Description: WP Super Cache is a caching plugin that generates static HTML files from your dynamic WordPress site, improving load times.
- AMP Compatibility: Works seamlessly with AMP Standard Mode.
- Plugin URL: WP Super Cache
3. Smush – Image Optimization and Compression
- Description: Smush optimizes and compresses images without losing quality, ensuring faster page load times.
- AMP Compatibility: Fully compatible with AMP Standard Mode.
- Plugin URL: Smush
4. MonsterInsights
- Description: MonsterInsights is a Google Analytics plugin that helps you track your website’s performance and user behavior.
- AMP Compatibility: Works perfectly with AMP Standard Mode.
- Plugin URL: MonsterInsights
5. Contact Form 7
- Description: Contact Form 7 is a simple and flexible plugin for creating contact forms on your WordPress site.
- AMP Compatibility: Fully compatible with AMP Standard Mode.
- Plugin URL: Contact Form 7
6. WPForms
- Description: WPForms is a user-friendly form builder plugin that allows you to create contact forms, surveys, and more.
- AMP Compatibility: Works seamlessly with AMP Standard Mode.
- Plugin URL: WPForms
7. Elementor
- Description: Elementor is a powerful page builder plugin that lets you design custom layouts with a drag-and-drop interface.
- AMP Compatibility: Fully compatible with AMP Standard Mode.
- Plugin URL: Elementor
8. AMP for WP – Accelerated Mobile Pages
- Description: This plugin helps you create AMP-compatible pages and ensures your site adheres to AMP guidelines.
- AMP Compatibility: Designed specifically for AMP Standard Mode.
- Plugin URL: AMP for WP
9. WooCommerce
- Description: WooCommerce is the most popular e-commerce plugin for WordPress, enabling you to create and manage online stores.
- AMP Compatibility: Fully compatible with AMP Standard Mode.
- Plugin URL: WooCommerce
10. Really Simple SSL
- Description: Really Simple SSL ensures your site uses HTTPS by configuring SSL certificates automatically.
- AMP Compatibility: Works seamlessly with AMP Standard Mode.
- Plugin URL: Really Simple SSL
Benefits of Using AMP-Compatible Plugins
1. Improved Performance: AMP-compatible plugins ensure your site remains fast and responsive.
2. Better User Experience: Faster load times lead to higher user engagement and lower bounce rates.
3. SEO Advantages: AMP pages rank higher in search engine results, improving your site’s visibility.
4. Seamless Integration: These plugins work flawlessly with AMP Standard Mode, ensuring no functionality is lost.
Tips for Choosing AMP-Compatible Plugins
1. Check Compatibility: Always verify if a plugin is AMP-compatible before installing it.
2. Test Plugins: Use tools like the AMP Validator to test your site after installing new plugins.
3. Keep Plugins Updated: Regularly update your plugins to ensure compatibility with the latest AMP standards.
4. Avoid Overloading: Use only essential plugins to maintain optimal site performance.
Conclusion

Using AMP-compatible plugins is essential for maintaining a fast, responsive, and user-friendly website. The plugins listed above have been tested and proven to work seamlessly with AMP Standard Mode, ensuring your site delivers an exceptional user experience. Whether you’re optimizing for SEO, improving performance, or enhancing functionality, these plugins are a great addition to your WordPress site.

Have you tried any of these plugins with AMP Standard Mode? Share your experience in the comments below!
July 26, 2020

Tag: AMP

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

Why Use a Table of Contents Plugin for WordPress?

Best Free AMP-Compatible Table of Contents Plugins

1. Easy Table of Contents

2. LuckyWP Table of Contents

3. Fixed TOC

Comparison: Free vs. Paid Table of Contents Plugins

How to Install and Configure a TOC Plugin

1: Choose a Plugin

2: Install the Plugin

3: Configure Settings

Step 4: Test on AMP Pages

SEO Benefits of Using a Table of Contents Plugin

Tips for Optimizing Your TOC for SEO

Conclusion

Enabling Auto-Ads Option – AdSense Account

Adding AdSense Codes using Reusable Blocks

Manually Adding AdSense Ads – All Posts After the_content

Manually Adding AdSense Ads after second paragraph of each post

Manually Adding AdSense Auto-Ads Code in Header.php

Adding AdSense using Insert Headers and Footers Plugin

Adding AdSense using the Google Site Kit Plugin

Using AMP Auto Ads Plugin By Weston Ruter

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

Conclusions and Checklist

Manually with the HTML Code + CSS

Add AMP Notification Code To Your Header

Add CSS to Your Extra CSS

Add a Plugin For GDPR Cookie Notice

Settings for Plugin GDPR Cookie Notice By Felix Arntz

Web Stories on WordPress A Step-Wise Tutorial

Installing Web Stories for WordPress Plugin

Settings For Web Stories for WordPress Plugin

Editor Settings and Features for Web Stories for WordPress

Displaying Web Stories for WordPress on Posts or Pages

Structured Data SEO for Web Stories for WordPress

Seo Web Stories WordPress: Official Video

Updates :

Understanding Google Analytics AMP Linker & Session Unification

AMP Analytics Journey Across Two Sessions

Session 1

Session 2

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

Connecting tag to the Site

Testing the GTM Tags

AMP Analytics Limitation

Online Website Testing Tools Free List All Tools Are Free in the List Below

What is AMP Native & AMP First Standard Mode?

Why Use AMP Native & AMP First Standard Mode?

Step-by-Step Guide to Implement AMP Native & AMP First Standard Mode

Step 1: Install the AMP Plugin

Step 2: Configure AMP Native

Step 3: Enable AMP First Standard Mode

Step 4: Validate Your AMP Setup

Step 5: Customize AMP Appearance

Pros and Cons of AMP Native & AMP First Standard Mode

Pros

Cons

Troubleshooting Common Issues

Best Practices for AMP on WordPress

Conclusion

List of Plugins Tested on AMP Standard Mode: Boost Your Website’s Performance

What is AMP Standard Mode?

Popular Plugins Tested on AMP Standard Mode

1. Yoast SEO

2. WP Super Cache

3. Smush – Image Optimization and Compression

4. MonsterInsights

5. Contact Form 7

6. WPForms

7. Elementor

8. AMP for WP – Accelerated Mobile Pages

9. WooCommerce

10. Really Simple SSL

Benefits of Using AMP-Compatible Plugins

Tips for Choosing AMP-Compatible Plugins

Conclusion