top of page

The Complete Guide To Creating Mobile Websites And Using AMP/PWA’s

Mobile Optimization

Nowadays, it’s more common for users to access websites via their cell phones rather than their desktop computers, which is why Google’s parameterization has changed and prioritized sites that have good mobile navigation. However, websites are still developed first for the desktop and only then for mobile. One way to speed up the work of creating mobile navigation and help Google’s algorithm automatically recognize responsive pages is to place the “viewport” tag in the header of their HTML code (as shown in the following image). This tag tells the browser how to adjust the dimensions and scale of the page according to the width of the device.



If you’re looking at a WordPress or Wix site, these are already automatically prepared to deliver pages with mobile responsiveness. Elementor” (a type of page creation framework) is the best way to create user-friendly pages in WordPress. The job of a technical SEO should be to adjust the HTML, CSS and JavaScript codes of your pages so that the mobile parameters are the right size and noticeable.






To find out if your site is automated for mobile, Google offers a free mobile compatibility test. Or you can go to the Google Search Console report “Usability on mobile devices” and see if your pages have any problems. If there are problems, Google Search Console will report on how to resolve them.




AMP

AMP stands for “Accelerated Mobile Pages” and is an open-source HTML5 framework where you can easily create websites, emails, web articles and advertisements that prioritize the user. Pages coded by AMP appear in search engine queries as a “carousel” of results for mobile devices and display a lightning bolt icon and the acronym “AMP”. AMP is powered by JavaScript, the style can be customized via CSS3 and the pages are cached. AMPs are completely separate from a typical mobile site. The advantages of using an AMP are:

  • AMP pages can be loaded almost instantly, for the speed of a site this is a must;

  • Several platforms support AMP, including Google, Bing and Twitter;

  • AMP still allows you to use custom CSS, but reduces the complexity of your code somewhat;

  • AMP components are already built and easy to use;

  • AMP is an open source initiative, so it offers a more user-friendly web experience;

  • In search engine queries, the AMP site appears in a carousel, giving prominence to those who use this type of structure.


In wix there is a way of setting posts to AMP, by following these steps: inside the platform, in the left-hand panel, find “Marketing and SEO”, search for “SEO Settings” and click on “Blog Posts”, the following image will appear, where you can activate AMP for all your articles implemented in wix.





For those who work with wordpress, there is an AMP plugin that can help you place your pages in this structure, you just have to configure all the settings. To test your AMP you can access these 2 tools: https://search.google.com/test/amp | https://search.google.com/test/rich-results or you can go to Google Search Console and see the reports on your AMP.




PWA's (Progressive APPs)

According to Google, progressive apps are progressive web applications that use modern web resources to offer an app-like user experience. As it doesn’t require the installation of an app, it can be accessed via a URL, which will save resources and memory on the device. Changes and updates to a PWA are also easily applied and approved for implementation on the user side. PWA’s are designed to be capable, reliable and installable, have the ability to intercept and handle network requests, cache or retrieve resources from the cache and deliver push messages as required. PWA’s load quickly, use as little data as possible and content is separated from navigation. PWA’s use 4 technologies:

  • Home screen access: direct installation on a site that has already been visited, without the need for an app store;

  • Offline support: This is a JavaScript file that runs in the background, independently of the browser, and separate from a web page;

  • Uses TLS (Transport Layer Security): HTTPS security in its settings;

  • Application shell architecture: PWA loads reliably and instantly on the user’s screen because the application shell uses very little HTML, CSS and Javascript.


A PWA can in fact significantly improve your organic search profile, making the user experience better than that of your competitors. The biggest advantage of PWA’s is the greater speed compared to other mobile platforms and native applications. Google crawls PWA sites in the same way that it crawls an AJAX or JavaScript site, so technical SEO must exist in these applications to ensure that the pages are indexed correctly, the only difference being that Googlebot will not index URL’s with # in them. Many PWAs use the hashtag symbol in their URL structure. The only way around this is to implement a URL structure using traditional SEO rules.


But how to create a PWA? To turn a simple page (HTML, CSS and JS) into a PWA, you need to add a link to a manifest.json file to its index.html file (you need to keep the file defaults at the root of the system) and instantiate a service worker. The Service Worker defines which of the application’s files should be available offline. The manifest file defines the name and appearance of the page as an installable application. You can also change the names, description, URLs and the link to the application icon to your liking. You’ll also need to have an HTTPS connection and an SSL certificate.


Finally, you can inspect your PWA with “Lighthouse” (by running the command line in Chrome DevTools). In wordpress you can add a plugin to turn your site into a PWA:  https://wordpress.org/plugins/super-progressive-web-apps/


 

Conclusion

Offer a better user experience by applying SEO in the process of optimizing your sites so that they rank higher in search results on mobile devices and use AMP/PWA’s to overcome speed problems on their pages.


Today, many companies need immediate results, but the truth is that they cannot afford to implement SEO internally while leveraging with the priority of their business focus. If you still can’t handle these steps or don’t have the time to put them in place, Bringlink SEO ensures you get the brand visibility and growth you deserve.

Talk to us, send email to bringlinkseo@gmail.com.


 

References





bottom of page