Mobile Redirection – AMP With Cloudflare

  • Resolved turkeysforlife

    (@turkeysforlife)


    3 years, 6 months ago

    Hi guys,

    I’m struggling to get ‘Redirect mobile visitors to AMP’ to play nice with Cloudflare and would appreciate any help…

    When I first turned on mobile redirection it was working – but the redirect was very slow and you could see my theme’s regular mobile version loading for a few seconds before it resolved to the AMP version. I found this support thread with a similar issue.

    I’ve tried using the plugin mentioned in that thread, but my problem then is that not all mobile redirects seem to work consistently. Whenever I try from my own mobile (signed out) everything seems to work as I would expect ie. the non-amp version redirects to the AMP version without me seeing any of my own theme’s mobile version.

    However, when I try to test what other mobile screen might be seeing, by using sites like MobileMoxie Page-oscope for example, it seems like they are loading my theme’s mobile version without ever resolving to the AMP version.

    And, if I try using Page Speed Insights to test the setup, Google seems to like the first view of a cleared-cache page, but on repeat attempts, it no longer sees the redirect.

    I’m pretty sure it’s mainly to do with a conflict with Cloudflare. If I enable development mode in Cloudflare then the mobile redirect with AMP seems to work fine.

    Do you know of any way to get things set up so that I can use both the AMP mobile redirect and Cloudflare at the same time?

    Many thanks!

    Barry

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Support Milind More

    (@milindmore22)

    Hello @turkeysforlife

    I think the redirection behaving strangely because you have activated the attack mode feature of Cloudflare as it will ask each page visit to complete Hcaptcha challenge. may be disabling that might resolve your issue.

    ref: https://support.cloudflare.com/hc/en-us/articles/200170056-Understanding-the-Cloudflare-Security-Level

    I will also recommend contacting with Cloudflare Support Team as they are the best people to advise you on this matter.

    Thread Starter turkeysforlife

    (@turkeysforlife)

    Hi Milind,

    Thanks for that. Attack mode wasn’t activated actually, it was set at medium, but I just switched it off completely and retried, with the same result.

    And using Page Speed Insights, it sees the ‘AMP URL discovered’ on both desktop and mobile as /amp rather than ?amp=1, which is now how we should be set up. And that’s with both Cloudflare & our WP caching plugin both flushed.

    Can we rule out that it’s a problem with AMP plugin and it’s definitely a Cloudflare issue based on that? ie. Why is Google seeing that a flushed cache page has a /amp version rather than a ?amp=1 version?

    Sorry for all of the questions ?? I don’t understand all of this myself, but, if we can rule out that it’s definitely not a plugin issue then I feel like I can reach out to Cloudflare with more ammunition.

    Thanks!

    Barry

    Hi Barry,
    Please can you tell me what /amp vs ?amp=1 ??? means? And, do you have that list of validation things? I can’t work out whether this AMP plugin is working on my site, at all…

    Thread Starter turkeysforlife

    (@turkeysforlife)

    Hi @considerthis1 /amp vs ?amp=1 are just two different suffix versions of how the AMP version of your URL ends.

    eg:

    1) example.com/amp
    2) example.com?amp=1

    It looks like support are helping you with your issues now on some other threads – and they are much better qualified to help you than I am!

    Good luck getting everything sorted out with your site – and have a great weekend!

    Plugin Support Milind More

    (@milindmore22)

    Hello @turkeysforlife

    And using Page Speed Insights, it sees the ‘AMP URL discovered’ on both desktop and mobile as /amp rather than ?amp=1, which is now how we should be set up. And that’s with both Cloudflare & our WP caching plugin both flushed.

    I am able to see the AMP version using both /amp and ?amp=1 in the URL

    are switched to server-side mobile redirection or still using client-side redirection which is enabled by default, in that case, make sure you have switched on it from the backend

    Also, make sure that you have excluded the redirection script from any modification and it’s not deferred loaded ( script should be in the <head> )

    Thread Starter turkeysforlife

    (@turkeysforlife)

    Thanks @milindmore22

    I’m using server-side mobile redirection via this plugin. I presumed it worked without making any changes, no?

    The ‘Redirect mobile visitors to AMP’ in the Advanced Settings of backend is still switched on though. Do I need to switch that off?

    And how would I make sure that the redirection script is excluded from modifications and not deferred loaded?

    Plugin Support Milind More

    (@milindmore22)

    Hello @turkeysforlife

    If you are looking for servers side redirection, please turn off Redirect mobile visitors to AMP off and add the below code snippet in your theme’s functions.php or in a custom plugin?

    
add_action(
	'wp',
	function() {
		global $wp;
		add_action( 'amp_mobile_client_side_redirection', '__return_false' );
		add_filter( 'amp_pre_is_mobile', '__return_true' );

		if ( ! isset( $_GET['noamp'] ) && wp_is_mobile() && function_exists( 'is_amp_endpoint' ) && ! is_amp_endpoint() && function_exists( 'amp_is_available' ) && amp_is_available() ) {
			wp_safe_redirect( esc_url( add_query_arg( 'amp', '1', $wp->request ) ), 302 );
		}
	}
);

    In case you want to use javascript based/client-side redirection provided by the AMP plugin, Check if you are using a JS minification or contamination plugin Make sure that you add an exception for the AMP javascript on non-AMP pages, the minification plugin author can guide you on how to add an exception to certain a javascript.

    Thread Starter turkeysforlife

    (@turkeysforlife)

    Oh, okay @milindmore22 thanks again.

    What does that code snippet do, in addition to the plugin I used, which I think only adds: add_filter( ‘amp_mobile_client_side_redirection’, ‘__return_false’ );

    Also, I’m guessing I would then need to remove this plugin, yes?

    Plugin Support Milind More

    (@milindmore22)

    The code will disable client-side redirection (JS redirection) and redirect users to the AMP version if they are using a Mobile/Tablet device.

    Yes, you can deactivate that plugin for now.

    Thread Starter turkeysforlife

    (@turkeysforlife)

    Hmmm, no that seems to have made things worse, unfortunately @milindmore22

    It now seems to be redirecting mobile traffic to the WP login page – and Page Speed Insights still can’t see the redirect.

    I’ll revert back to previous settings for now.

    Thanks for trying to help though!

    Plugin Support Milind More

    (@milindmore22)

    hmm strange

    can you please try the updated version of the code?

    add_action(
	'wp',
	function() {
		add_action( 'amp_mobile_client_side_redirection', '__return_false' );
		add_filter( 'amp_pre_is_mobile', '__return_true' );

		if ( ! isset( $_GET['noamp'] ) && wp_is_mobile() && function_exists( 'is_amp_endpoint' ) && ! is_amp_endpoint() && function_exists( 'amp_is_available' ) && amp_is_available() ) {
			wp_safe_redirect( esc_url( add_query_arg( 'amp', '1', get_permalink() ) ), 302 );
		}
	}
);

    @turkeysforlife Checking in here –?were you able to try Milind’s snippet above? Are you still having issues?

    Thread Starter turkeysforlife

    (@turkeysforlife)

    @shetheliving We are back to using Weston’s plugin solution as that seems best, although still not perfect.

    You can mark this resolved if you like, though…

    @turkeysforlife Thanks for the update. I’ll mark this is as resolved for now, but as always, get in touch if there’s anything we can help with!

    Thread Starter turkeysforlife

    (@turkeysforlife)

    Thanks @shetheliving

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Mobile Redirection – AMP With Cloudflare’ is closed to new replies.

Tags