How to Convert HTML To AMP

When you’re using AMP, you’re going to be using HTML standard, but you need a particular version of the service to really be successful. That means you’re technically converting your HTML into something different; a customized version that’s going to be better for your website and better for the mobile version of it specifically.

This means making sure that you understand the differences and the coding that is going to take place when you put everything together. The central aspect of converting can be as simple as downloading some programs, or it can be as advanced as going through each of the pieces of content yourself and changing them.

Why Do You Want AMP?

If you’re not sure about starting an AMP project with AMP plugins, you may be wondering more about what it does and why you should even consider it. Well, the best reason that you should think it is that it’s designed to make the mobile version of your website a whole lot easier and more comfortable for each of your users or readers.

They’re going to get higher quality because you’re going to have a website that is designed to load faster and more efficiently on their mobile devices including smartphones and tablets. In the end, this keeps them on your website longer and makes sure they get the information they’re looking for.

When you optimize for mobile viewers, you’re making sure that their device can handle whatever is on the website you’ve created, which isn’t the case when they’re trying to use a full version of the website or even the automatic version that is designed for them when they access from a mobile device.

With AMP plugins, you’re going to get a good quality version and it’s not as complicated as some other methods of creating a mobile-friendly version of your page. It is going to require you to put in a little extra effort, however. Still, when you think about the reduction in bounce rate, it just might make up for itself a lot more than you thought.

Use The Software

As well as installing a third-party JavaScript, you need to install Apache w/PHP. Then you’re going to get a web server that has the PHP plugin ready for you. XAMPP works with Apache, MariaDB, PHP, and Perl and can be downloaded right from apachefriends.org/index.html.

When you download it, you’ll get a default installation path of xampp on your C drive. This can then be opened, and the Apache server started without opening or starting up any of the additional servers in the program that aren’t critical to this process. Once you’ve done this, you can open up a browser window and go to http://localhost/dashboard/, and you’ll be able to see a default XAMPP page.

 You can then download the composer tool through getcomposer.org to make sure that you have the right dependency management software and systems for your PHP program. It takes care of all of the libraries that your program is going to require including installing them and updating them.

You won’t have to worry about these specific tasks, and you can get the installation carried out quickly. Then you want to check windows for cmd (your command prompt) and run as administrator to double check that Composer is there and working properly. All you have to do is type in composer-V, and you’ll get the version of Composer on your computer.

Next, download what’s called the amp-library. Direct from Lullabot; the amp-library can be downloaded or cloned and then zipped into a folder to make sure that you have the space you need to get it and to run it efficiently. Once it’s downloaded, you can extract it to the C drive, XAMPP\htdocs\amp-library-master.

Now go to the command prompt window you’ve already opened and make sure that it’s there by typing this same set of directions with the C drive (c:\) before it. You can install dependencies for your project from this stage by typing ‘composer install’ into the command prompt window.

Now you’re actually ready to start the transfer process. You’re going to have everything configured and all you need to do is convert one page of HTML to start. Use the command php amp-console amp: convert (file name) – full document-. Make sure the file that you’re converting is saved as an HTML document in order to fully access it in this way and start the transfer process.

You’ll get a readout of all of the content in AMP format, which you can then copy and put into a new file, also saved as an HTML file. Once you’ve saved the new version of all of your content, you’ll be able to validate and verify the code itself to make sure that it fits the AMP qualifications.

Any validator you want to use is going to work well for this and will help you confirm that the transfer was successful and everything is ready for the next step. You can repeat this process with any and all other HTML files that you may have an want to transfer to HTML

AMP without getting rid of the old version of the file or in any way altering it. Keep in mind that nothing is perfect and that means you definitely want to run through a validator so you know what should be changed, improved, edited or anything else. You could otherwise end up with some code that doesn’t transition properly and may cause your site to not be approved as an AMP site, slowing down your results.

Transferring Manually

Okay,  so maybe you’re not so sure about using that translator to get your HTML from regular to AMP. You also have the option to go through and do all of the changes yourself. This is going to take a whole lot more time and more work, but it’s definitely possible and you can create an excellent quality system and website through this method. The important thing is making sure that you’re reading through absolutely every line of code and text to check things and make sure that they are being reformatted in the right way.

The best way to start this out could be going through and looking at all links, images, animations, videos and more that you have put throughout the website. These can be reformatted into the new version quickly and easily, and they’ll be essential for getting the overall idea across that you’re trying to accomplish.

If you’re not careful about what you’re doing it can be incredibly easy to miss these things and then you end up with a website that’s not compliant or with images and videos that aren’t being included in the new version of your website, which isn’t a benefit.

Once you’ve gone through all of these extra things, you’ll want to start going through the tags from the top down. Make sure you have the <head> tag right just to start off and then start looking for too much CSS or CSS that isn’t in line. You don’t have a lot of this capability, so make sure you’re using it in the best places possible and you’re not squandering it on things that would be just as good without it. You want to use it wisely to get the most bang for your buck instead of just putting it in wherever with no real rhyme or reason.

As you work your way down the code, you’ll start to notice a variety of differences that need to be made. You will need to do a lot of research to make sure that you know the specific codes that can and can’t be used and you’ll also want to make sure that you are updating all of your code efficiently.

If you miss something or misspell something or even just skip over one piece of coding or one tag without changing it to the slightly different formatting you could end up with problems getting the page to render the way you want it. No matter what you do you want to make sure that you validate the page when you’re finished.

There are a number of different ways that you can and should check out the page to make sure it’s valid and it’s going to work when you’ve finished transitioning, but if you’re not doing it with a program and you’re going through by hand it’s even more important to do this. Take a look at your different options and then work with one to create an error-free website that’s going to get you all of the benefits of an AMP website.

Validation Methods

Development=1 is one of the ways that you can check out your AMP version of HTML, and it’s quite easy to do because you open the web page and add the code #development=1 to the end of it. This opens up the version of the page that you need to validate.

You will need to download the DevTools console from Chrome to do this as well, and once you open it, you’re going to be able to look at all of the errors that are happening with validation of your website for AMP, which is quick and easy.

Web Interface using AMP validator is another super easy version that you can just go to validator.ampproject.org and see HTML sourcing for your page. You’ll actually be able to see this right next to the line by line judgments on your coding. So when you start making a change to a line of text you’ll see the validation information change to reflect that change. Since it changes right there in real time you’re getting what amounts to probably the best version of everything and the easiest one to work with.

Using a browser extension can be beneficial as well because you just go into the browser toolbar and you’ll find the extension itself, which is AMP Validator. This gives you colorful icons on each page that you visit to show you whether or not that particular page is optimized properly for AMP.

You’ll be able to check the number of errors, and you can do all of the pages at the same time because you get to transfer from one page to the next and get continuous updates about what the pages are doing as far as validation. With the NPM Package for CI, you can put an integration process right into the coding for your website, and you’re going to get a whole lot better validation procedure than you would in some of the other ways.

It’s built right into the system, which is definitely going to help you get the results that you’re looking for and it’s going to help you continue to schedule updates and monitoring of the AMP version of your website to make sure it’s always validating and nothing you do change it over time.

Using the Command Line tool is another way that you can create a high-quality validation sequence for your website. You want to make sure that you understand how to use command prompt before you do this because that’s how it works but your overall going to have a good quality review of your content by just installing npm install –g amphtml-validator directly into the command prompt. It will pull up everything you need to know and will make sure that your website validates with plenty of information listed right there in the same format.

Conclusion

No matter what, you’re going to find that your website is getting more traffic when it’s optimized to be mobile friendly. An AMP website may take you a lot more time and effort, but it’s definitely going to be worth it in the end when you see all of the things that it can do for you. You want a website that people are going to enjoy and that isn’t going to have a high bounce rate. Optimization for AMP is definitely going to help you with that and a lot faster than anything else.