From the dashboard, we go to the left-hand side in Menu bar go to AMP option panel.
On the left side, You will see each option is divided into two sections:
Now, let’s explore these Sections in brief.
Go to AMP option panel -> Setting -> General
1.1 General :
In this option, you will see two portions called ‘Branding‘ and ‘AMP Support‘.
- Logo: You can see an Option named Logo to Add Logo to your AMP Site. It will appear on the header bar.
- Resize: Once we enable this resize option other option will be shown.
- Resize Method: In this option, we can select. the list will be shown. By default Logo Size for AMP Version is set for Fixed width 190×36. If you want to add Custom Logo Size, you can Turn ON this option and modify the Width & Height of Custom Logo, also you can set it as the Flexible width.
1.1.2 AMP Support options.
- AMP on Post: If you want to convert the post into AMP then enable this option.
- AMP on Pages: If you want to convert the pages into AMP then enable this option.
- HomePage Support: By default, this option is enabled to show the AMP homepage. This option will be shown all your Post loop in homepages . If you want to Disable AMP on your homepage, you can Turn it OFF.
- Custom Front Page: If you want to Display a Static Front Page on your AMP Website, you can enable Front Page option.
- Select Page as FrontPage: When you enable Custom AMP front page, make sure you Select a Page from the drop-down menu to use it as Static Front Page.
- Title on Static Front Page: If you want to Display the title of Static Front Page you can enable this option.
- Archive page Support: If you want to enable AMP on your Archive pages, such as Categories and Tags, then you can enable this option, else you can disable.
- Custom Post Types: If you have using Custom post type on your Non-amp version, then to display it on AMP you can set it by here.
- Convert AMP to WP theme: It makes your AMP & Non-AMP Same! AMP will output AMP Compatible code, while WordPress will have the WP code but with the same design. Once you enable this option Frontend and backend source code are different.
- AMP Takeover: It converts both AMP and Non-AMP to look the same. After that click on the save change button. Once you enable this option Frontend and backend source code are the same.
Note: When you Turn On AMP on Pages, make sure you Re-save your permalinks.
1.2 Page Builder :
Enable Page Builder for AMP: With the help of this option, you can easily build landing pages for AMP.
1.3 Advertisement :
In the Advertisement section, we provide users to place Ad in 6 possible places.
- Below the Header: Advertisement is shown below the header(sitewide).
- Below the Footer: Advertisement is shown below the Footer(sitewide).
- Above the Post Content: Advertisement is shown above the Post Content.
- Below the Post Content: Advertisement is shown below the Post Content (single post).
- Below the Title (Single Post): Advertisement is shown below the title Content (single post).
- Above the Related Post (Single Post): Advertisement is shown above the Related Post Content (single post).
In order to place Ad in those sections, simply Turn ON them.
When you Turn on Ad #1, it will ask you to provide the AD Size, Data AD Client, Data AD Slot.
- AD Type: In this option select Ad type as per your requirement
- AD Size: It can be anything depending on your choice.
- Data AD Client: It is nothing but your Adsense Publisher ID
- Data AD Slot: It is a unique Advertisement which can be found in the Adsense Ad Code.
- Responsive Ad Unite: Once you enable this option Ad will be shown into responsive.
- Optimize For Viewability: This option will increase the loading speed of the Ads.
- Sponsorship Label: In the Advertisement label we be shown.
1.4 SEO :
In this option, you will see three portions called General, SEO Plugin Integration and Advanced Indexing option.
- Meta Description: To add the meta tag that will be displayed in the head, you can enable.
- OpenGraph Meta Tags: Once enable this option it will allow you to control what content shows up when a page is shared on Facebook.
- Additional tags for Head section AMP page: In this field, you can enter additional meta tags in the head section on AMP. You can paste your HTML code contains Meta tags.
1.4.2 SEO Plugin Integration
Select SEO Plugin: In this option, User can select SEO Plugin
Currently, we compatibility with Three SEO Plugin Yoast SEO/ All In One Seo/ Rank Math SEO on your website, then these SEO options are especially for you.
1. Yoast SEO :
- Meta Tags from Yoast: To add social and open graph meta tags from Yoast, you can Turn it ON.
- Yoast Description In ld+json: To add Yoast custom description on Ld+json for AMP, you can Turn it ON.
- Canonical from Yoast: Once you enable Canonical from Yoast option in Yoast canonical will be shown in AMP.
2. All In One SEO :Once you select this option one option will be shown Canonical from All In One SEO.
3. Rank Math SEO: It is also compatible with Rank Math SEO. Once you select this option one option will be shown Meta Tags from Rank Math, Rank Math ld+json data and Canonical from Rank Math.
1.4.3 Advanced Indexing Options
You can even use advanced index/no-index options of Archive subpages, Author Archives and Date Archives in AMP. The below picture shows the switches which allow you to select index/no-index in AMP.
URL Inspection tool compatibility option has always enabled this index in enabling in the google search engine.
If you disable this particular options then Google will not index that particular at archives pages
URL Inspection Tool Compatibility: You can read about it here
1.5 Performance :
- Minify: This Minify option will help you to Improve the Page Speed and Loading time with Minification option. Code minify performance is improved.
- Leverage Browser Caching: Improve the Page Speed and Loading time with Leverage Browser Caching option
- Optimize CSS (beta): Once you enable this option it will remove unused CSS and reduces the size of the CSS.
1.6 Analytics :
In Analytics Type Option you can use Google Analytics or any other Analytics of your choice.
1.6.1 Primary Analytic Providers
- Google Analytics: When you enable Google Analytics, you must enter your Google Tracking ID. Pasting Scripts are not allowed. Even if you use other Analytics, make sure you Enter tracking ID but not the Script. If you paste any script in analytics, it will lead you to errors. Once disable Advanced Google Analytics and you save Tracking id option output will be checked into source code it will be shown below the footer area.
- AMP Linker: Once you enable this option then the linker will be added to all your AMP pages and you can also check it in the source code.
- Advanced Google Analytics: If you enable this option you can Enter your Advanced Analytics code here inside this code you have to write account number for ex :(“account”: “UA-xxxxxxx-x”).
- Google Tag Manager: When you enable to use Google Tag Manager, then you have to enter the Tag Manager ID, Analytics Type & Analytics ID. These three fields are mandatory.
- General Analytics Providers: The below-shown details are about some of the General Analytics Providers.
Facebook Pixel, Segment Analytics, Matomo (Piwik) Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, Histats Analytics, Yandex Metrika, Chartbeat Analytics, Alexa Metrics, AFS Analytics, Adobe Analytics.
1.7 Structure Data :
Schema & Structured Data: You can select the structure data type for posts and pages by using this option.
- Default Structure Data Logo: It is recommended to Add Default Structured Data logo to your website. However, we can’t see this logo anywhere on our website, and this is specially made for Google. In case if you don’t upload a Structured Data logo, it may lead to Structured Data Errors in Search Console.
- Custom Logo Size: If you want to add Custom Logo Size, you can enable this option and can give Custom Logo Width & Height.
- Default Post Image: It is recommended to add the Default Post image, which will be shown as featured image when you don’t add any featured images to post. If you don’t upload the Post image, it may lead to Structure Data Error in Search Console.
- Default Post Image width & height: You can also provide Height and Width for Default Post Image, 700×550 is the default value. You can have any values higher than the default value.
- Default Thumbnail for VideoObject: You can upload the Thumbnail you want to show as Video Thumbnail.
1.8 Notice Bar & GDPR :
- Notice Bar (Cookie Consent): You can use the Notice bar option to Show notifications on all of your AMP pages for cookie purposes.
- GDPR (General Data Protection Regulation): Currently the GDRP Compliancy is available to only EU countries.
1.9 Push Notification :
- OneSignal : To Show the notification on all AMP pages for cookie purpose, you can enable this option and enter APP Id.
- Positioning: You can set the positioning of the subscribe button to Below the Content and Above the Content.
- Translation: With the help of this option you can translate the button on your native language.
1.10 Contact Form :
- When you’re using the “Contact Form 7 “, “AMP Gravity Form” or “Ninja Forms for “ in Non-AMP pages. If you want to use this form in AMP Page you need to bye extension, enable these options so that you can show the Forms in AMP.
1.11 Comments :
- Display on Pages: If you enable this option where you want to display the comment in the all your AMP Pages.
- Display on Posts: If you enable this option where you want to display the comment in the all your AMP Post.
WordPress Comments :
- No. of Comments: You can add the number of comments to show in AMP, And this refers to the normal comments.
- Disqus Comment Support: If you’re using the Disqus comments on the non-amp version(Desktop version) site, you can enable this option to show in AMP.
- FaceBook comments: enable this option.
- Vuukle Comments: If you’re using the Vuukle comments on the non-amp version site, then you can enable this option to show in AMP.
- Spot.IM Conversation: If you’re using the Spot IM Conversation comments on the non-amp version site, then you can enable this option to show in AMP.
1.12 FaceBook Instant Articles :
- FaceBook Instant Articles Support: By enabling this option, you can show the FaceBook Instant Articles. When you enable this option please re-save the permalinks.
- Number of Posts: Enter the number of posts to generate for Instant Articles.
- Author Meta: Enable/Disable Author Meta
- Author Bio: By enabling this option you can display the author bio in instant articles.
- Related Articles: Display the related articles.
- Advertisement: For advertising on Instant Article pages, You can enable this option.
- Enter the Audience Network Placement ID, To get the Placement ID, you can find out more about this here.
- Analytics: If you want to enable analytics on Instant Article pages, use this option.
- You can add Analytics script code here, Do not enter iframe tag. To get the Analytics script code Find out more about support here.
- Crawler Ingestion: Facebook can automatically ingest an Instant Article by fetching a self-hosted, public document containing the Instant Articles markup or the rules to transform the HTML content.
- Custom HTML in Head Tag: Add custom HTML in Head Tag in Instant Articles Markup.
- Custom HTML in Body Tag: Add custom HTML in Body Tag in Instant Articles Markup.
- Custom HTML in Footer Tag: Add custom HTML in Footer Tag in Instant Articles Markup.
1.13 Hide AMP Bulk Tools :
- Individual AMP on Pages(Bulk Edit): If you want to Hide the AMP on all pages, you can select ‘Hide By Default’ from the drop-down menu. So, that it can be changed individually later by using the AMP Meta Box in the post editor.
- Select Category to hide AMP: If you want to hide some Categories in AMP. By using this option you can select the category which you want to hide in AMP.
- Select Tags to Hide AMP: If you want to hide some Tag in AMP. By using this option you can select the Tag which you want to hide in AMP.
1.14 Advanced settings :
- Mobile Redirection: By enabling this option, you can redirect your mobile users to AMP version i.e whole website will redirect to AMP. And you can give your visitors a Faster mobile User Experience.
- Change End Point to ?amp: Making endpoints to ?amp will help you get the amp in tricky setups with taxonomies & post type. The question mark in the URL will not make any difference in the SEO.
- Enter HTML in Header & Footer: If you want to add HTML markup in Header, Add here. Please add the markup that is AMP validated. You can check whether your code is AMP compatible or not from here > http://validator.ampproject.org
- Enter HTML in Body (beginning of body tag): If you want to add HTML markup in the body tag, Add here. Please add the markup that is AMP validated. You can check whether your code is AMP compatible or not from here > http://validator.ampproject.org
- Enter HTML in Footer: If you want to add HTML markup in the footer tag, Add here. Please add the markup that is AMP validated. You can check whether your code is AMP compatible or not from here > http://validator.ampproject.org
- Auto Add AMP in Menu URL: by enabling this option, It will add /amp at the end of the menu URL. Users will redirect to the AMP pages/posts.
- Category base removes in AMP: This helps to display the category base post.
- Tag base removes in AMP: This helps to display the tag base post.
- Featured Image from Custom Fields: It Automatically set and display the default image that is available in your Page/ post/ tag/ etc..
- Featured Image from The Content: It allows you to display the featured image within the content.
- Duplicate Featured Image: Helps to remove the duplicate featured images.
- Retina Images: Enable if your current images looking blurred on Apple Devices.
- Show Metabox in Post Editor to: Helps to display the meta box either to All users or only to Admin.
- Dev Mode in AMP: This will enable the Development mode in AMP.
- Plugin Update Notification Bar: Auto update notification of AMP.
- Disable Wptexturize: wptexturize will transform the quotes to smart quotes, apostrophes, dashes, ellipses, the trademark symbol, and the multiplication symbol and the code within certain HTML blocks is skipped.
- Legacy Page Builder (widgets): Especially for Newspaper theme that helps to set the homepage.
- Delete Data on Uninstall?: By enabling this you can completely remove all of AMPforWP data when uninstalling via Plugins > Delete.
1.15 E-commerce :
- WooCommerce Support: Just by one click download you can get Woocommerce in the amp.
- Easy Digital Downloads Support: With this download, you can make your products via purchase.
1.16 Translation Panel :
If your website is in the Default language, if you want to translate your website to your Default language, then you can use this Section. From this section, you can translate your website to any of your desired languages.
- Use the POT file method of Translation: If you want Multilingual Translation, you can enable this option else you can use the normal translation method which you will find below this option.
2.1 Themes :
Themes Selector: In this option, we have four themes and swift is the default theme. Here you can select the Themes which you want to show in AMP.
AMP LAYOUTS: If you want extra theme design then have to bye this AMP layouts extension.
2.2 Global :
- Global Color Scheme: If you change the color of the scheme, globally color will change in AMP version.
- Hover Color Scheme: If you select elements when you mouse over them the color of the scheme, globally change in AMP Version.
- Button Hover Color: Choose the color when hover for Button.
- Google Fonts: Once you enable this option Google Font API key option will be display.
- Google Font API key: If you want fon then enter Google Font API key it will be shown a list of the font With the help of this option you can change the Font style in AMP, however, this option only works in the swift theme.
- Sidebar: This option helps you to enable the sidebar feature on the homepage and Single Sidebar also you can change the background color, Heading color and text color in the sidebar.
- Infinite Scroll (Experimental): First you enable this option infinite scroll will be displayed on your AMP pages.
- Font Icon Library: As per your requirement you can select Swift Icons or Font Awesome Icons.
- Custom CSS: If you want to add some Custom CSS to change the Styling in AMP, you can add here. No need to add Script tag.
2.3 Header :
- Header Type: In the swift theme you will get the Three header type designs which help you to display in the AMP.
For display Menu in the AMP version first, you need to enable AMP menu option from Appearance -> Menus check AMP menus option.
Navigation Menu Design
- Navigation Menu Design: In this Navigation Menu Design, you can select menu Type, Menu Search, Menu copyright all setting it will display on the header bar.
- Alternative Menu: If you want to show or hide the Menu in AMP, you can enable this option.
- Alt Menu Padding: It helps you to adjust the padding of your header.
- Alt Menu Background: If you change the menu background color, in the header section your background color will change.
- Alt Menu Text: If you change the menu element color, all your post and pages header element color will change.
- Dropdown Support: This option allows the user to choose one value from a menu list. When a drop–down list is inactive, it displays a single value.
- Call Now Button: By enabling this option, you will get the field to enter the phone number. It will display on the header bar.
- Non-AMP link in Header: If you want users to go to Non-AMP version of your website, you can enable link on the Header. This link will take users to a Non-AMP version of your site.
- Search: For Search Functionality on the header bar, you can enable this option.
- Sticky Header: Keep your header sticky by enabling this option.
- Menu Search: By enabling this option you can display the search feature in the navigation menu.
- Menu Copyright: All Rights Reserved
Advanced Header Options:
- Header Width: Adjust the width of Header by giving the value.
- Header Height: Adjust the height of Header by giving the value.
- Margin / Padding: Adjust the margin and padding by enabling this option.
- Border and Box-shadow: This option helps you to set the border, border color and shadow in the header.
- Header Background: If you change the header background color, in the header section your background color will change.
- Menu Background: If you change the navigation menu background color, in the header section your background color will change.
- Header Elements: If you change the header element color, all your post and pages header element color will change.
- Menu Color: If you change the navigation menu color, in the header section your menu element color will change.
- Menu Border Color: If you change the menu border color, in the header section your menu border color will change.
- Menu Overlay Position: You can set the navigation menu position to the left to right or right to let.
- Menu Overlay Width: Set the width of an overlay navigation menu.
- Excerpt: By enabling this option you can display the content of your article with a link to the whole entry.
- Excerpt Length: Use this excerpt length field to change excerpt length to 20 words or more than 20 words.
- Read More Link: If you enable this option in read more link will be available.
- Change image Size: By using this option you can change image size.
- Date in Loop: Enabel this option to show data below each post of Home page loop.
Loop Display Controls:
- Post Type in Loop: In the homepage, all loop post will be displayed.
- Exclude Categories: If you don’t want post loop in homepage by using this option we can exclude these categories.
- Read More Link: If you enable this option in read more link will be available.
2.5 Single :
2.5.1 Single Elements :
- Featured Image: If you enable this option featured image will be shown in single pages in AMP.
- Published Date :
- Lightbox for Images: If you enable this option displays images by filling the screen.
- Dropcap: If you enable this option a drop cap is a large capital letter at the beginning of a text block that has the depth of two or more lines of regular text.
- Breadcrumbs: If you enable this option breadcrumb navigation will be shown on single pages.
- Tags: If you enable this option Tags will be shown in AMP pages.
- Sticky Social Icons: Sticky Social Icons are social icons which stay sticked to the Single posts / Pages. If you don’t want them to be sticky on single pages you can turn off them.
- Excerpt in Single: If you added the excerpt in posts and you want to show the excerpt in AMP posts, you can enable this option.
- Next-Previous Links: Next and Previous Links are present at the bottom of the page, it lets users navigate from Present Post to Next Post or Previous Post.
- Author Name: If you enable this option Author name will be shown on Single pages.
- Author Bio in Single: If you want to show or hide Author Information on AMP posts, by using this option you can do. It will show at the end of the post’s contents.
- Pagination in Single: It will enable the pagination in posts if it has the pagination.
2.5.2 Related Post Settings:
- Related Post: Related post on post pages can be controlled from Single Section. Here you can choose a specific category from which you want to show related posts.
- Related Post By: By using this option we have two list categories and Tags once we select this option that post type will be displayed on a single page.
- Link to Non-AMP: If you enable this option this link will be redirected to Non-AMP single pages.
- Number of Related Post: You can also control Number of related posts to show on Single Posts. By default, it is 3.
- By Last X Days: If you enable this option you can get X days categories and tags in a single page.
- In-Content Related Post: Once you enable this option content will be shown on the signal page.
- Link to Author Pages: If you enable this option link redirects to Author Single page.
- Recent Posts: If you enable this option Recent posts will be shown on a single page.
- Advanced Single Options: Enable this option two option will be shown Breadcrumbs Border and Underline on Links.
- Heading Font Sizes: If you enable heading option H1 to H6 Heading font size will be shown on signal pages.
2.5.4 WordPress Content Gallery :
- Select Gallery Designs: In this option, we have three types of Gallery designs.
- Lightbox for Gallery: If you enable this option in Gallery lightbox will be shown.
2.5.5 Content Sneak Peek:
- Content Sneak Peek: Once you enable this option button will be shown on a single page we can set the Content Height, Button Text, Text Color, Button Color.
2.6 Footer :
2.6.1 Footer Design :
- Footer Type: In this option, we have one type of footer.
2.6.2 General :
- Menu: This option helps you to display or hide the menu from the footer.
- Link to Non-AMP page in Footer: It will display at the end of the footer, If the users want to view the page in non-amp version, it will redirect to the non-amp page.
- Back to Top link: This option takes back to the top link of the AMP page.
- Make “View Non-AMP” link nofollow: With the help of this option, you can view the Non-AMP version.
2.6.2 Advanced Footer Options:
- Advanced Footer Design: By enabling this option you can customize the footer background color, width, height, padding, margin etc etc..
2.7 Page :
- Featured Image: Enable or disable the featured images on pages.
- Breadcrumbs: Enable Breadcrumbs on Pages.
- Meta Information: It will show or hide the meta for pages. Meta can be displayed below the Page’s Tile.
- Subpages/ChildPages: This option helps you to shows a List of Subpages on amp version.
- Social Icons: Enable or disable the social icons on the pages.
- Sticky Social Icons: Enable or disable the sticky social icons on the pages.
2.8 Social :
2.8.1 Social Sharing :
- Position: This option helps you to display the social icon on the sidebar, above content or below content.
- Social: In Social Share section, you will have complete control Social Share Icons. You can customize them according to your needs. You can Show / Hide any Social Network with a Single Tap.
2.8.2 Social Media Profile Links:
- Social Media Profiles (Design #3): If you select the Design3 from the Themes tab, you can get this option. You can show / Hide your Social Media Profiles and it will display in the Footer and below the Menu items.
- Menu Social Profile: By enabling this option you can display the social profile icons in the navigation menu.
- Facebook: If you enable this option Facebook icon will be shown. in this option, you need to enter the Facebook URL.
- Twitter: If you enable this option Twitter icon will be shown. in this option, you need to enter the Twitter URL
- Google: If you enable this option Google icon will be shown. in this option, you need to enter the Google URL
- Linkedin: If you enable this option Linkedin icon will be shown. in this option, you need to enter the Linkedin URL
- Pinterest: If you enable this option Pinterest icon will be shown. in this option, you need to enter the Pinterest URL
- Youtube: If you enable this option Youtube icon will be shown. in this option, you need to enter the Youtube URL
- Instagram: If you enable this option Instagram icon will be shown. in this option, you need to enter the Instagram URL
- VKontakte: If you enable this option VKontakte icon will be shown. in this option, you need to enter the VKontakte URL
- Reddit: If you enable this option Reddit icon will be shown. in this option, you need to enter the Reddit URL
- Tumblr: If you enable this option Tumblr icon will be shown. in this option, you need to enter the Tumblr URL
2.9 Date :
- Show Date As: With the help of this option you can display the published date or modified date on AMP version.
- Date Format: This option helps you to select the Date Format of Posts Ago or Traditional View.
- Text for the Date Format: Example: English – % days ago, Spain – ago % days.
- Modified Date Notice: By enabling this option you can show the Modified date of an article at the end of the post.
2.10 Misc :
- RTL Support: If your website has a Native Language which starts from the Right, i.e. Right To Left, then you can Turn ON this option.
- Display sub-categories on category pages: With the help of this option you can Display the sub-categories on category pages.
That’s it for this tutorial!
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.