![]() The template isnt topic-limited, so make use of it in any type of web page projects you want. That template is definitely a great move towards lightweight design creation because of its mobile-friendliness and great website load speed. To cover these cases, the plugin will attempt to convert certain tags to their AMP equivalent. New Google AMP layout is an effective, versatile and modern AMP-compatible design. While it is preferable to create AMP-specific templates, there may be situations where an image, iframe or some other element can't be modified. cache/default-html.js src/html.jsĭon't forget to update the meta viewport tag value from its initial to the required AMP value. Read more here on customizing your html.js. ![]() Alternatively, you can simply clone it by runnig the shell command below at the root of your project. You can create a html.js template file under your src/ directory in order to override the default Gatsby one available here. ![]() This is because it is missing minimum-scale=1 in the meta viewport tag. The standard HTML template that Gatsby uses will cause a validation error. You can read more about this concept here Caveats Set this to true if you would like to include the necessary meta tag in your AMP pages. If you are using a Client ID for Google Analytics, you can use the Google AMP Client ID to determine if events belong to the same user when they visit your site on AMP and non-AMP pages. While creating posts in your gatsby-node.js file, create an additional page in the /amp/ directory using the AMP template you just made _.each(posts, (post, index) =>. To assist with situations like images in markdown or other externally created HTML, the plugin will attempt to turn img tags to amp-img or amp-anim. can support webp //fallback to jpg if webp not supported AMP PAGE amp page content While there is a fix to show the actual site on top of the AMP page, it takes up precious space above the fold. Import Layout from "././components/layout" Ĭreate an AMP template import React from "react" In a similar vein, Google’s AMP viewer tends to dilute brand identity as a Google domain is shown in the address bar. ![]() Assume you have the following blog post template in post.js import React from "react" Npm install -save gatsby-plugin-google-amp How to useĬreate AMP-specific templates for blog posts. Update: I am no longer actively maintaining this plugin, however will still review PRs submitted. Please feel free to contribute to the plugin if you notice any missing features/bugs when using it in your sites! gatsby-plugin-google-amp can be used as a direct substitute to gatsby-plugin-amp NB: This plugin was forked from gatsby-plugin-amp since gatsby-plugin-amp has not been maintained and there were issues with gatsby-remark-images AMP support. Read more about AMP (Accelerated Mobile Pages) here. Formats AMP-specific pages by removing javascript, combining styles and adding boilerplate. ![]()
0 Comments
Leave a Reply. |