Amp pages with netlify

I have amp pages with normal pages uploaded in GitHub repository but how can I use them on netlify to increase speed. I use Ghost CMS, and wget to convert it to static pages then upload it to github, it contains both normal and amp pages so how can I use them.

I am sorry, I didn’t understand your question. If you have generated the AMP pages, won’t they have their own URL? You can enter those URLs and the AMP pages should work.

According to the documentation here: https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?format=websites, all you need is a canonical tag and it should work (considering you have rest of the tags setup correctly).

They are made by ghost cms hosted locally and place in order by wget. So they are in html format and don’t have url.

I think you need to ask Ghost CMS then as we don’t know how it’s being generated and if as you say, there’s no seperate URL for those pages, there’s probably nothing we can suggest either.

Can you please see my GitHub repository for the reference https://github.com/BunnyExplains/bunnyexplains/

I’ll check it in some time. Currently, my laptop is busy compressing some files.

If the AMP pages are uploaded, they have a URL. If they are not uploading, then you need to fix that issue first. Your wget process may be getting only the non-AMP pages, in which case you would need to change your workflow.

Wget convert pages to static pages and I have figured out the amp pages which it generated are html pages which need to be converted to amp. https://amp.dev/documentation/guides-and-tutorials/start/converting/setting-up/?format=websites

@bunnyexplainsblog There are some major issues with your repo. The first and the most important being, content URLs.

As you can see, there are many resources with the localhost prefix. These won’t load!

Secondly, your code is not minified. The purpose of AMP is to make the content load faster. Every character (including spaces), takes up 1 byte. Thus, by leaving so many spaces and beautification, you’re adding up to the time required to transfer your page. I would not have complained about code not being minified for normal websites, but since you’re targeting AMP, I think this is necessary. However, if you’re using Netlify’s asset optimization to minify the code for you, kindly ignore this remark.

About the URL, from what I see, the URL for AMP pages is /amp/ according to your setup.

It is localhost on main pages also.IMG_20210121_200342
And still it works here https://bunnyexplains.netlify.app

Those are the images in your OG tags and Structured data. Thus it’s not affecting your images on the website. However, the OG tags and the structured data won’t work. Try visiting those images. It’s called localhost for a reason, it’s because it will work only locally.

But that image is visible on internet also


So how it is happening?

The images you’ve used in the HTML markup are correct like these: https://d33wubrfki0l68.cloudfront.net/db8bd69c2b52dde3e7b3b038855e57cdea05d36b/700d6/content/images/2021/01/website-logo-1.png

But you’ve got it wrong in structured data and OG tags. Try visiting this URL: http://localhost:2368/content/images/2021/01/website-logo-1.png

If you still think that’s how it’s supposed to be, then you’re good to go. This anyways has nothing to do with your AMP pages and so won’t be a problem.

So now the question is how I can I use my amp pages can you explain me atleast the overview of amp pages?

I don’t understand what you mean by ‘use’ AMP pages. They’re accessible using a URL. You’d have to wait till Google sees those AMP pages and adds it to the index.

If all your structured data is valid, canonical link is setup, then there’s probably nothing else you need to do (other than submit the URLs to Google).

But where is url? If my normal page got indexed will my amp page will be load first during click?

I have answered it here already. It’s <post-url>/amp/`.

That’s up to Google to decide. If it decides to show the AMP version then yes, if not, then no.

As you can see, it loads fine:

But the image doesn’t load because of incorrect URL in structured data.

@bunnyexplainsblog The URL depends on the location in your file hierarchy.

Does this information help?

My bot just updated from localhost to domain it worked with amp pages but on my main post photo is not visible so can you see.