(How to use Google Amp in WordPress 2018) (Long guide.)

Questions(How to use Google Amp in WordPress 2018) (Long guide.)
skylar woods asked 1 year ago

For starters why would you use Google AMP?

1 Better SEO (AMP is Made By Google)

2 Faster Load times.

Cons Of AMP

1 Website is stripped to Bare bones! (Personaly I Like this)

2 NO JAVASCRIPT!!! (Iframes work)

Ok lets get to the basics.

AMP HTML

src”mydomain.com/png

That is an image tag

Video Programming example.
<

This browser does not support the video element.

This is to Complex for me!!!! Well Lets make it simple

AMP For WP Plugin By Ahmed Kaludi

https://wordpress.org/plugins/accelerated-mobile-pages/

The Features.

1 auto convert HTML To AMP HTML

2 All Pages are Valid.

3 OWN AMP Theme frameworks!

Also a Visual Builder.

NOTE (HIGHLY Recommend Designing Content in word AND NOT A PAGE BUILDER FOR AMP) Not all of page builders are HTML. Shouldn't be a problem with elementor.

All you have to do is Install AMP For WP and wait a few days google should see your site now uses AMP!

AMP HTML

Image Blah blah you know what to do Regular HTML

Video src”xx.com” vs

Images

You get the idea just add amp- to everything and you pretty much got it. Note AMP FOR WP Auto converts.

(Developers) LIST OF ALL AMP HTML TAGS Refer to AMP Documentation for More Information
Ads and analytics
COMPONENT DESCRIPTION
amp-ad A container to display an ad.
amp-ad-exit Provides configurable behavior for ad exits for A4A (AMP for Ads).
amp-analytics Captures analytics data from an AMP document.
amp-auto-ads Dynamically injects ads into an AMP page by using a remotely-served configuration file.
amp-call-tracking Dynamically replaces a phone number in a hyperlink to enable call tracking.
amp-experiment Can be used to conduct user experience experiments on an AMP document.
amp-pixel A tracking pixel to count page views.
amp-sticky-ad Provides a way to display and stick ad content at the bottom of the page.
Dynamic content
COMPONENT DESCRIPTION
amp-access-laterpay Allows publishers to easily integrate with the LaterPay micropayments platform.
amp-access Provides an AMP paywall and subscription support.
amp-bind Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.
amp-byside-content Displays dynamic content from the BySide service.
amp-form Provides form support.
amp-gist Displays a GitHub Gist.
amp-install-serviceworker Installs a ServiceWorker.
amp-list Dynamically downloads data and creates list items using a template.
amp-live-list Provides a way to display and update content live.
amp-mustache Allows rendering of Mustache.js templates.
amp-selector Represents a control that presents a menu of options and lets the user choose from it.
amp-user-notification Displays a dismissable notification to the user.
amp-web-push Allows users to subscribe to web push notifications.
Layout
COMPONENT DESCRIPTION
amp-accordion Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will.
amp-app-banner A wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app.
amp-carousel Displays multiple similar pieces of content along a horizontal axis.
amp-fx-flying-carpet Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport.
amp-fx-collection Provides a collection of preset visual effects, such as parallax.
amp-iframe Displays an iframe.
amp-image-lightbox Provides a lightbox effect for a specified image.
amp-layout Provides a generic, multi-purpose container element that brings AMP's powerful layouts to any element.
amp-lightbox Displays elements in a full-viewport “lightbox” modal.
amp-position-observer Monitors position of an element within the viewport as a user scrolls and dispatches events that can be used with other components.
amp-sidebar Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus.
Media
COMPONENT DESCRIPTION
amp-3q-player Embeds videos from 3Q SDN.
amp-anim Manages an animated image, typically a GIF.
amp-apester-media Displays an Apester smart unit.
amp-audio Replaces the HTML5 audio tag.
amp-brid-player Displays a Brid.tv player.
amp-brightcove Displays a Brightcove Video Cloud or Perform player.
amp-dailymotion Displays a Dailymotion video.
amp-google-vrview-image Displays a VR image.
amp-hulu Displays a simple embedded Hulu video.
amp-ima-video Embeds a video player for instream video ads that are integrated with the IMA SDK.
amp-img Replaces the HTML5 img tag.
amp-imgur Displays an Imgur post.
amp-izlesene Displays an Izlesene video.
amp-jwplayer Displays a cloud-hosted JW Player.
amp-kaltura-player Displays the Kaltura Player as used in Kaltura's Video Platform.
amp-nexxtv-player Displays a media stream from the nexxOMNIA platform.
amp-o2-player Displays an AOL O2Player.
amp-ooyala-player Displays an Ooyala video.
amp-playbuzz Displays any Playbuzz content (e.g., list, poll, etc.).
amp-reach-player Displays a Beachfront Reach video player.
amp-soundcloud Displays a Soundcloud clip.
amp-springboard-player Displays a Springboard Platform video player.
amp-video Replaces the HTML5 video tag.
amp-vimeo Displays a Vimeo video.
amp-wistia-player Displays a Wistia video.
amp-youtube Displays a YouTube video.
Presentation
COMPONENT DESCRIPTION
amp-animation Defines and displays an animation.
amp-dynamic-css-classes Adds several dynamic CSS class names onto the HTML element.
amp-fit-text Expands or shrinks font size to fit the content within the space given.
amp-font Triggers and monitors the loading of custom fonts.
amp-mathml Displays a MathML formula.
amp-story A rich, visual storytelling format.
amp-timeago Provides fuzzy timestamps by formatting dates as “time ago” (for example, 3 hours ago).
amp-viz-vega Displays visualizations created by using Vega visualization grammar.
Social
COMPONENT DESCRIPTION
amp-facebook-comments Embeds the Facebook comments plugin.
amp-facebook-like Embeds the Facebook like button plugin.
amp-facebook-page Embeds the Facebook page plugin.
amp-facebook Displays a Facebook post or video.
amp-gfycat Displays a Gfycat video GIF.
amp-instagram Displays an Instagram embed.
amp-pinterest Displays a Pinterest widget or Pin It button.
amp-reddit Displays a Reddit comment or post embed.
amp-riddle-quiz Displays Riddle content (e.g., quiz, list, poll, etc.).
amp-social-share Displays a social share button.
amp-twitter Displays a Twitter tweet.
amp-vine Displays a Vine simple embed.
amp-vk Embeds a VK post or poll widget.

Happy Amplifying

PS Adam PLEASE REDO the AMP VIDEO There have been SO MANY UPDATES!!

-KHIIBOTS.

Site using amp

pay-to-win.com/amp/

2 Answers
Adam @ WPCrafter Staff answered 1 year ago

Wow, that's quite a list.

Yes I do know that Google is working with WordPress to improve AMP.

The initial version of AMP was not that great.

Ravinder Bhutani answered 3 weeks ago

Can AMP display quarry form in modal?

Your Answer
12 + 17 =

Accepted file types: png, jpg, pdf

Add another file