Jump to content

Googles "AMP-Project"


felix
 Share

Recommended Posts

Google today announced it's competitor to Facebooks "Instant Articles": "AMP"(Accelerared Mobile Pages)HTML. Based on open source technologies (Basically it's a set of Web Components and a JS-Framework that loads and caches resources) it seems very promising. As far as I understand media is cached, served and proxied by google (and some tech partners). 

Btw: processwire as a system could benefit from/partner with it, too: https://www.ampproject.org/faq/#accelerated-mobile-pages-9

I'm really looking forward to playing around with it. Anyone else already fired up his editor and started fiddling around?

  • Like 4
Link to comment
Share on other sites

  • 4 months later...

I think PW should offer a solution (module?) for AMP as the big WP already published a plugin. Google is pushing the AMP project as they pushed for https/spdy/. Now we got Let's encrypt (certificates for free). If we like it or not - Googles market share in search is (at least here in Germany) >90 % - so ignoring their moves is heroic but cuts you off the line.

As I understand we have to offer two versions of one page, a regular one and a AMP-Version. Depending on the the requesting hardware (phone/tablet/desktop) Google (or any other search machine?) offers the appropriate page in the SERP. This leads to two different templates for a page, two URLs and a crosswise linking of the pages.

So what would be needed in PW is the ability to assign a second (plus third,plus...) template to the content page, where each template is assigned a separate URL (or prefix/suffix) .

As I am not a coder I'd appreciate the help of the community.

Link to comment
Share on other sites

@Werner

ProcessWire does not control the data structure as well as the output of your website. This is very different to a blogging website like Wordpress, where content is very much determined upfront. If you need AMP you'd need to implement it yourself.

But ProcessWire is fully equipped to do the thing the wp plugin does. Allow urlSegments for your templates and allow 'amp' as urlSegment. Then you can use this to output the amp code in your template:

if($input->urlSegment1) { // add "&& $input->urlSegment1 == 'amp'" if you've more urlSegments
  // Output AMP
} else {
  // You're previous template code
}

Your url www.example.com/some/site/ will be the normal page, www.example.com/some/site/amp/ will be the amp site. I'm just not sure how google is supposed to know about this amp website in the first place.

Link to comment
Share on other sites

@LostKobrakai: Danke!

Google can find the AMP page via a link you should place on every standard-page (directing to its AMP-sister). More info on this:

https://www.ampproject.org/docs/guides/discovery.html

The remark on the Wordpress plugin was more a 'political statement'. If it is very easy for the millions of Wordpress users to make use of AMP they will use it. As Google stated they will favour AMP sites in mobile SERPs from now on I think it is worth to keep an eye on what is going to happen in the near future.

Link to comment
Share on other sites

@LostKobrakai: Danke!

Google can find the AMP page via a link you should place on every standard-page (directing to its AMP-sister). 

That's very interesting. I've been following the AMP news closely and wondered if a blog post had to be either a "normal" html page OR an AMP page.

I assumed you shouldn't have both as Google doesn't like duplicate content but perhaps it's allowable for AMP pages?

Link to comment
Share on other sites

@Peter:

duplicate content is not an issue as you also need to have a canonical link on the AMP page, directing to the 'full' page. So Google is fully aware of the two pages - they actually asked for a 'separate mobile content', didn't they?

Basically nothing really new. There were days when we had seperate mobile sites, and our server selcted what content to be sent out. Now again we have two different offerings/pages, and Google does the pick.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Why aren't they supporting development and browser support of normal html5 css3 things like <picture> and srcset?

Instead coming up with yet another html specification seems ... (crazy?)

But as benbyf stated it's again about money..  :rolleyes:

Link to comment
Share on other sites

AMP forces you to make your mobile pages lightweight, but that's a choice you can make without using AMP.  It seems like the caching system is the only real advantage. Like most of you, I can't really see the point yet.

Link to comment
Share on other sites

  • 4 weeks later...

I think mobile content should load fast and every useless piece should be disabled if possible.

 

But I don't really understand why we can't just do everything AMP style and forget the old ways? Browsers can support it and if I don't have any elements which are banned, then why should I do normal page? I want always optimise my content and websites, but I don't really like double content or double work.

 

I can confirm that LostKobrakai's way to do this seems to be best practise but I think fixing only the elements that needs to be fixed is a better way than put everything to AMP or normal. At least for me because I have a lot of templates and code.

 

I just do my first AMP version.

 

amp-iframe: Must be at least 600px or 75% of the first viewport away from the top.

This is not nice for me because I always put YouTube video to top of the page (embed video - title - info - body), because that is very important for me. So now it must be the last.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
  • 2 months later...
  • 3 months later...

There have been a couple of these sorts of articles lately: https://80x24.net/post/the-problem-with-amp/

Quote

Google’s goals with the AMP Project are laudable, but there are major security and UX concerns that need to be addressed. In its current form, AMP is bad for the open web and should be changed or eliminated.

https://shkspr.mobi/blog/2016/11/removing-your-site-from-amp/
 

Quote

 

AMP is Google's attempt to re-fight the transcoding wars of the early 2000s.

It is actively dangerous to the web ecosystem, helps disseminate propaganda, and is disliked by many users.

If, like me, you made the mistake of trying out AMP on your website - you're in a tricky position if you try to remove it. Google doesn't like anything leaving its clutches.

After a few weeks of AMP, I decided that it wasn't suitable for me. So I uninstalled the WordPress plugin. That's when the problems started.

 

 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hi,

is there any module or tutorial about amp pages for processwire?

I want to make an amp version  of my regular page.

My idea is create a new template file(amptemplate.php) coded with amp html 

i will create a folder named "Amp" on admin panel and connect that template for child pages

is it works?

 

Link to comment
Share on other sites

  • 1 year later...

FYI. Well worth the read:

https://www.i-programmer.info/news/81-web-general/12149-google-gives-amp-open-governance-still-not-good-enough.html

"It doesn't matter if Google hands AMP over to an entirely benevolent foundation, as long as Google is adjusting its search and hosting the cache, it has too much control. The web served by Google isn't an open and free web, it is a walled garden in waiting."

  • Like 1
Link to comment
Share on other sites

 

Quote

The web served by Google isn't an open and free web, it is a walled garden in waiting."

Not trying to hijack this Google AMP thread but one should read this too about Google:
Trying to setup a censored search engine in china where search results on democracy and human rights are made invisible.
Internal memos about this subject by Google employees who try to make this public news are forced to delete these memos.
Source: the intercept

Link to comment
Share on other sites

  • 6 months later...

More on this: https://www.i-programmer.info/news/81-web-general/12700-google-attempts-to-fix-amp-makes-it-worse.html

Quote: "AMP is a walled garden under construction."

Sadly, macOS too:

https://www.i-programmer.info/news/201-ios/12681-is-the-walled-garden-about-to-close-around-macos.html

Quote:
"Beginning in macOS 10.14.5, all new or updated kernel extensions and all software from developers new to distributing with Developer ID must be notarized in order to run. In a future version of macOS, notarization will be required by default for all software. (A notarized app is a macOS app that was uploaded to Apple for processing before it was distributed.)"

  • Like 2
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Noel Boss
      » A more exhaustive version of this article is also available on Medium in English and German «
      First, we'd like to thank the very helpful community here for the excellent support.
      In many cases we found guidance or even finished solutions for our problems.
      So a big THANK YOU!!!
       
      We are pleased to introduce you to the new Ladies Lounge 18 website. The next ICF Women’s Conference will take place in Zurich and several satellite locations across Europe. We embarked on bold new directions for the development of the website — in line with the BRAVE theme.

      Ladies Lounge 18 — ICF Woman’s Conference website on Processwire ICF Church is a European Church Movement that started 20 years ago in Zurich and since experienced tremendous growth. There are already well over 60 ICF churches across Europe and Asia. ICF is a non-denominational church with a biblical foundation that was born out of the vision to build a dynamic, tangible church that is right at the heartbeat of time.
      With the growth of the Ladies Lounge from a single-site event to a multi-site event, the demands and challenges to the website have also increased. A simple HTML website no longer cuts it.
      Simplified frontend Our goal with the development of the new site was it to present the different locations — with different languages and partly different content — under once uniform umbrella — while at the same time minimising the administrative effort. In addition to the new bold look and feel, this year’s website is now simpler and easier and the information is accessible with fewer clicks. 
      Some highlights of the new website
      Thanks to processwire, all contents are maintained in one place only, even if they are displayed several times on the website 100% customised data model for content creators Content can be edited directly inline with a double-click:  

      Multi-language in the frontend and backend Dynamic Rights: Editors can edit their locations in all available languages and the other content only in their own language Easy login with Google account via OAuth2 Plugin Uikit Frontend with SCSS built using PW internal features (find of files…) Custom Frontend Setup with Layout, Components, Partials and Snippets Only about 3 weeks development time from 0 to 100 (never having published a PW before) Despite multi-location multi-language requirement, the site is easy to use for both visitors and editors:  
       
        The search for a good CMS is over It’s hard to find a system that combines flexibility and scope with simplicity, both in maintainance and development. The search for such a system is difficult. By and large, the open source world offers you the following options:
      In most cases, the more powerful a CMS, the more complex the maintenance and development
      It is usually like that; The functionality of a system also increases the training and operating effort — or the system is easy to use, but is powerless, and must be reporposed for high demands beyond its limits.
      Quite different Processwire : You do not have to learn a new native language, you don’t have to fight plugin hell and mess around with the loop, you don’t have to torment yourself with system-generated front-end code or even learn an entierly new, old PHP framework .
      All our basic requirements are met:
      Custom Content Types Flexible and extensible rights-management Multilanguage Intuitive backend Well curated Plugin Directory Actually working front-end editing Simple templating with 100% frontend freedom In addition, Processwire has an exceptionally friendly and helpful community. As a rule of thumb, questions are answered constructively in a few hours . The development progresses in brisk steps , the code is extremely easy to understand and simple. Processwire has a supremely powerful yet simple API , and for important things there are (not 1000) but certainly one module which at least serves as a good starting point for further development. Last but not least, the documentation is easy to understand, extensive and clever .
      Our experience shows, that you can find a quick and simple solution with Processwire, even for things like extending the rights-management — most of the time a highly complex task with other systems.
      This is also reflected positively in the user interface. The otherwise so “simple” Wordpress crumbles when coping with more complex tasks. It sumbles over its apparent simplicity and suddenly becomes complex:
       
      Old vs. New — Simple and yet complicated vs. easy and hmmm … easy
          Our experience with Processwire as first-timers
      Before we found out about Processwire, we found CraftCMS on our hunt for a better CMS. We were frustrated by the likes of Typo3, WP or Drupal like many here. CraftCMS looked very promising but as we were digging deeper into it, we found it did not met our requirements for some big projects in our pipeline that require many different locations, languages and features. Initially we were sceptical about Processwire because;
      A. CraftCMS Website (and before UiKit also the admin interface) simply locked much nicer and
      B. because it is built on top of a Framework
      It was only later, that we found out, that NOT depending on a Framework is actually a very good thing in Processwire's case. Things tend to get big and cumbersome rather then lean and clean. But now we are convinced, that Processwire is far superior to any of the other CMS right now available in most cases.
      The good
      Processwire is the first CMS since time immemorial that is really fun to use (almost) from start to finish— whether API, documentation, community, modules or backend interface. Every few hours you will be pleasantly surprised and a sense of achievement is never far away. The learning curve is very flat and you’ll find your way quickly arround the system. Even modules can be created quickly without much experience.
      Processwire is not over-engineered and uses no-frills PHP code — and that’s where the power steams from: simplicity = easy to understand = less code = save = easy maintanance = faster development …
      Even complex modules in Processwire usually only consist of a few hundred lines of code — often much less. And if “hooks” cause wordpress-damaged developers a cold shiver, Hooks in Processwire are a powerful tool to expand the core. The main developer Ryan is a child prodigy — active, eloquent and helpful.
      Processwire modules are stable even across major releases as the code base is so clean, simple and small.
      There is a GraphQL Plugin — anyone said Headless-CMS?!
      Image and file handling is a pleasure:
      echo "<img src='{$speaker->image->size(400, 600)->url}' alt='{$speaker->fullname}' />"; I could go on all day …
      The not soooo good
      Separation of Stucture and Data
      The definition of the fields and templates is stored in the database, so the separation between content and system is not guaranteed. This complicates clean development with separate live- and development-environments. However, there is a migration module that looks promising — another module, which is expected to write these configurations into the file system, unfortunately nuked our system. I'm sure there will be (and maybe we will invest) some clever solutions for this in the future. Some inspiration could also be drawn here, one of the greatest Plugins for WP: https://deliciousbrains.com/wp-migrate-db-pro/
      Access rights
      The Access-Rights where missing some critical features: Editors needed to be able to edit pages in all languages on their own location, and content on the rest of the page only in their respective language. We solved it by a custom field adding a relation between a page the user and a role that we dynamically add to the user to escalate access rights;
      /** * Initialize the module. * * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called * when ProcessWire's API is ready. As a result, this is a good place to attach hooks. */ public function init() { $this->addHookBefore('ProcessPageEdit::execute', $this, 'addDynPermission'); $this->addHookBefore('ProcessPageAdd::execute', $this, 'addDynPermission'); } public function addDynPermission(HookEvent $event) { $message = false; $page = $event->object->getPage(); $root = $page->rootParent; $user = $this->user; if ($user->template->hasField('dynroles')) { if ($message) { $this->message('User has Dynroles: '.$user->dynroles->each('{name} ')); } // for page add hook… if ($page instanceof NullPage) { // click new and it's get, save it's post… $rootid = wire('input')->get->int('parent_id') ? wire('input')->get->int('parent_id') : wire('input')->post->parent_id; if ($message) { $this->message('Searching Root '.$rootid); } $root = wire('pages')->get($rootid)->rootParent; } elseif ($page->template->hasField('dynroles')) { if ($message) { $this->message('Page "'.$page->name.'" has Dynroles: '.$page->dynroles->each('{name} ')); } foreach ($page->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of page "'.$page->name.'"'); } $user->addRole($role); } } } if (!($root instanceof NullPage) && $root->template->hasField('dynroles')) { if ($message) { $this->message('Root "'.$root->name.'" has dynamic roles: '.$root->dynroles->each('{name} ')); } foreach ($root->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of root page "'.$root->name.'"'); } $user->addRole($role); } } } } } With the Droles and Access Groups Modules we were not able to find a solution.
      I thought it was hard to get absolute URLs out of the system — Ha! What a fool I was. So much for the topic of positive surprise. (Maybe you noticed, the point actually belongs to the top.)
      But while we’re at it — that I thought it would not work, was due to a somewhat incomplete documentation in a few instances. Although it is far better than many others, it still lacks useful hints at one point or another. As in the example above, however, the friendly community quickly helps here.
      processwire.com looks a bit old-fashioned and could use some marketing love. You notice the high level to moan with Processwire.
      There is no free Tesla here.
      Conclusion
      Processwire is for anyone who is upset about any Typo3, Wordpress and Drupal lunacy — a fresh breeze of air, clear water, a pure joy.
      It’s great as a CMF and Headless CMS, and we keep asking ourselves — why is it not more widely known?
      If you value simple but clean code, flexibility, stability, speed, fast development times and maximum freedom, you should definitely take a look at it.
      You have to like — or at least not hate PHP — and come to terms with the fact that the system is not over-engineerd to excess. If that’s okay with you, everything is possible — with GraphQL you can even build a completely decoupled frontend.
      We are convinced of the simplicity of Processwire and will implement future sites from now on using it as a foundation.
      Links & resources we found helpful
      API documentation and selectors API cheatsheet pretty handy, not quite complete for version 3.0 Captain Hook Overview of Hooks Weekly.PW newsletter a week, exciting Wireshell command line interface for Processwire Nice article about Processwire Plugins & Techniques that we used
      Custom Frontend Setup with Uikit 3 and SCSS, and Markup Regions Uikit Backend Theme ( github ) Oauth2 login modules In-house development Login with E-Mail Pro Fields for repeater matrix fields (infos, price tables, daily routines) Wire upgrade to update plugins and the core Wire Mail Mandrill to send mails FunctionalFields for translatable front-end texts that are not part of a content type (headings, button labels, etc.) Runtime markup for dynamic backend fields (combination of first and last name) Tracy debugger for fast debugging Textformatter OEmbed to convert Vimeo and Youtube links into embed codes HideUneditablePages thanks to @adrian  
       
    • By Mithlesh
      Hi there, 

      How to add Google Recaptcha V 3.0 in the processwire?

      My website has this module: Markup Google reCAPTCHA but I am not sure whether that is V.3 or any other, sharing the SS below:


      Let me know how to update or integrate the same

      Thanks
    • By louisstephens
      So I have a project coming up soon and one of the goals was to use Google's AMP project for the project's mobile site. I have gone through the tutorials and think I have a good grasp on the matter, but there is still one roadblock I do not really know how to tackle. The site, which uses a responsive grid system, will look great on a mobile and desktop which was is fine by me. However, if a user comes from Google to one of our AMP pages (ie www.example.com/amp) and clicks on a url, they will then be loading our responsive mobile pages and not the amp pages. For the sake of consistency, we really want to "force" users to stay on all the amp pages.
       
      My current thoughts on how to set up this task:
      Allow url segments for all pages using "/amp" Using a simple if statement, load the amp page if it exists <?php if($input->urlSegment1) { // add "&& $input->urlSegment1 == 'amp'" if you've more urlSegments include("partials/amp-page.php"); } else { include("partials/normal.php"); } ?>  
      However, I have hit a roadblock on appending "/amp" to all pages if they came to an amp page via Google, or even if they are on mobile and visit the site. Is this even possible to do, or should we just use the amp pages (if a user comes from google) and allow them to be active on our mobile pages?  We are just trying to give the fastest load times possible, as well as give a consistent look between mobile and desktop versions. As always, I really appreciate the ideas and help.
    • By kongondo
      For a while now, I've wanted to expand my skills into mobile app development. Having done some Googling and watched several YouTube videos regarding native versus hybrid apps, I decided to go native. I did my homework regarding React, Ionic, etc and decided to go native. I settled on the NativeScript + TypeScript combo although it seems most tutorials are about Angular. Anyway, after watching quite a number of videos, just when I was about to dive into things, someone turned off the lights! Progressive what? PWA? Haven't you heard about this? No, I haven't! Where have you been? Let's not go there...
      OK, so I don't know much about mobile apps as you can tell (or even much about frontend development as my personal websites do tell, ). At first, I dismissed Progressive Web Apps as another Google tech that is bound to fail....until I read that Twitter, Blah Blah, have joined the bandwagon and the thing is gaining serious traction.
      It was back to more Googling. I now know (I think) what Progressive Web Apps are (or are meant to be). Naturally, my first question was Progressive Web Apps versus Native apps. So, I asked Google. Google told me to stop asking that question. To be precise, it told me (at least with the first couple of results) that that was the wrong question to ask! I tried finding out why, but the answer was hidden down some deep mobile rabbit hole that I didn't have time to fully descend into. 
      It seems I am back to where I started. Native apps seem to be promising first class citizenship (who doesn't want that?). On the other hand, I am being told, Progressive Web Apps are the bright shiny future that will solve all our problems (and maybe even shutdown the Play Store! ). Please be gentle with my ignorant self. I have asked Google but she hasn't bothered or cannot be bothered to reply or I am asking her the wrong questions. I simply want to know if Progressive Web Apps can or will one day be able to be used to:
      Build apps like WhatsApp, etc? Build games like Candy Crush (what?)? Build premium apps (how would that work?) Or...are Progressive Web Apps just a replacement for mobile.domain.com? Should I ditch my NativeScript??
      If someone could help me out here (once you're done laughing at my silly questions ) and/or point me to resources that will answer my questions, I'll be forever grateful .
      Thanks
       
    • By FrancisChung
      Hi, I have an ongoing issue with Google SEO that I can't seem to fix. Wondering if anyone has come across a similar situation?

      We deployed a new version of the website using a new deployment methodology and unfortunately, the wrong robots.txt file was deployed basically telling Googlebot not to scrape the site.

      The end result is that if our target keywords are used for a (Google) search, our website is displayed on the search page with "No information is available for this page." 

      Google provides a link to fix this situation on the search listing, but so far everything I have tried in it hasn't fixed the situation.
      I was wondering if anyone has gone through this scenario and what was the steps to remedy it?
      Or perhaps it has worked and I have misunderstood how it works?

      The steps I have tried in the Google Webmaster Tool :
      Gone through all crawl errors Restored the Robots.txt file and Verified with Robots.txt tester Fetch/Fetch and Render as Google as both Desktop/Mobile, using root URL and other URLs, using Indexing Requested / Indexing Requested for URL and Linked Pages. Uploaded a new Sitemap.xml  Particularly on the Sitemap page, it says 584 submitted, 94 indexed.
       
      Would the Search Engine return "No Information available" because the page is not indexed? The pages I'm searching for are our 2 most popular keywords and entry points into site. It's also one of 2 most popular category pages.  So I'm thinking it probably isn't the case but ...

      How can I prove / disprove the category pages are being indexed?

      The site in questions is Sprachspielspass.de. The keywords to search are fingerspiele and kindergedichte.

       
×
×
  • Create New...