<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog de Christian Oliveira</title>
	<atom:link href="https://www.christianoliveira.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.christianoliveira.com/blog/</link>
	<description>Consultor SEO Técnico</description>
	<lastBuildDate>Fri, 17 May 2019 19:36:39 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>
	<item>
		<title>Google is giving AMP Stories a VIP ticket on the SERPs. How is this going to impact SEO?</title>
		<link>https://www.christianoliveira.com/blog/seo/amp-stories-seo/</link>
					<comments>https://www.christianoliveira.com/blog/seo/amp-stories-seo/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Fri, 19 Apr 2019 05:06:31 +0000</pubDate>
				<category><![CDATA[En]]></category>
		<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">https://www.christianoliveira.com/blog/?p=1943</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/seo/amp-stories-seo/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-featured-150x150.png" class="alignleft tfe wp-post-image" alt="Pruebaaaaa" decoding="async" /></a>Google announced at the AMP Conf 2019 (In Tokyo) that they will show a new dedicated space on the SERPs exclusively for AMP Stories. This may be a huge change for SEO, as to appear in this new block you will not only need to use AMP, but also to create content in the «Stories» [&#8230;]</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/seo/amp-stories-seo/">Google is giving AMP Stories a VIP ticket on the SERPs. How is this going to impact SEO?</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1943&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Google is giving AMP Stories a VIP ticket on the SERPs. How is this going to impact SEO?&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>

<p>Google announced at the <a href="https://amp.dev/events/amp-conf-2019">AMP Conf 2019 (In Tokyo)</a> that they will show a new dedicated space on the SERPs exclusively for AMP Stories. This may be a huge change for SEO, as to appear in this new block you will not only need to use AMP, but also to create content in the «Stories» format.</p>



<h2 class="wp-block-heading">What are AMP Stories?</h2>



<p>AMP Stories are just a specific format of displaying content using AMP. You probably know (and maybe even create or consume) stories from Snapchat, Instagram, Facebook&#8230; It&#8217;s a visual, vertical, mobile-first (and sometimes mobile-only) format of displaying content, with videos or images combined with small pieces of text.</p>



<div class="wp-block-image"><figure class="aligncenter"><img fetchpriority="high" decoding="async" width="498" height="1024" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/instagram-story-randomtrip-huaraz-498x1024.jpeg" alt="" class="wp-image-1959" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/instagram-story-randomtrip-huaraz-498x1024.jpeg 498w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/instagram-story-randomtrip-huaraz-146x300.jpeg 146w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/instagram-story-randomtrip-huaraz.jpeg 720w" sizes="(max-width: 498px) 100vw, 498px" /><figcaption>Example of a Story in Instagram we created for our travel blog, <a href="https://www.instagram.com/randomtrip_blog/">Randomtrip</a></figcaption></figure></div>



<p>AMP Stories are not new: <a href="https://developers.googleblog.com/2018/02/amp-stories-bringing-visual.html">they were launched early in 2018</a>, as a way for publishers to create visual and more attractive content, focused on mobile. Some of the big publishers have been creating AMP Stories content since then, like the CNN. Here is an example of a published AMP Story: <a href="https://edition.cnn.com/ampstories/world/what-the-spring-equinox-means-for-you">https://edition.cnn.com/ampstories/world/what-the-spring-equinox-means-for-you</a></p>



<p>AMP Stories in SERPs are not new neither, but until know, for non-branded queries, they just appeared as a «normal» search result with a thumbnail and an icon helping users identify it was a story format:</p>



<div class="wp-block-image"><figure class="aligncenter"><img decoding="async" width="582" height="1024" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-story-search-results-seo-582x1024.png" alt="" class="wp-image-1944" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-story-search-results-seo-582x1024.png 582w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-story-search-results-seo-170x300.png 170w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-story-search-results-seo-768x1352.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-story-search-results-seo.png 808w" sizes="(max-width: 582px) 100vw, 582px" /><figcaption>This is how an AMP Story appeared on SERPs until now<br></figcaption></figure></div>



<p>They also appeared inside the Top Stories box, among the rest of AMP articles:</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="402" height="818" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-top-stories-seo.png" alt="" class="wp-image-1947" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-top-stories-seo.png 402w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-top-stories-seo-147x300.png 147w" sizes="auto, (max-width: 402px) 100vw, 402px" /></figure></div>



<p>When users click on it, they are taken to a «story» environment (exactly the same to the one Snapchat created and Instagram copied) where you can advance on the story by taping on the right side of the screen:</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="587" height="1024" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-cnn-experience-search-results-587x1024.png" alt="" class="wp-image-1948" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-cnn-experience-search-results-587x1024.png 587w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-cnn-experience-search-results-172x300.png 172w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-cnn-experience-search-results-768x1340.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-cnn-experience-search-results.png 814w" sizes="auto, (max-width: 587px) 100vw, 587px" /></figure></div>



<h2 class="wp-block-heading" id="mce_3">Where are AMP Stories hosted?</h2>



<p>Contrary to what happens with Snapchat, Instagram or Facebook Stories, which you create with your phone through the corresponding apps and are uploaded to their platform (also, only for 24h, as after that they disappear), AMP Stories are «normal» pages hosted on your website, accessible through a URL. </p>



<p>For instance, the previous AMP Story from CNN can be found here: <a href="https://edition.cnn.com/ampstories/world/what-the-spring-equinox-means-for-you">https://edition.cnn.com/ampstories/world/what-the-spring-equinox-means-for-you. </a>It&#8217;s a «normal» AMP page, which is then cached by Google (just like any other AMP page of your website) and served directly by Google to the users through their AMP CDN.</p>



<h2 class="wp-block-heading" id="mce_18">Are AMP Stories good for SEO?</h2>



<p>Until now, AMP Stories were just a format (you could try to create content like that with HTML 5, CSS and JS too) that would appear more visually appealing on the Top Stories box (only for big and medium publishers with newsworthy content) and also a small thumbnail with a stories icon on normal organic search results.</p>



<p>But with the new announcement made at the AMP Conf, this could be a game changer: Google will now include a specific «Visual Stories» box on mobile for some kind of searches, showing ONLY AMP Stories there, moving the normal organic results down (I mean, more than where they already are). They specifically announced that this new box will start appearing in the US for travel related queries (the example used on the presentation was «Things to do in Tokyo»), and later on, also for queries related to gaming, movies, tv shows, recipes and fashion:</p>



<ul class="wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex"><li class="blocks-gallery-item"><figure><img loading="lazy" decoding="async" width="661" height="1024" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-seo-travel-1-661x1024.png" alt="" data-id="1953" data-link="https://www.christianoliveira.com/blog/?attachment_id=1953" class="wp-image-1953" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-seo-travel-1-661x1024.png 661w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-seo-travel-1-194x300.png 194w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-seo-travel-1-768x1190.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-seo-travel-1.png 987w" sizes="auto, (max-width: 661px) 100vw, 661px" /></figure></li><li class="blocks-gallery-item"><figure><img loading="lazy" decoding="async" width="792" height="1024" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/apm-stories-seo-2-792x1024.png" alt="" data-id="1951" data-link="https://www.christianoliveira.com/blog/?attachment_id=1951" class="wp-image-1951" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/apm-stories-seo-2-792x1024.png 792w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/apm-stories-seo-2-232x300.png 232w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/apm-stories-seo-2-768x992.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/apm-stories-seo-2.png 1314w" sizes="auto, (max-width: 792px) 100vw, 792px" /></figure></li></ul>



<p>This means that if you have a website that publishes content related to those areas, you will soon need to create AMP Stories if you want to try to rank on the first «content» area of the Search Results for some queries (we still don&#8217;t know when this box would be triggered)</p>



<p><p>You can watch the announcement <a href="https://www.youtube.com/watch?time_continue=1009&amp;v=i7Br9GmpQWs">here</a></p></p>



<h2 class="wp-block-heading" id="mce_1">How do I create AMP Stories?</h2>



<p>All the information about how to create AMP Stories on your website can be found in this tutorial on the AMP official site: <a href="https://amp.dev/documentation/guides-and-tutorials/start/visual_story/">https://amp.dev/documentation/guides-and-tutorials/start/visual_story/</a></p>



<p>Basically, you will create a normal AMP page where you will include an AMP component (amp-story) which will contain the different «pages» (each of the «scenes», represented by the horizontal bars up on the screen), and also each page can contain different layers and elements (images, headings, etc.)</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="442" src="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-how-they-work-1024x442.png" alt="" class="wp-image-1954" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-how-they-work-1024x442.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-how-they-work-300x130.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-how-they-work-768x332.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2019/04/amp-stories-how-they-work.png 1047w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption>A visual explanation of how AMP Stories work<br></figcaption></figure>



<p>You can create stories on your own domain, each story on their own URL and following all the rest of SEO best practices: using a descriptive title and meta description, headings, etc. An AMP Story will be «a normal page», just more visual and interactive.</p>



<p>There are also some apps/tools appearing in order to simplify the creation of AMP Stories, like <a href="http://makestories.io/">Make Stories</a>, <a href="https://unfoldstori.es/">Unfold</a> and also, the <a href="https://github.com/ampproject/amp-wp/releases/tag/1.2-alpha1">official AMP plugin for WordPress is going to include the functionality of creating AMP Stories</a></p>



<h2 class="wp-block-heading" id="mce_13">Can I make money with AMP Stories?</h2>



<p>Yes! As AMP Stories are just a way of showing content, you can monetize them. By now, you can include Ads, affiliate links, as well as links to other pages of your site where you have other monetization methods. Google advises not to include lots of links inside the stories (as the purpose of the Stories is to be consumed without leaving them), and this will probably a grey area where SPAM will be applied and where Google will need to act.</p>



<h2 class="wp-block-heading" id="mce_43">How will Stories be selected and ranked?</h2>



<p>We don&#8217;t know yet. We don&#8217;t know if authority will play a big role (like in the Top News box) or if any website big or small will have chances of appearing on the box. We also don&#8217;t know if the results will be evaluated and ranked based on the same criteria Google uses for normal results, or the ones they use for the Top Stories results, or if they will develop a new specific algorithm just for AMP Stories.</p>



<h2 class="wp-block-heading" id="mce_47">Will the new Visual Stories box appear on all the countries and languages?</h2>



<p>For the moment it will only appear on the US, according to a <a href="https://twitter.com/suzukik/status/1118474529288773632">tweet by Kenichi Suzuki</a>. We don&#8217;t know if there are plans of expanding this worldwide, but seems logical to me they do.</p>



<p>Based on the presentation, Google will study how users use the new box (as they probably do with anything that appears on their SERPs)</p>



<h2 class="wp-block-heading" id="mce_20">Will Instagram (or other platforms) Stories appear in the Visual Stories box?</h2>



<p>Based on Google&#8217;s announcement, Stories from other platforms will not appear on the Visual Stories box on Google&#8217;s SERPs. Also, I don&#8217;t know of any easy way to republish content from those platforms on your website as AMP Stories.</p>



<p>In my particular case, I have a travel blog in Spanish (<a href="https://randomtrip.es/">Randomtrip.es</a>) with Inês, my life partner, where we create lots of Stories on Instagram about the destinations we visit. We group those stories on Instagram by destination (so our followers can check them as a guide to each place) and for me this content has lots of potential but it&#8217;s really closed on Instagram. Recently Instagram developed the functionality to group and feature any of your stories on your profile, put them a name and link them externally, but you still need an Instagram account to visualized them</p>



<p>For example, <a href="https://www.instagram.com/s/aGlnaGxpZ2h0OjE3OTA4Mzk3MDc3MjcwNzYz/?utm_source=ig_story_highlights_share&amp;igshid=1se9qzwxquhk3">in this link you can check our Stories about visiting «La Guajira», in Colombia</a>. That content would be a good match to appear in these new «Visual Stories» box for people searching for «Things to do in La Guajira», but it will not as it&#8217;s closed inside the Instagram platform. </p>



<p>I would love that all that content we have created to be discoverable by users in search, but we would need to replicate all that content «by hand» on our website (or using some tool to make it easier). Hopefully tools to automatically create AMP Stories from Instagram Stories (or Snapchat, or Facebook&#8230;) should be created soon.</p>



<h2 class="wp-block-heading" id="mce_15">Is Google forcing us to use AMP, abusing their market position?</h2>



<p>Well, in my opinion, kind of. There are also lots of misconceptions about how AMP works (you can read my previous posts about this subject <a href="https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/">here</a> and <a href="https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/">here</a>). </p>



<p>But essentially, when Google is forcing you to use a technology in order to appear on certain areas of their search results, they are prioritizing the tech over the functionality, and using this a way to promote the use of a certain technology (although AMP is an open-source project, Google is investing heavily on it and involved in it since the beginning)</p>



<p>AMP was born as a way to create really fast webpages for mobile easily, as speed is crucial on the mobile web and publishers were not fast enough. I appreciate that as a user, as I worked in a big media publisher and mobile speed was not the top priority nor something that was going to be fixed anytime soon; with AMP, we were forced to change that.</p>



<p>But, at the end, the benefits in terms of SEO of creating fast pages should be the same no matter what technology you use: speed should be measured in an objective way, and results that get below certain metrics should get the «lightning bolt» icon and/or whatever other mechanism of telling the user a result is fast Google may have. A fun example of this <a href="https://unlikekinds.com/article/google-amp-page-speed">can be found in this article</a>, where a publisher whose «normal website» is faster than their «AMP website» is forced to use AMP in order to appear on the Top Stories box.</p>



<p>Until now, having AMP does not offer you any «SEO benefits» on «normal» organic results (at least, <a href="https://www.seroundtable.com/google-amp-canonical-ranking-23308.html">that&#8217;s what Google says</a> and there is no proof yet on the contrary). The only place where AMP was being rewarded, because it was almost mandatory, was on the Top Stories box, where not only most of the results are AMP pages, but also they get a more appealing visual aspect which makes it easier for users to notice them.</p>



<p>I also understand the the «Stories» format is becoming a huge thing on mobile, and that right now it is really closed (it can only be consumed inside the platforms, whether it is Instagram, Snapchat, Facebook&#8230;), while AMP Stories is the contrary: it is on the open web, crawlable, indexable, accesible by anyone with a browser without the need to register on any platform.</p>



<p>But forcing that on the SERPs is a different «story». With the new «Visual Stories» box, it is completely mandatory to create your content not only using AMP, but the specific format of AMP Stories. Besides, this new box is not created based on demand (like the Top Stories box which existed before AMP and that is used to present to the user relevant information that already existed and was demanded on the web, or like the «Videos» box); in this case, no Stories content exist on the open web and probably it is not demanded by users: Google is forcing us and asking us to create that content from scratch if we want to appear on the first position for the queries that will trigger this kind of result. The «Stories» that actually exist on the web (the ones from Instagram, Snapchat, Facebook&#8230;) will not appear there.</p>



<h2 class="wp-block-heading" id="mce_33">Conclusion and summary </h2>



<ul class="wp-block-list"><li>Google is launching a new box inside their search results that will ONLY show AMP Stories</li><li>This box will appear for certain queries related to Travel, Gaming, Recipes, Movies, Tv Shows and Fashion</li><li>Normal, organic results will appear lower on the search results because of that.</li><li>Stories from other platforms will not appear in the box as Google cannot crawl them, nor they seem to have intention to include them</li><li>AMP Stories can include and links to other URLs.</li><li>Google is forcing webmasters to adopt their technology and format (AMP Stories) to appear in this new box.</li></ul>



<p>This will be both a problem and an opportunity to many websites, but it will hugely depend on how results are selected and ranked. We will know soon!</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/seo/amp-stories-seo/">Google is giving AMP Stories a VIP ticket on the SERPs. How is this going to impact SEO?</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/seo/amp-stories-seo/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>SEO for Progressive Web APPs (PWA) and JavaScript sites</title>
		<link>https://www.christianoliveira.com/blog/en/seo-progressive-web-apps-pwa/</link>
					<comments>https://www.christianoliveira.com/blog/en/seo-progressive-web-apps-pwa/#respond</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Mon, 02 Jul 2018 17:23:19 +0000</pubDate>
				<category><![CDATA[En]]></category>
		<guid isPermaLink="false">https://www.christianoliveira.com/blog/?p=1833</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/en/seo-progressive-web-apps-pwa/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-index-js-two-waves-150x150.jpg" class="alignleft tfe wp-post-image" alt="Diagram showing how Google index JS sites in two phases" decoding="async" loading="lazy" /></a>This post is a summary of the talk Natzir Turrado and myself did at Congreso Web in Zaragoza (Spain) and at the Lisbon SEO meetup (Portugal) (get the slides here), where we try to explain this technology and how SEOs and developers have to deal with it in order to make it accessible to search [&#8230;]</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/en/seo-progressive-web-apps-pwa/">SEO for Progressive Web APPs (PWA) and JavaScript sites</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1833&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;SEO for Progressive Web APPs (PWA) and JavaScript sites&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
<span style="font-weight: 400;">This post is a summary of the talk </span><a href="https://www.analistaseo.es/"><span style="font-weight: 400;">Natzir Turrado</span></a><span style="font-weight: 400;"> and myself did at </span><a href="https://congresoweb.es/"><span style="font-weight: 400;">Congreso Web</span></a><span style="font-weight: 400;"> in Zaragoza (Spain) and at the </span><a href="https://www.meetup.com/es-ES/Lisbon-SEO-Search-Engine-Optimization-Meetup/events/250906778/"><span style="font-weight: 400;">Lisbon SEO meetup</span></a><span style="font-weight: 400;"> (Portugal) (<a href="https://www.slideshare.net/christianoliveira/seo-for-progressive-web-apps-pwa-and-js-frameworks">get the slides here</a>), where we try to explain this technology and <strong>how SEOs and developers have to deal with it in order to make it accessible to search engines</strong>. We based this talk on our experience with clients that use Javascript Frameworks like Angular or React, friends or colleagues that have shared the data with us and on experiments we did in order to understand how search engines behave with Javascript. These are the points we are going to talk about:</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">What is a PWA and how it works</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">How search engines deal with Javascript (JS)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Rendering approaches for JS sites</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Good practices for PWA and JS sites</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Experiment: PWA without prerender (CSR)</span></li>
<li style="font-weight: 400;">Conclusion</li>
</ol>
<p><span style="font-weight: 400;">Nowadays there are different solutions to solve mobile users’ needs. For example, at elmundo.es, if they want to offer a satisfactory experience to all the users that consume their news articles, they need to make sure that they serve each page currently in different ecosystems: mobile version and desktop version (with Dynamic Serving), APP (offline and more fluid navigation, and push notifications), AMP (as a requirement to appear on the Top Stories carrousel) and Facebook Instant Articles (Facebook’s AMP approach).</span></p>
<p><span style="font-weight: 400;">As you can see, those are a lot of ecosystems to be supported aside from the main website, and this is expensive and not very scalable for business. </span></p>
<p><span style="font-weight: 400;">If we talk about </span><b>native APPs</b><span style="font-weight: 400;">, these are the most common cons:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">They are normally </span><a href="https://www.appsterhq.com/blog/app-development-cost/"><span style="font-weight: 400;">more expensive than a normal website or web app</span></a><span style="font-weight: 400;">. The price can vary from 25.000€ to 600.000€, being 150.000€ on average</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">APP developers are scarce and highly demanded by startups, being offered very good salaries. In Barcelona, if you want to hire an APP developer, s/he probably is also on the recruitment process of Wallapop, Glovo, CornerJob or any other hot startup, and maybe you cannot compete with that.</span></li>
</ul>
<ul>
<li style="font-weight: 400;">In a native APP, <span style="font-weight: 400;"><a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem; font-weight: inherit;" href="https://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html">each step of the funnel costs you 20% of the users</a></span></li>
<li style="font-weight: 400;">It’s another channel in which you will have to invest (aside from your normal website)</li>
</ul>
<p><span style="font-weight: 400;">Another type of solution that exists nowadays, to solve more complex needs and heavier interactions on mobile, are the </span><b>Mobile Web Apps</b><span style="font-weight: 400;"> (on a m. subdomain for example). These ones have some cons too:</span></p>
<ul>
<li><span style="font-weight: 400;">They do not allow offline navigation</span></li>
<li>They are not indexable on APP stores.</li>
<li>It’s more difficult to implement Responsive Web Design (RWD) with them</li>
<li>It’s an extra technology you <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem; font-weight: inherit;" href="https://www.comentum.com/web-development-cost-rate-comparison.html">would need to develop</a><span style="font-weight: 400;"> and maintain for different browsers and devices.</span></li>
</ul>
<p><span style="font-weight: 400;">Fortunately, nowadays there is a new development solution, initiated by Google, that has the best of both worlds, the </span><strong><a href="https://developers.google.com/web/progressive-web-apps/">Progressive Web Apps (PWA)</a></strong></p>
<h2><b>What is a PWA and how it works</b></h2>
<p><span style="font-weight: 400;">A PWA is a web page that works for all users and all devices, but with the fluid experience of a native APP. This is a great advantage for websites with complex interactions. For example, if you navigate in your smartphone&#8217;s browser to Twitter and Instagram you will access their PWAs. There is no reason to use their native APPs, that consume lots of resources on the background, when you can just use their PWAs, install them on your home screen and be able to access Twitter and Instagram with most of their functionalities. Besides, it seems that Twitter is thinking about no longer maintaining their APP, as well as </span><a href="https://formidable.com/work/starbucks-progressive-web-app/"><span style="font-weight: 400;">Starbucks</span></a><span style="font-weight: 400;">. </span><span style="font-weight: 400;">We suppose they will wait to get more users to add their PWA to their homescreen and to </span><a href="https://developers.google.com/web/showcase/2017/twitter"><span style="font-weight: 400;">keep up the good numbers</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">Some of the <strong>advantages of Progressive Web APPs</strong> are:</span></p>
<ul>
<li><span style="font-weight: 400;">They are APPs that can be indexed on search engines (bye bye APP indexing).</span></li>
<li><span style="font-weight: 400;">They can also be indexed on APP stores</span></li>
<li>They allow one-click purchases with the <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem; font-weight: inherit;" href="https://developers.google.com/web/fundamentals/payments/?hl=es">payment request api</a><span style="font-weight: 400;">. This is one of the greatest advantages, taking into account that the abandon rate for card payments on mobile is 80%</span></li>
<li>They allow push notifications</li>
<li>They are progressive and responsive</li>
<li>Easily shareable and likable (each content has its own URLs, same as on any website)</li>
<li>Users do not need to install them on their smartphones</li>
<li>We will see them on desktop soon (<a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem; font-weight: inherit;" href="https://medium.com/@kennethrohde/progressive-web-apps-coming-to-all-chrome-platforms-80e31272e2a8">you can already “install” them on Chrome Os since almost one year ago</a><span style="font-weight: 400;">)</span></li>
<li>You can use them offline</li>
<li>They enable faster transitions</li>
</ul>
<p><img loading="lazy" decoding="async" width="832" height="362" class="aligncenter size-full wp-image-1834" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-main-advantages.jpg" alt="PWA main advantages" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-main-advantages.jpg 832w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-main-advantages-250x109.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-main-advantages-768x334.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-main-advantages-700x305.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-main-advantages-120x52.jpg 120w" sizes="auto, (max-width: 832px) 100vw, 832px" /></p>
<p><span style="font-weight: 400;">We are not saying that PWAs are better than native APPs, but their advantages </span><a href="https://www.smashingmagazine.com/2018/02/native-and-pwa-choices-not-challengers/"><span style="font-weight: 400;">will probably influence developers into not choosing to develop a native APP</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">PWA can have a </span><a href="https://gtmetrix.com/blog/first-contentful-paint-explained/"><span style="font-weight: 400;">First Contentful Pain</span></a><span style="font-weight: 400;"> faster than a normal website and faster and more fluid next interactions, like a native APP. It’s an important feature as load speed is the UX element that 75% of users care more about, according to </span><a href="http://www.awwwards.org/brainfood-mobile-performance-vol3.pdf"><span style="font-weight: 400;">this Google study</span></a><span style="font-weight: 400;">. It seems that slow websites can be more stressful than watching an horror movie (</span><a href="https://www.ericsson.com/assets/local/mobility-report/documents/2016/ericsson-mobility-report-feb-2016-interim.pdf"><span style="font-weight: 400;">according to this study from Ericsson ConsumerLab</span></a><span style="font-weight: 400;">) and this means that you can lose up to 53% of your users if your mobile website takes more than 3 seconds to load, according to </span><a href="https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/"><span style="font-weight: 400;">this other study from Google and SOASTA</span></a></p>
<p><span style="font-weight: 400;">Progressive Web Apps are developed using <strong>Javascript frameworks and libraries</strong>, which are becoming a standard as they make it easier for developers. This approach have the following advantages:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">It’s easier for developers to jump in PWA. They are modular, clean and facilitate core code reusability. Also, there is a big and collaborative community behind.</span></li>
<li style="font-weight: 400;">Better performance and speed (for servers especially when using Client Side Rendering as we will see later).</li>
<li style="font-weight: 400;">Cheaper, as they are open source and it’s easier to find developers. The are new and better frameworks appearing all the time (Vue JS for example is much easier to learn than React JS, <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem; font-weight: inherit;" href="https://twitter.com/HTTPArchive/status/1001603535308509184">one of the reasons why it’s overcoming it</a><span style="font-weight: 400;">)</span></li>
<li style="font-weight: 400;">They are a safer bet because of the big community and the big players involved (Google is behind Angular and Facebook is behind React JS)</li>
</ul>
<p><span style="font-weight: 400;">For all these reasons, PWA are here to stay, so both SEOs and search engines need to deal with it, as their growth is unstoppable.</span></p>
<p><span style="font-weight: 400;">According to the </span><a href="https://insights.stackoverflow.com/survey/2017#technology"><span style="font-weight: 400;">Stack Overflow’s “2017 Developer Survey”</span></a><span style="font-weight: 400;"> (which 64000 developers answered), JavaScript is the most popular programming language and Node JS, Angular and React JS are in the top 5 most popular development technologies. </span></p>
<h2><b>How Progressive Web Apps work</b></h2>
<p><span style="font-weight: 400;">A PWA is a <strong>SPA/MPA</strong> (Single Page Application or Mutiple Page Application) which has two extra functionalities that makes it work: the </span><a href="https://developers.google.com/web/fundamentals/primers/service-workers/?hl=es"><span style="font-weight: 400;">service worker</span></a><span style="font-weight: 400;"> and the </span><a href="https://developers.google.com/web/fundamentals/web-app-manifest/?hl=es"><span style="font-weight: 400;">manifest</span></a></p>
<p><span style="font-weight: 400;">The </span><b>service worker</b><span style="font-weight: 400;"> is the magic of PWA: it allows background synchronization, offline navigation and push notifications.</span></p>
<p><span style="font-weight: 400;">It works as a controller and in the middle of the client (the browser) and the server. It tells the browser cache to store files that have been already downloaded so, later on, the user is able to access the pages without downloading them again (that’s why it’s possible to navigate offline)</span></p>
<p><span style="font-weight: 400;">The </span><b>manifest</b><span style="font-weight: 400;"> is a small JSON file included on the head of the HTML document. Among other things, the main functionality of this file is to allow a PWA to be installed in the home screen of the user’s smartphone so it can be used as an APP</span></p>
<p><span style="font-weight: 400;">With </span><a href="https://www.pwabuilder.com/"><span style="font-weight: 400;">Microsoft’s PWA Builder</span></a><span style="font-weight: 400;"> you can easily create both a manifest and a service worker for your website. If you want to learn more about how to create a PWA, </span><a href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es"><span style="font-weight: 400;">Google has a very useful tutorial</span></a></p>
<p><span style="font-weight: 400;">Nowadays all major browsers support PWA, but not all browsers support all the functionalities of PWA. Fortunately, this is changing fast as you can check on the “</span><a href="https://caniuse.com/"><span style="font-weight: 400;">Can I use</span></a><span style="font-weight: 400;">” website</span></p>
<p><img loading="lazy" decoding="async" width="854" height="396" class="aligncenter size-full wp-image-1835" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-browser-compatibility-features.jpg" alt="PWA: browser compatibility with each feature" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-browser-compatibility-features.jpg 854w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-browser-compatibility-features-250x116.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-browser-compatibility-features-768x356.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-browser-compatibility-features-700x325.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-browser-compatibility-features-120x56.jpg 120w" sizes="auto, (max-width: 854px) 100vw, 854px" /></p>
<h2><b>How search engines deal with Javascript nowadays</b></h2>
<p><span style="font-weight: 400;">Nowadays only Google and ASK render Javascript in a “decent” way. Baidu announced that they also do it, but after doing some tests, it seems that they don’t do it as well as Google or ASK. So, if your business is in USA, Russia or China, you cannot depend on Bing, Yahoo, Yandex or Baidu to render your JS website and you will have to make sure your content and links are working without JS.</span></p>
<h3><b>Crawling != Rendering != Indexing != Ranking</b></h3>
<p><span style="font-weight: 400;">When we talk about the abilities of a Search Engine to render JS, this kind of tests you see here are usually made. For example, doing a “site:” for a site that depends on JS to be visualised and crawled:</span></p>
<p><img loading="lazy" decoding="async" width="773" height="415" class="aligncenter size-full wp-image-1836" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/search-engines-indexing-js-frameworks.jpg" alt="Different search engines indexing JS frameworks" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/search-engines-indexing-js-frameworks.jpg 773w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/search-engines-indexing-js-frameworks-250x134.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/search-engines-indexing-js-frameworks-768x412.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/search-engines-indexing-js-frameworks-700x376.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/search-engines-indexing-js-frameworks-120x64.jpg 120w" sizes="auto, (max-width: 773px) 100vw, 773px" /></p>
<p><span style="font-weight: 400;">As you can see, the number of indexed pages varies in each of these search engines, but besides that, the fact that a search engine has a given number of URLs indexed <strong>doesn’t mean that they discovered them after rendering the page, nor that it is able to see 100% of what is in them</strong> (there may be external links pointing to different URLs of that site and the search engine just discover those URLs there, without being able to see what’s in them)</span></p>
<p><span style="font-weight: 400;">So if for example you try to search for some of the exact text strings of a JS site in different search engines, you will see that in some cases Google is the only one able to see and index that content.</span></p>
<h3><b>Rendering a JS site costs a lot</b></h3>
<p><span style="font-weight: 400;">So, if PWA are a trendy thing right now, and lots of websites are using JS, why not all search engines are already rendering JS? It’s simple: because it costs a lot (both resources and money)</span></p>
<p><span style="font-weight: 400;">According to a study made with the top 500 sites on archive.org, </span><a href="https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e"><span style="font-weight: 400;">50% of the websites take an average of 14s in allowing the user to interact on mobile</span></a><span style="font-weight: 400;">, which is too much time.</span></p>
<p><span style="font-weight: 400;">Here it’s important to understand that a JS file of 170KB is not the same as an image of 170KB: although the browser will spend more or less the same time downloading both files, the image will be rendered and visible to the user very fast (in milliseconds), while the JS has to be parsed, compiled and executed by the browser, consuming more resources and time.</span></p>
<p><span style="font-weight: 400;">To get an idea of how much does it cost to render JS for a crawler, we have </span><a href="https://ahrefs.com/blog/crawling-javascript/"><span style="font-weight: 400;">the numbers ahrefs shared</span></a><span style="font-weight: 400;">. Each 24h:</span></p>
<ul>
<li><span style="font-weight: 400;">They crawl 6 billion pages</span></li>
<li>They render 30 million pages</li>
<li>For that, they use 400 servers.</li>
</ul>
<p><span style="font-weight: 400;">If you do some maths, for each page they render, they crawl 200 pages. According to themselves, if they decide to crawl and render all the URLs they have on their index with this same pace, they estimate they would need between 10.000 and 15.000 extra servers (between 20 and 30 times more servers), so you can imagine the amount of money that would be (machines, electricity, maintenance…)</span></p>
<h3><b>Google won’t wait indefinitely to render a page</b></h3>
<p><span style="font-weight: 400;">Because of the high cost of rendering JS, we have another factor here: Google can’t wait indefinitely to render a page.</span></p>
<p><span style="font-weight: 400;">Although </span><a href="https://twitter.com/JohnMu/status/999580194582286336"><span style="font-weight: 400;">they already said on Twitter that there is not a pre-defined maximum time</span></a><span style="font-weight: 400;">, according to several tests we have seen or done, the reference number to be on the safe side is 5 seconds.</span></p>
<p><span style="font-weight: 400;">This was discovered by chance by Natzir because a client wanted to hide a popup and a language selector modal so </span><a href="https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html"><span style="font-weight: 400;">Google didn’t consider them intrusive</span></a><span style="font-weight: 400;">. What he did was loading them after the “document ready” event so they didn’t appear on the DOM, and try with different amounts of seconds to see if Google was seeing them or not. Finally, he observed that with more than 5 seconds, the popup and the modal didn’t appear o the render nor on Google&#8217;s cache. But if you want to be sure, it&#8217;s better to make those elements load after the user interacts, so Google won&#8217;t execute it.</span></p>
<p><span style="font-weight: 400;">Warning! This a reference number, not a rule! It can vary between websites and also through time (<a href="https://www.mecagoenlos.com/Posicionamiento/la-segunda-ola-de.php">Lino has checked that it can be more than 5 seconds</a>). If you want to make sure Google is able to render and see all your content, besides checking it on the index, the best way is to check how your pages are rendering on the </span><a href="https://search.google.com/test/mobile-friendly"><span style="font-weight: 400;">Mobile-Friendly Test Tool</span></a><span style="font-weight: 400;">, and try to make your website to render as fast as possible.</span></p>
<h3><b>Google renders JS in 2 phases</b></h3>
<p><span style="font-weight: 400;">In the last Google I/O, </span><a href="https://youtu.be/PFwUbgvpdaQ"><span style="font-weight: 400;">Google confirmed what we have been noticing for some time</span></a><span style="font-weight: 400;">: that JS sites are indexed in 2 phases</span></p>
<p><img loading="lazy" decoding="async" width="635" height="376" class="aligncenter size-full wp-image-1837" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-index-js-two-waves.jpg" alt="Diagram showing how Google index JS sites in two phases" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-index-js-two-waves.jpg 635w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-index-js-two-waves-250x148.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-index-js-two-waves-120x71.jpg 120w" sizes="auto, (max-width: 635px) 100vw, 635px" /></p>
<p><span style="font-weight: 400;">If you a geek like us, you will find curious to know that before </span><a href="https://ai.google/research/pubs/pub36726"><span style="font-weight: 400;">Percolator</span></a><span style="font-weight: 400;"> (</span><a href="https://www.analistaseo.es/posicionamiento-buscadores/frecuencia-rastreo/"><span style="font-weight: 400;">Natzir talked about it here</span></a><span style="font-weight: 400;">), Google used </span><a href="https://ai.google/research/pubs/pub62"><span style="font-weight: 400;">MapReduce</span></a><span style="font-weight: 400;"> and </span><a href="https://ai.google/research/pubs/pub51"><span style="font-weight: 400;">Google File System</span></a><span style="font-weight: 400;"> (thanks to those, </span><a href="http://hadoop.apache.org/"><span style="font-weight: 400;">Hadoop</span></a><span style="font-weight: 400;"> was born). Simplifying a lot, before this new architecture, Google worked in batch, and now it works on the fly. This makes crawled pages to be indexed instantly.</span></p>
<p><span style="font-weight: 400;">The problem is with JS sites, as Google needs to render them to see the content and the links; if not, </span><b>Google would be missing a big part of the web</b><span style="font-weight: 400;">. As we have seen before, rendering costs a lot and cannot be done instantly as that would make Google spend way more resources easily. They need to index JS sites in two phases.</span></p>
<p><span style="font-weight: 400;">So they included a </span><a href="https://developers.google.com/search/docs/guides/rendering"><span style="font-weight: 400;">WRS subsystem</span></a><span style="font-weight: 400;"> in Caffeine, </span><b>based on Chrome 41</b><span style="font-weight: 400;">, which has serious implications that both SEOs and developers must take into account.</span></p>
<blockquote><p>Update May 2019: <a href="https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html">Googlebot will use the latest version of Chromium from now on (74 at the time of this post)</a>, allowing it to use +1000 new features. This does not change anything regarding the 2 waves of indexing and the official SEO recommendations if you have a PWA or a site that depends on JS to display content.</p></blockquote>
<p><span style="font-weight: 400;">One of the things that affect us and that we need to understand is that <strong>canonical and rel=amphtml tags, and HTTP status are read and processed only on the first wave</strong> (on the initial fetch of the page) and there is no second chance. We didn’t have any idea about the rel=amphtml until John Mueller said it, but it makes sense.</span></p>
<p><span style="font-weight: 400;">Regarding the canonical tag, it’s a difficult topic. Even if</span><a href="https://twitter.com/JohnMu/status/994713207913639939"><span style="font-weight: 400;"> Google said that they only read the tag on the first fetch, and not after rendering the page</span></a><span style="font-weight: 400;">, there has been </span><a href="https://twitter.com/thetafferboy/status/999216199333564416"><span style="font-weight: 400;">cases where they actually did it</span></a><span style="font-weight: 400;">. The amazing </span><a href="https://www.rebelytics.com/"><span style="font-weight: 400;">Eoghan Henn</span></a> <a href="https://www.searchviu.com/en/javascript-canonical-tags/"><span style="font-weight: 400;">setted up a test where he demonstrated that Google was actually reading the canonical tags on the rendered version and applying them</span></a></p>
<p><span style="font-weight: 400;">Even if it works sometimes, that doesn’t mean is a good approach to have canonical tags only in the JS rendered version of the page, as serving it on the initial fetch is the only way to guarantee that Google will see the tag.</span></p>
<p><span style="font-weight: 400;">On the other side, Google said that if noindex, hreflang and rel=next/prev tags are not on the raw HTML, but on the JS rendered version of the page, it’s ok (as they will read the tags after rendering the page). </span></p>
<p><span style="font-weight: 400;">Same as with the canonical tag, even if Google is able to read and process these tags on the rendered version of the page, </span><a href="https://www.deepcrawl.com/blog/news/google-webmaster-hangout-notes-may-29th-2018/#adding-noindex-with-javascript-isnt-recommended-use-static-html"><span style="font-weight: 400;">we would not recommend to depend on it and the best option is to serve those tags directly on the raw html</span></a><span style="font-weight: 400;">, to make sure Google is able to read them on the first place. Given that Google delays JS rendering, if that delay is long (some days, for example), we would have pages with noindex, that should not be on the index, but that will be for those days until Google finally renders the page and see that tag.</span></p>
<p><span style="font-weight: 400;">So, as a good practice, </span><b>it’s better to always give Google and other bots the meta tags directly on the raw HTML</b></p>
<p><span style="font-weight: 400;">Other consequence of Google using Chrome 41, is that it cannot render completely websites that use </span><a href="https://www.chromestatus.com/features#milestone%3C%3D41"><span style="font-weight: 400;">more advanced functionalities not supported by that version of Chrome</span></a><span style="font-weight: 400;">. If we want to use any of those modern functionalities, we need to make sure that they work on Chrome 41, or find alternatives that do.</span></p>
<h3><b>Types of events and links that Google follows</b></h3>
<p><span style="font-weight: 400;">Knowing what types of JS events and links Google follows is important as the </span><a href="https://www.youtube.com/watch?v=vFxgYrbzwcs&amp;t=20m05s"><span style="font-weight: 400;">indexed URLs are the ones taken into account to evaluate the quality of a website</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">We know that Google crawls, index and pass PageRank to HTML links (&lt;a href=&#8230;) as they confirmed again on the Google I/O:</span></p>
<ul>
<li><span style="font-weight: 400;">&lt;a href=»/this-link»&gt; will be crawled &lt;/a&gt;</span></li>
<li>&lt;a href=»/this-link» onclick=»cambioPagina(&#8216;este-link&#8217;)»&gt; will be crawled &lt;/a&gt;</li>
<li>&lt;a onclick=»changePage(‘this-link’)»&gt; *won’t be crawled &lt;/a&gt;</li>
<li>&lt;span onclick=»changePage(‘this-link’)»&gt; *won’t be crawled &lt;/span&gt;</li>
</ul>
<p><span style="font-weight: 400;">*Not being crawled doesn’t mean that if someone links to that URL it won&#8217;t get indexed by Google. Most of the errors of indexed filters come from problems like this.</span></p>
<p><span style="font-weight: 400;">We also know that Google crawls and index </span><a href="https://searchengineland.com/google-unlinked-urls-are-a-source-for-indexing-new-content-171641"><span style="font-weight: 400;">anything that seems like a URL, because they want to discover new URLs</span></a><span style="font-weight: 400;">, but they won’t pass PageRank (doesn’t mean they won’t appear if you search):</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">&lt;a onclick=»changePage(&#8216;/this-link’)»&gt; will be crawled &lt;/a&gt;</span></li>
<li style="font-weight: 400;">&lt;span onclick=»changePage(&#8216;/this-link’)»&gt; will be crawled &lt;/span&gt;</li>
<li style="font-weight: 400;">/this-link will be crawled</li>
</ul>
<p><span style="font-weight: 400;">I believe it was 7 years ago, when in the Webmaster Tools (now Search Console) of a client, a lot of 404s started appearing, at the same time a Google Analytics virtual page implementation was made. Since then, I include anything that appears on the html and looks like a URL on the robots.txt, although the best approach is to modify the code so they don’t look like URLs.</span></p>
<p><span style="font-weight: 400;">There are also other type of events: </span><b>onscroll</b><span style="font-weight: 400;"> and </span><b>onmouseover</b><span style="font-weight: 400;">. Onscroll events are executed sometimes, while </span><a href="https://www.youtube.com/watch?v=96RUYb0h46Q#t=2131"><span style="font-weight: 400;">onmouseover events are not executed</span></a></p>
<p><span style="font-weight: 400;">If you have a pagination implemented with onscroll, the first pages can get indexed. One of those things that you discover by chance and that </span><a href="https://twitter.com/natzir9/status/920629878294278145"><span style="font-weight: 400;">later on Google confirms</span></a></p>
<h2><b>Rendering approaches for JS sites</b></h2>
<p><span style="font-weight: 400;">In order to understand the different rendering options for JS sites, the easiest way is to imagine PWA as the IKEA of internet:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Traditionally, when we (clients) want to buy furniture, we go to a specialised shop (a company), buy the furniture and the company delivers to us the final product, ready to use.</span></li>
<li style="font-weight: 400;">Later on IKEA appeared, where the client choose the furniture, but instead of receiving the final product, s/he receives different parts and some instructions on how to assemble it, so the client is the one that needs to perform the physical task of assembling the furniture in order to get the final product s/he bought. Besides, sometimes, in order to assemble the product, the client needs to buy extra things from the company (special screws, special tools, etc.). Everything comes on the instructions.</li>
<li style="font-weight: 400;">After some time, IKEA noticed that some clients wanted their products, but didn’t want to assembly the products themselves: they wanted the final product directly. So IKEA launched a new service: you can buy furniture and get someone from IKEA to mount it for you, so you receive the final product.</li>
</ul>
<p><span style="font-weight: 400;">With this analogy, the client would be our web browser, and IKEA would be the server. Based on that, we have 4 different scenarios when choosing a rendering system:</span></p>
<h3><b>Client Side Rendering (CSR)</b></h3>
<p><span style="font-weight: 400;">When we talk about pure Client Side Rendering, the client (the web browser), receives an almost blank html on the initial fetch, and the browser is the one that needs to work to “create” the final html based on the resources and JS (instructions) that receives from the server:</span></p>
<p><img loading="lazy" decoding="async" width="819" height="379" class="aligncenter size-full wp-image-1838" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/client-side-rendering-pwa.jpg" alt="How Client Side Rendering (CSR) works on PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/client-side-rendering-pwa.jpg 819w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/client-side-rendering-pwa-250x116.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/client-side-rendering-pwa-768x355.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/client-side-rendering-pwa-700x324.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/client-side-rendering-pwa-120x56.jpg 120w" sizes="auto, (max-width: 819px) 100vw, 819px" /></p>
<p><span style="font-weight: 400;">This is the option that PWA developers initially used (and in a lot of cases, they continue using), and it is the worst one in terms of SEO, as without executing the JS and rendering the page, there is nothing (no content, no links)</span></p>
<h3><b>Server Side Rendering (SSR)</b></h3>
<p><span style="font-weight: 400;">Due to the SEO problems with CSR, and the same way IKEA did, JS frameworks started developing new functionalities that solved the problem: without losing the PWA advantages, the server will execute and render the page itself and send the final html to the client:</span></p>
<p><img loading="lazy" decoding="async" width="784" height="382" class="aligncenter size-full wp-image-1839" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/server-side-rendering-pwa.jpg" alt="How Server Side Rendering (SSR) works on PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/server-side-rendering-pwa.jpg 784w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/server-side-rendering-pwa-250x122.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/server-side-rendering-pwa-768x374.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/server-side-rendering-pwa-700x341.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/server-side-rendering-pwa-120x58.jpg 120w" sizes="auto, (max-width: 784px) 100vw, 784px" /></p>
<p><span style="font-weight: 400;">This way, the client (the web browser) receives a final HTML with content and links, without needing to execute and render JavaScript. If JavaScript is enabled, it will then take control of the page and the user can navigate/interact on “PWA mode”. If not, s/he can navigate/interact as in a “normal” webpage, without the PWA advantages</span></p>
<h3><b>Hybrid Rendering</b></h3>
<p><span style="font-weight: 400;">The third rendering option is a combination of the two previous ones: part of the page is sent pre-rendered from the server, and the rest needs to be rendered on the client.</span></p>
<p><span style="font-weight: 400;">A really common case of </span><a href="https://medium.com/dev-channel/building-a-hybrid-rendered-pwa-c9d645baf158"><span style="font-weight: 400;">Hybrid Rendering</span></a><span style="font-weight: 400;"> is pre-rendering those parts of the site that all pages on the PWA use (for example, a menu), and leave the specific parts (the main content) to be rendered by the client. In the next example, the “App Shell” (the top area, with blue background) would be sent by the server pre-rendered (SSR), while the area below (the main content) would not appear on the first fetch and would need to be rendered entirely by the client (CSR)</span></p>
<p><img loading="lazy" decoding="async" width="320" height="569" class="aligncenter size-full wp-image-1840" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/hybrid-rendering.gif" alt="Hybrid Rendering" /></p>
<h3><b>Dynamic Rendering (DR)</b></h3>
<p><span style="font-weight: 400;">This is the option Google recommended officially on Google I/O, and it basically consists on… ¡cloaking!</span></p>
<p><img loading="lazy" decoding="async" width="696" height="310" class="aligncenter size-full wp-image-1841" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering.jpg" alt="Dynamic Rendering, recommended by Google for PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering.jpg 696w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-250x111.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-120x53.jpg 120w" sizes="auto, (max-width: 696px) 100vw, 696px" /></p>
<p><span style="font-weight: 400;">Yes, you are reading it correctly. What they said is that if we have a PWA that depends on JS and rendering, and want to avoid problems with Googlebot (and other bots), we need to make sure that Googlebot (and other bots) receives a rendered version (SSR) and the rest of user-agents can receive whatever we consider better (CSR, or Hybrid Rendering). This way, Googlebot will be able to see all the content and links without having to render the page. Basically, the content that Google will see it’s the same one the users will see once the page is rendered on their browsers.</span></p>
<p><span style="font-weight: 400;">A clear example of a big website that is applying this method, and that belongs to Google itself, is Youtube. In the following screenshots (</span><a href="https://technicalseo.com/seo-tools/fetch-render/"><span style="font-weight: 400;">you can try it yourself with this tool</span></a><span style="font-weight: 400;">) you can see that when visiting a video URL, if the User Agent is Googlebot, the server sends directly the final page with the content and links. If the user agent is a “normal user”, the server sends an empty html, with just the structure and with no content nor links:</span></p>
<p><img loading="lazy" decoding="async" width="786" height="295" class="aligncenter size-full wp-image-1842" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-youtube.jpg" alt="How Youtube does Dynamic Rendering" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-youtube.jpg 786w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-youtube-250x94.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-youtube-768x288.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-youtube-700x263.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/dynamic-rendering-youtube-120x45.jpg 120w" sizes="auto, (max-width: 786px) 100vw, 786px" /></p>
<h3><b>SSR better for users, CSR better for servers</b></h3>
<p><span style="font-weight: 400;">What strategy is the best for each case? For users, at least for the first interaction, the best option is SSR:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Netflix, which is a PWA built with React, and that has invested a lot on working with this technology, </span><a href="https://jakearchibald.com/2017/netflix-and-react/"><span style="font-weight: 400;">saw a 50% performance improvement </span></a><span style="font-weight: 400;">on their landing pages (those they use to acquire users) by moving from CSR to SSR</span></li>
<li style="font-weight: 400;">Walmart got to the same conclusion, where now most of their pages work with SSR</li>
</ul>
<p><span style="font-weight: 400;">Why? It’s simple. Let’s recap how both techniques work:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">With SSR, the server sends the “final” HTML, with all the content and links “ready to see”, without need of rendering on the client (the web browser)</span></li>
<li style="font-weight: 400;">With CSR, the server sends an empty html, which needs then to be “completed” by the client (the web browser) executing the JS and rendering the page.</li>
</ul>
<p><span style="font-weight: 400;">This implies that:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">With CSR, the server answers faster (so we can have a better TTFB), while with SSR the server has to use more resources to render and it takes more time to answer</span></li>
<li style="font-weight: 400;">With SSR, the client (the web browser) receives a “final” HTML, that can be painted faster so the user can see the content faster. With CSR, on the other side, depending on the device of the client, it will take more or less time to render and paint the page.</li>
</ul>
<p><span style="font-weight: 400;">As you can see on this image with the tests made by Walmart, with SSR the client starts seeing the content sooner, even if the server takes a bit more of time to answer:</span></p>
<p><img loading="lazy" decoding="async" width="1038" height="341" class="aligncenter size-full wp-image-1843" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/walmart-performance-ssr-vs-csr-pwa.png" alt="Walmart performance study comparing SSR vs CSR on a PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/walmart-performance-ssr-vs-csr-pwa.png 1038w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/walmart-performance-ssr-vs-csr-pwa-250x82.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/walmart-performance-ssr-vs-csr-pwa-768x252.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/walmart-performance-ssr-vs-csr-pwa-700x230.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/walmart-performance-ssr-vs-csr-pwa-120x39.png 120w" sizes="auto, (max-width: 1038px) 100vw, 1038px" /></p>
<p><span style="font-weight: 400;">So, if CSR is worse for SEO (because we depend on the search engines’ capacity of rendering the page), and SSR is faster for users, why would anyone use CSR? Because of the same reason IKEA sells furniture by pieces: it’s cheaper.</span></p>
<p><span style="font-weight: 400;">The biggest advantage of CSR is that it’s cheaper for the IT department: as all the rendering and execution of JS happens on the client, the server is less loaded. If we move to SSR, all that work will happen on the server, which can be very expensive as we have already seen.</span></p>
<h3><b>Google’s official recommendation</b></h3>
<p><span style="font-weight: 400;">As we said before, Google recommends Dynamic Rendering (that is, SSR at least for Googlebot), but they also announced that in some cases they feel capable of fully see and index small pure CSR sites. </span></p>
<p><span style="font-weight: 400;">They specifically talked about three factors:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">The size of the site (the number of URLs)</span></li>
<li style="font-weight: 400;">How dynamic the site is (if it publish a lot or few times, if the content of the URLs is static or it changes a lot)</li>
<li style="font-weight: 400;">Compatibility with Chrome 41</li>
</ul>
<p><span style="font-weight: 400;">Based on that, these would be Google’s recommendations for each case:</span></p>
<p><img loading="lazy" decoding="async" width="787" height="312" class="aligncenter size-full wp-image-1844" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-recommendartions-for-pwa.jpg" alt="Google's recommendations for PWAs" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-recommendartions-for-pwa.jpg 787w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-recommendartions-for-pwa-250x99.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-recommendartions-for-pwa-768x304.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-recommendartions-for-pwa-700x278.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-recommendartions-for-pwa-120x48.jpg 120w" sizes="auto, (max-width: 787px) 100vw, 787px" /></p>
<blockquote><p>Update May 2019: <a href="https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html">Googlebot will use the latest version of Chromium from now on (74 at the time of this post)</a>, allowing it to use +1000 new features. This does not change anything regarding the 2 waves of indexing and the official SEO recommendations if you have a PWA or a site that depends on JS to display content.</p></blockquote>
<p><span style="font-weight: 400;">As you can see, the best option is to always use SSR (or Dynamic Rendering) except in smaller, static sites. Even in that case, a certain risk exist also for these sites, so if your project depends on SEO traffic, the best way is to use SSR/DR in all the scenarios.</span></p>
<p><span style="font-weight: 400;">Here you can clearly see what kind of problems CSR generate, in this </span><a href="https://twitter.com/badams/status/1001387795628331008"><span style="font-weight: 400;">tweet by Barry Adams</span></a></p>
<p><img loading="lazy" decoding="async" width="778" height="838" class="aligncenter size-full wp-image-1845" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/barry-adams-tweet-pwa-csr-vs-ssr.png" alt="Barry Adams' tweet on CSR vs SSR" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/barry-adams-tweet-pwa-csr-vs-ssr.png 778w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/barry-adams-tweet-pwa-csr-vs-ssr-250x269.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/barry-adams-tweet-pwa-csr-vs-ssr-768x827.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/barry-adams-tweet-pwa-csr-vs-ssr-700x754.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/barry-adams-tweet-pwa-csr-vs-ssr-120x129.png 120w" sizes="auto, (max-width: 778px) 100vw, 778px" /></p>
<p><span style="font-weight: 400;">You can see a graph with the evolution of valid indexed pages in a PWA that was implemented with pure CSR and that eventually changed to SSR. After doing that, the number of indexed pages increased a lot (almost double), reflecting the bottleneck that Google has rendering JS, and the reason they don’t recommend depending on it for big sites. </span></p>
<h2><b>Good practices for PWA and JS sites</b></h2>
<p><span style="font-weight: 400;">Here we recommend some tools to check if Google has problems rendering our JS site.</span></p>
<h3><b>PWA and performance audit</b></h3>
<p><span style="font-weight: 400;">You can do this audit using </span><a href="https://developers.google.com/web/tools/lighthouse/"><span style="font-weight: 400;"> </span><span style="font-weight: 400;">Lighthouse for Chrome</span></a><span style="font-weight: 400;"> and </span><a href="https://sonarwhal.com"><span style="font-weight: 400;">S</span><span style="font-weight: 400;">onar Whal</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">With the Chrome plugin </span><a href="https://chrome.google.com/webstore/detail/service-worker-detector/ofdigdofloanabjcaijfidkogmejlmjc"><span style="font-weight: 400;">Service Worker Detector</span></a><span style="font-weight: 400;">, you can easily check the service worker and the manifest on any PWA.</span></p>
<h3><b>Mobile-Friendly Test</b></h3>
<p><span style="font-weight: 400;">Nowadays, the </span><a href="https://search.google.com/test/mobile-friendly"><span style="font-weight: 400;">Mobile-Friendly Test tool from Google</span></a><span style="font-weight: 400;"> is the best way to see how Google renders a page, as it is, in theory, the closest one to what Googlebot actually does. It’s better than the “Fetch and Render” tool on Search Console, as in SC there are more timeouts and the result is not 100% real. The Mobile-Friendly Test is not 100% real also, but it is closer to reality. The problem with the tool is that we cannot scroll down on the page.</span></p>
<p><span style="font-weight: 400;">Another great feature of the tool is that we can see the final HTML after rendering. and check if there is anything missing, or compare both HTML with tools like </span><a href="https://www.diffchecker.com/"><span style="font-weight: 400;">Diff Checker</span></a><span style="font-weight: 400;">. We can also check JS errors blocked assets.</span></p>
<h3><b>Fetch and Render</b></h3>
<p><span style="font-weight: 400;">This tool from Google Search Console is also really useful, as we can compare how a user and Googlebot willl see our page, and if there is any difference.</span></p>
<p><span style="font-weight: 400;">We can also use this for any page of any domain, even if it is not ours. For example, you can see how Natzir is able to use the tool for a page from Trivago, thanks to the </span><a href="https://github.com/screamingfrog/fetch-and-render"><span style="font-weight: 400;">code shared by Screaming Frog</span></a> (don&#8217;t forget to modify it as explained on the slides)</p>
<p><img loading="lazy" decoding="async" width="1235" height="922" class="aligncenter size-full wp-image-1846" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/fetch-and-render-any-domain.png" alt="Fetch and render on any domain" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/fetch-and-render-any-domain.png 1235w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/fetch-and-render-any-domain-250x187.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/fetch-and-render-any-domain-768x573.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/fetch-and-render-any-domain-700x523.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/fetch-and-render-any-domain-120x90.png 120w" sizes="auto, (max-width: 1235px) 100vw, 1235px" /></p>
<p><span style="font-weight: 400;">What this code does is to load any page on your domain through an iframe.</span></p>
<p><span style="font-weight: 400;">You can also use this functionality for staging sites. To do this, you need to add a noindex to all the URLs and </span><a href="https://opensourceseo.org/fetch-render-page-test-or-staging-environment/"><span style="font-weight: 400;">only let Googlebot access them using Reverse DNS</span></a><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">There are other tools you can use, like </span><a href="https://www.screamingfrog.co.uk/seo-spider/"><span style="font-weight: 400;">ScreamingFrog SEO Spider</span></a><span style="font-weight: 400;"> or this </span><a href="https://technicalseo.com/seo-tools/fetch-render/"><span style="font-weight: 400;">online tool developed by Merkle SEO</span></a><span style="font-weight: 400;">. Thanks to these tools you can modify the amount of time to wait for the rendering and the User Agents. You should aim for getting the page rendered in less than 5 seconds.</span></p>
<h3><b>Crawl and compare staging with production enviroments</b></h3>
<p><span style="font-weight: 400;">If you are migrating your current site to a PWA using technologies like Angular or React, you can use crawlers like </span><a href="https://www.fandangoseo.com/"><span style="font-weight: 400;">FandangoSEO</span></a><span style="font-weight: 400;"> to crawl your site on staging and also in production, and compare them. Most of the problems on migrations to a PWA happen because of layout changes and not just because of using JavaScript.</span></p>
<p><span style="font-weight: 400;">As in any migration, you need to check internal linking is the same in staging and production, maintaining the same levels of depth, as well as keeping the same content in both versions. This is a priority on any migration, even more than having redirects with 2 or more hops. <strong>It’s also a bad practice to migrate layout, CMS and URLs all at the same time</strong>; even if we maintain the links and the redirects are perfect, those are lots of changes at the same time and the site can suffer for 6 to 12 months until Google is able to reprocess and understand everything.</span></p>
<p><span style="font-weight: 400;">So if you migrate your site to a PWA, test it thoroughly on staging before going live, and minimize the amount of changes</span></p>
<h3><b>Crawl emulating mobile and rendering JS</b></h3>
<p><span style="font-weight: 400;">With the change to “mobile first indexing” from Google, we also need to check how Google sees our sites as a mobile user and revise the points commented before. With FandangoSEO we can also do this and compare the crawls to see if mobile and desktop are equal or not in terms of internal linking, title tags, etc.</span></p>
<h3><b>Check meta tags with other User Agents</b></h3>
<p><span style="font-weight: 400;">Although you can do this with crawlers, when you just want to check some specific pages you can use these plugins: </span><a href="https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef"><span style="font-weight: 400;">meta seo inspector</span></a><span style="font-weight: 400;"> and </span><a href="https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg"><span style="font-weight: 400;">user-agent switcher</span></a><span style="font-weight: 400;">. In the last one, you can add User Agents for Googlebot, Googlebot Mobile and the ones from Facebook and Twitter (to check open graph and twitter cards data)</span></p>
<ul>
<li style="font-weight: 400;"><b>Googlebot:</b><span style="font-weight: 400;"> User-Agent String: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)</span></li>
<li style="font-weight: 400;"><b style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem;">Googlebot Mobile:</b><span style="font-weight: 400;"> Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)</span></li>
<li style="font-weight: 400;"><b style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem;">Facebook:</b><span style="font-weight: 400;"> facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)</span></li>
<li style="font-weight: 400;"><b style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: 1rem;">Twitterbot</b><span style="font-weight: 400;">: Twitterbot/1.0</span></li>
</ul>
<p>You can also use the new <a href="https://search.google.com/test/rich-results">Rich Results Test from Google</a> to validate schema.org, which will also show you the rendered HTML. The backside is that it <a href="https://search.google.com/structured-data/testing-tool/u/0/?hl=es">doesn&#8217;t allow as much types as the previous one</a></p>
<h3><b>Browse without JS emulating other User Agents</b></h3>
<p><span style="font-weight: 400;">When you want to check the same as in the previous point but also without executing Javascript, you can use the </span><a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es"><span style="font-weight: 400;">Web Developer</span></a><span style="font-weight: 400;"> plugin, where you can deactivate JS.</span></p>
<h3><b>Check console errors and links on Chrome 41</b></h3>
<p><span style="font-weight: 400;">It is a must to use Chrome 41 yourself and check if your PWA works there. You can check Javascript errors, API errors or CSS errors that you will see on the browser’s console. You will see that some of those errors do not appear on the latest versions of Chrome, so if they happen on Chrome 41, they will happen also on Google when trying to render your page.</span></p>
<p><span style="font-weight: 400;">Another thing to check on Chrome 41 is if the links and menus are accessible, as sometimes, because of unsupported features, they might not work. You can </span><a href="https://caniuse.com/#compare=chrome+41"><span style="font-weight: 400;">check here which features are supported and which ones are not</span></a></p>
<p><span style="font-weight: 400;">There are rumours saying that Google will update its WRS with a more modern version of Chrome in less than a year, </span><a href="https://twitter.com/igrigorik/status/893610721539309568"><span style="font-weight: 400;">but there is no confirmed date</span></a><span style="font-weight: 400;">. So up to date, Chrome 41 is our reference.</span></p>
<p><span style="font-weight: 400;">To end with the good practices, here you have some checklist with things to take into account if you use pure CSR or SSR/DR</span></p>
<h3><b>PWA SEO Checklist for CSR</b></h3>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Canonicals + metadata do not depend on CSR</span></li>
<li style="font-weight: 400;">Page renders in less than 5 seconds</li>
<li style="font-weight: 400;">Page loads and is functional with Chrome 41</li>
<li style="font-weight: 400;">Rendered links are &lt;a&gt; elements with their real href</li>
<li style="font-weight: 400;">HTML+design is the expected on Mobile Friendly Tool</li>
<li style="font-weight: 400;">HTML+design is the expected on Fetch and Render with Search Console</li>
<li style="font-weight: 400;">Pages appear on Google after searching for specific text strings</li>
<li style="font-weight: 400;">Content is not replicated in different pages</li>
<li style="font-weight: 400;">Fragments (!#) are not used and every page has its own URL</li>
</ol>
<h3><b>PWA SEO Checklist for Dynamic Rendering/SSR</b></h3>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">SSR is served to Googlebot and other specific bots (FB, TW…)</span></li>
<li style="font-weight: 400;">Content Googlebot receives is the same a normal user sees</li>
<li style="font-weight: 400;">Http response codes are the same in both cases</li>
<li style="font-weight: 400;">Meta tags are the same in both cases</li>
<li style="font-weight: 400;">Server is able to manage the rendering under high pressure</li>
<li style="font-weight: 400;">SSR version includes all the content and links in a correct way</li>
<li style="font-weight: 400;">All pages have the expected behaviour in both cases</li>
<li style="font-weight: 400;">Fragments (!#)are not used and every page has its own URL</li>
</ol>
<p><span style="font-weight: 400;">Apart from that, this <a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;" href="https://developers.google.com/web/progressive-web-apps/checklist">checklist from google</a><span style="font-weight: 400;"> for PWAs regarding PWA and WPO is also really useful:</span><br />
</span></p>
<h3><b>PWA Checklist UX &amp; WPO</b></h3>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Site is served over HTTPS</span></li>
<li style="font-weight: 400;">Pages are responsive on tablets &amp; mobile devices</li>
<li style="font-weight: 400;">All app URLs load while offline</li>
<li style="font-weight: 400;">Metadata provided for Add to Home screen</li>
<li style="font-weight: 400;">First load very fast even on 3G</li>
<li style="font-weight: 400;">Page transitions don&#8217;t feel like they block on the network</li>
<li style="font-weight: 400;">Site uses cache-first networking</li>
<li style="font-weight: 400;">Site appropriately informs the user when they&#8217;re offline</li>
<li style="font-weight: 400;">Content doesn&#8217;t jump as the page loads</li>
<li style="font-weight: 400;">Pressing back from a detail page retains scroll position on the previous list page</li>
<li style="font-weight: 400;">When tapped, inputs aren&#8217;t obscured by the on screen keyboard</li>
<li style="font-weight: 400;">Content is easily shareable from standalone or full screen mode</li>
<li style="font-weight: 400;">Any app install prompts are not used excessively</li>
</ol>
<h2><b>Experiment: PWA without prerender (CSR)</b></h2>
<p><span style="font-weight: 400;">In order to try ourselves how Google deals with Javascript, we have sacrificed our blogs migrating them from a “normal” WordPress to a PWA that works only when having JS (CSR)</span></p>
<p><span style="font-weight: 400;">We did this using <a href="https://frontity.com/">Worona (now Frontity)</a>, which is a platform that allows you to convert a WordPress site into a PWA for mobile users. In our case, we collaborated with them in order to make the PWA available in both mobile and desktop, and that when JS is not enabled, a blank page appears.</span></p>
<p><img loading="lazy" decoding="async" width="773" height="338" class="aligncenter size-full wp-image-1847" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-setup.jpg" alt="PWA experiment setup" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-setup.jpg 773w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-setup-250x109.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-setup-768x336.jpg 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-setup-700x306.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-setup-120x52.jpg 120w" sizes="auto, (max-width: 773px) 100vw, 773px" /></p>
<p><span style="font-weight: 400;">As you can see, if we deactivate JS, all the pages in this blog load only what you see in this screenshot: a blank page without the real content and links to crawl and index:</span></p>
<p><img loading="lazy" decoding="async" width="567" height="344" class="aligncenter size-full wp-image-1848" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-no-js.jpg" alt="PWA with no JS" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-no-js.jpg 567w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-no-js-250x152.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-no-js-120x73.jpg 120w" sizes="auto, (max-width: 567px) 100vw, 567px" /></p>
<p><span style="font-weight: 400;">Once the PWA was enabled on production, we have done different tests. </span></p>
<p><span style="font-weight: 400;">Disclaimer: as you will see, these tests have been made on a small site, in a small period time and on small scale. We cannot guarantee that the results will be the same in other situations.</span></p>
<h3><b>Test 1: rendering</b></h3>
<p><span style="font-weight: 400;">The first test was to check if Google was, in fact, able to render and index the URLs from the blog, now that they only work with JavaScript.</span></p>
<p><span style="font-weight: 400;">In order to do that, we checked first on the Mobile-Friendly Test Tool and on the Fetch and Render Tool on Search Console, where we confirmed that Google was able to render the content. </span></p>
<p><span style="font-weight: 400;">We used the “Request indexing” option on Search Console to force Google to update the URL on their index, and in less than 15 minutes we were able to check what they did:</span></p>
<p><img loading="lazy" decoding="async" width="539" height="588" class="aligncenter size-full wp-image-1849" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-rendering-and-indexing-js.jpg" alt="Google rendering and indexing a JS site" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-rendering-and-indexing-js.jpg 539w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-rendering-and-indexing-js-250x273.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-rendering-and-indexing-js-120x131.jpg 120w" sizes="auto, (max-width: 539px) 100vw, 539px" /></p>
<p><span style="font-weight: 400;">Observations:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Google has been able to render and index the content</span></li>
<li style="font-weight: 400;">The process has been relatively fast (15’)</li>
</ul>
<h3><b>Test 2: rankings</b></h3>
<p><span style="font-weight: 400;">Once we validate that Google is able to render the blog and see our content, the next obvious question is if we are going to keep the rankings for that post. In order to check that, we choose a keyword for which the post has been ranking 1 or 2 for 6 months (so it’s a “stable” keyword)</span></p>
<p><img loading="lazy" decoding="async" width="1535" height="838" class="aligncenter size-full wp-image-1850" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/rankings-after-migrating-to-pwa.png" alt="Rankings are the same after migrating to CSR PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/rankings-after-migrating-to-pwa.png 1535w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/rankings-after-migrating-to-pwa-250x136.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/rankings-after-migrating-to-pwa-768x419.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/rankings-after-migrating-to-pwa-700x382.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/rankings-after-migrating-to-pwa-120x66.png 120w" sizes="auto, (max-width: 1535px) 100vw, 1535px" /></p>
<p><span style="font-weight: 400;">And we check that, once their index has been updated for that URL, we keep the same ranking:</span></p>
<p><img loading="lazy" decoding="async" width="1477" height="871" class="aligncenter size-full wp-image-1851" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-for-amp-bounce-rate.png" alt="Stable rankings after migrating to CSR PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-for-amp-bounce-rate.png 1477w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-for-amp-bounce-rate-250x147.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-for-amp-bounce-rate-768x453.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-for-amp-bounce-rate-700x413.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-for-amp-bounce-rate-120x71.png 120w" sizes="auto, (max-width: 1477px) 100vw, 1477px" /></p>
<p><span style="font-weight: 400;">Besides, we also do a search combining the keyword with a piece of text that appears <strong>only</strong> on the PWA after rendering, to make sure Google is indeed ranking the page taking into account the content that loads after rendering it:</span></p>
<p><img loading="lazy" decoding="async" width="1331" height="871" class="aligncenter size-full wp-image-1852" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-amp-bounce-rate-2.png" alt="Stable rankings after migrating to CSR PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-amp-bounce-rate-2.png 1331w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-amp-bounce-rate-2-250x164.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-amp-bounce-rate-2-768x503.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-amp-bounce-rate-2-700x458.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/stable-rankings-amp-bounce-rate-2-120x79.png 120w" sizes="auto, (max-width: 1331px) 100vw, 1331px" /></p>
<p><span style="font-weight: 400;">Observations:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Rankings haven’t been lost after migrating to a PWA without SSR</span></li>
</ul>
<h3><b>Test 3: new content indexing</b></h3>
<p><span style="font-weight: 400;">We also wanted to test how much time Google takes on finding, crawling and indexing a new post, so we publish a new one:</span></p>
<p><img loading="lazy" decoding="async" width="449" height="581" class="aligncenter size-full wp-image-1853" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/new-post-pwa.jpg" alt="New post on the PWA" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/new-post-pwa.jpg 449w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/new-post-pwa-250x323.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/new-post-pwa-120x155.jpg 120w" sizes="auto, (max-width: 449px) 100vw, 449px" /></p>
<p><span style="font-weight: 400;">As we don’t want to force Google to crawl the new URL, what we do is a Fetch and Render of the blog homepage, and click on “Request Indexing”, where Google will find a link to this new post, to see if they index it and how much time it takes.</span></p>
<p><span style="font-weight: 400;">Even though we saw a visit from Googlebot to the new URL on the server logs, the page didn’t appeared on Google’s index until 5 days after publishing:</span></p>
<p><img loading="lazy" decoding="async" width="676" height="333" class="aligncenter size-full wp-image-1854" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/slow-indexing-pwa-sites.jpg" alt="Slow indexing on pwa sites" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/slow-indexing-pwa-sites.jpg 676w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/slow-indexing-pwa-sites-250x123.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/slow-indexing-pwa-sites-120x59.jpg 120w" sizes="auto, (max-width: 676px) 100vw, 676px" /></p>
<p><span style="font-weight: 400;">A small mistake when doing this test was that the post didn’t have a lot of content, and the plugin we used (Worona), loads the next post when you scroll to the end of the current post, so when Google was rendering it, was seeing also the content of the next post below:</span></p>
<p><img loading="lazy" decoding="async" width="993" height="423" class="aligncenter size-full wp-image-1855" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/mistake-on-pwa-experiment.png" alt="Mistake on our PWA experiment" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/mistake-on-pwa-experiment.png 993w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/mistake-on-pwa-experiment-250x106.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/mistake-on-pwa-experiment-768x327.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/mistake-on-pwa-experiment-700x298.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/mistake-on-pwa-experiment-120x51.png 120w" sizes="auto, (max-width: 993px) 100vw, 993px" /></p>
<p>So we will repeat this test.</p>
<p><span style="font-weight: 400;">Observations:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">If we don’t force the indexing, Google takes some time to index new content</span></li>
</ul>
<h3><b>Test 4: the two waves of indexing</b></h3>
<p><span style="font-weight: 400;">Last, we wanted to try to see “live” the 2 waves indexing system that Google has confirmed. Same as in the previous case, because we did the test with a URL with not a lot of content, Google ended up loading the next post and indexing that content for this URL</span></p>
<p><span style="font-weight: 400;">This is what we did:</span></p>
<ul>
<li><span style="font-weight: 400;">In a page Google didn’t recrawl yet, we did a change to include a made up word only on the initial html version of the page, that disappears after loading the PWA</span></li>
<li>We forced Google to Fetch (not Render) that page on Search Console, and we “Request Indexing”</li>
<li>Minutes later, when we searched for the word Google was already showing the URL:</li>
</ul>
<p><img loading="lazy" decoding="async" width="749" height="297" class="aligncenter size-full wp-image-1856" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/two-phases-indexing-js-sites-google.jpg" alt="Two phases of JS indexing" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/two-phases-indexing-js-sites-google.jpg 749w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/two-phases-indexing-js-sites-google-250x99.jpg 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/two-phases-indexing-js-sites-google-700x278.jpg 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/two-phases-indexing-js-sites-google-120x48.jpg 120w" sizes="auto, (max-width: 749px) 100vw, 749px" /></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">On the other side, when we checked Google’s cache for this page, we found that even though Google indexed the new content, the cache was still showing the old version (the one without PWA that we had before):</span></li>
</ul>
<p><img loading="lazy" decoding="async" width="1387" height="877" class="aligncenter size-full wp-image-1857" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/cache-google.png" alt="" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/cache-google.png 1387w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/cache-google-250x158.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/cache-google-768x486.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/cache-google-700x443.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/cache-google-120x76.png 120w" sizes="auto, (max-width: 1387px) 100vw, 1387px" /></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Also, when searching for specific text strings that appeared only on the old version of the page (before PWA), the page was still appearing:</span></li>
</ul>
<p><img loading="lazy" decoding="async" width="1679" height="747" class="aligncenter size-full wp-image-1858" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-google.png" alt="" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-google.png 1679w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-google-250x111.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-google-768x342.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-google-700x311.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/pwa-experiment-google-120x53.png 120w" sizes="auto, (max-width: 1679px) 100vw, 1679px" /></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Days later, Google started showing the PWA version on the cache:</span></li>
</ul>
<p><img loading="lazy" decoding="async" width="1001" height="629" class="aligncenter size-full wp-image-1859" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-cache-updated-pwa.png" alt="Google cache updated" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-cache-updated-pwa.png 1001w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-cache-updated-pwa-250x157.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-cache-updated-pwa-768x483.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-cache-updated-pwa-700x440.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/google-cache-updated-pwa-120x75.png 120w" sizes="auto, (max-width: 1001px) 100vw, 1001px" /></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">And from that moment, the page no longer appears for the made up word that is only visible on the initial HTML before rendering:</span></li>
</ul>
<p><img loading="lazy" decoding="async" width="865" height="354" class="aligncenter size-full wp-image-1860" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/made-up-word-no-longer-appears.png" alt="" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/made-up-word-no-longer-appears.png 865w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/made-up-word-no-longer-appears-250x102.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/made-up-word-no-longer-appears-768x314.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/made-up-word-no-longer-appears-700x286.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/made-up-word-no-longer-appears-120x49.png 120w" sizes="auto, (max-width: 865px) 100vw, 865px" /></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Although when checking the «Text-only» version Google’s cache, the word appears:</span></li>
</ul>
<p><img loading="lazy" decoding="async" width="865" height="444" class="aligncenter size-full wp-image-1861" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/text-only-version-made-up-word.png" alt="Text-only version of Google cache shows the made up word" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/text-only-version-made-up-word.png 865w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/text-only-version-made-up-word-250x128.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/text-only-version-made-up-word-768x394.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/text-only-version-made-up-word-700x359.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/06/text-only-version-made-up-word-120x62.png 120w" sizes="auto, (max-width: 865px) 100vw, 865px" /></p>
<p><span style="font-weight: 400;">Observations:</span></p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Before rendering the page Google has indexed the content on the page without JS (first wave)</span></li>
<li style="font-weight: 400;">This new content has been associated to the previous version of the web (the one without PWA)</li>
<li style="font-weight: 400;">Once rendered, the page only ranks for the content present on the rendered version (second wave indexing)</li>
</ul>
<h2><b>Conclusions</b></h2>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">Up to date very few websites have migrated directly to a CSR PWA (no pre-rendering) for all user-agents. Those who did and lost traffic, had also other technical problems (e.g. </span><a href="https://www.elephate.com/blog/javascript-seo-backfire-hulu-com-case-study/"><span style="font-weight: 400;">hulu.com</span></a><span style="font-weight: 400;">)</span></li>
<li style="font-weight: 400;">New websites which are created directly as CSR PWA can rank, but they have problems with indexing</li>
<li style="font-weight: 400;">Up to date, and regarding Google, Dynamic Rendering is the solution that works without any problems</li>
</ul>
<p><iframe loading="lazy" style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" src="//www.slideshare.net/slideshow/embed_code/key/NvCCLs16yKzUcY" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"> </iframe></p>
<div style="margin-bottom: 5px;"></div>
<p>La entrada <a href="https://www.christianoliveira.com/blog/en/seo-progressive-web-apps-pwa/">SEO for Progressive Web APPs (PWA) and JavaScript sites</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/en/seo-progressive-web-apps-pwa/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>matujiloperubasedotino: prueba de indexación con PWA sin pre-render</title>
		<link>https://www.christianoliveira.com/blog/seo/prueba-de-indexacion-con-pwa-sin-pre-render/</link>
					<comments>https://www.christianoliveira.com/blog/seo/prueba-de-indexacion-con-pwa-sin-pre-render/#respond</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Tue, 29 May 2018 21:02:58 +0000</pubDate>
				<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">https://www.christianoliveira.com/blog/?p=1822</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/seo/prueba-de-indexacion-con-pwa-sin-pre-render/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa-150x150.png" class="alignleft tfe wp-post-image" alt="rufogihujikelaco" decoding="async" loading="lazy" /></a>tuyopicugijoku</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/seo/prueba-de-indexacion-con-pwa-sin-pre-render/">matujiloperubasedotino: prueba de indexación con PWA sin pre-render</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1822&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;matujiloperubasedotino: prueba de indexación con PWA sin pre-render&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
tuyopicugijoku</p>
<p><img loading="lazy" decoding="async" width="1400" height="940" class="aligncenter size-full wp-image-1823" src="https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa.png" alt="rufogihujikelaco" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa.png 1400w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa-250x168.png 250w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa-768x516.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa-700x470.png 700w, https://www.christianoliveira.com/blog/wp-content/uploads/2018/05/pwa-120x81.png 120w" sizes="auto, (max-width: 1400px) 100vw, 1400px" /></p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/seo/prueba-de-indexacion-con-pwa-sin-pre-render/">matujiloperubasedotino: prueba de indexación con PWA sin pre-render</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/seo/prueba-de-indexacion-con-pwa-sin-pre-render/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>¿Debería implementar AMP? 5 suposiciones no demostradas o no probadas que pueden llevarte a la decisión equivocada</title>
		<link>https://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/</link>
					<comments>https://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Mon, 03 Jul 2017 06:18:57 +0000</pubDate>
				<category><![CDATA[Analítica web]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=1775</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-150x150.png" class="alignleft tfe wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-150x150.png 150w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-96x96.png 96w" sizes="auto, (max-width: 150px) 100vw, 150px" /></a>¿Estás seguro de que los argumentos que estás usando a favor / en contra de AMP son correctos? Probablemente la mayoría de ellos, no lo son. Aquí te explico por qué</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/">¿Debería implementar AMP? 5 suposiciones no demostradas o no probadas que pueden llevarte a la decisión equivocada</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1775&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;¿Debería implementar AMP? 5 suposiciones no demostradas o no probadas que pueden llevarte a la decisión equivocada&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
<a href="http://www.christianoliveira.com/blog/en/should-i-implement-amp/">You can read this post in English here</a></p>
<p><strong>AMP es uno de los proyectos de Google más polémicos en las comunidades de SEO y de desarrollo.</strong> Todas las semanas aparece nueva información, con datos a favor o en contra del proyecto, que en la mayoría de los casos muestran una imagen incorrecta de AMP.</p>
<p>Decidir si implementar AMP o no puede tener un impacto muy grande para algunos negocios, por lo que es crucial saber si los pros y contras que se manejan son completamente ciertos.</p>
<p>La mayoría de los datos que se comparten están mal, no tienen valor o son medias verdades, así que en este post vas a encontrarte con una recopilación de las 5 suposiciones más comunes sobre AMP, y qué esconden.</p>
<p><strong>¡Nota importante!</strong> Esto no es un artículo en contra ni a favor de AMP. Es simplemente un análisis de algunas suposiciones sobre AMP, tanto favorables como desfavorables.</p>
<h2>ejemplo.com está recibiendo un XX% de tráfico móvil desde Google en AMP</h2>
<p>Fuente: <a href="http://digiday.com/media/guardian-getting-60-percent-google-mobile-traffic-amp/">http://digiday.com/media/guardian-getting-60-percent-google-mobile-traffic-amp/</a></p>
<p>Esta noticia específica habla sobre The Guardian, pero puedes encontrar métricas similares para otras webs.</p>
<p>The Guadian fue <a href="http://www.theguardian.com/membership/2016/feb/24/todays-release-of-accelerated-mobile-pages-amp">una de las primeras webs de noticias en implementar AMP</a>, trabajando mano a mano con Google, <a href="http://www.theguardian.com/help/insideguardian/2015/oct/07/todays-developer-release-of-accelerated-mobile-pages-amp">meses antes de que el proyecto fuese lanzado públicamente</a>. Hicieron un «all-in» con AMP, creando versiones de AMP para todos sus artículos (de forma retroactiva)</p>
<p><figure id="attachment_1750" aria-describedby="caption-attachment-1750" style="width: 706px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="wp-image-1750 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005.png" alt="La versión AMP de una noticia de 2005 en The Guardian" width="706" height="689" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005.png 706w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005-300x293.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005-624x609.png 624w" sizes="auto, (max-width: 706px) 100vw, 706px" /><figcaption id="caption-attachment-1750" class="wp-caption-text">La <a href="http://amp.theguardian.com/environment/2005/oct/01/water.conservationandendangeredspecies">versión AMP de una noticia de 2005</a> en The Guardian</figcaption></figure></p>
<p>¿Qué quiere decir esto? Que un gran porcentaje de sus URLs, tienen versión AMP.</p>
<p>¿Por qué no todas? Bueno, porque AMP fue diseñado en primer lugar para noticias, no para cualquier tipo de página y/o contenido. Algunos ejemplos de páginas de The Guardian que no tienen versión AMP:</p>
<ul>
<li>Su homapage: <a href="http://www.theguardian.com/">http://www.theguardian.com/</a></li>
<li>Sus categorías / tags: <a href="http://www.theguardian.com/football">http://www.theguardian.com/football</a>,  <a href="http://www.theguardian.com/books/stieg-larsson">http://www.theguardian.com/books/stieg-larsson</a></li>
<li>Contenidos más complejos y/o interactivos: <a href="http://www.theguardian.com/world/ng-interactive/2017/may/07/french-presidential-election-results-latest">http://www.theguardian.com/world/ng-interactive/2017/may/07/french-presidential-election-results-latest</a></li>
</ul>
<p>Cuando implementas AMP en tu web, Google (en su versión mobile) reemplazará aquellas URLs «normales» por su versión AMP en sus resultados de búsqueda, enviando tráfico directamente a tus páginas AMP en vez de a tus páginas «normales».</p>
<p>Así que, decir que «The Guardian is getting 60 percent of its Google mobile traffic from AMP», sólo quiere decir que The Guardian ha implementado AMP correctamente y que los resultados son los esperados, si sabes el % de tráfico SEO que tenían esas páginas antes de AMP.</p>
<p><strong>Si implementas AMP en el 100% de tus páginas, esas páginas eventualmente recibirán el 100% del tráfico desde Google Mobile, sin decir nada sobre la calidad o beneficios de usar AMP</strong>. Es, simplemente, parte de la implementación. Podrías estar incluso recibiendo menos tráfico SEO mobile que antes, pero llegando el 100% de él a páginas AMP de cualquier forma.</p>
<p>Este dato no dice si The Guardian está recibiendo más o menos tráfico SEO desde Google Mobile, ya que el tráfico ha dejado de llegara a páginas «normales» para llegar a páginas AMP. E, incluso si el tráfico SEO desde Google mobile ha crecido después de implementar AMP, podría ser por un montón de factores, y será difícil determinar cuál es la razón exacta (especialmente en webs como The Guardian, cuyo tráfico varia enormemente en función de la actualidad)</p>
<p>El artículo continúa diciendo: «<em>AMP has gradually been taking over the Guardian’s mobile traffic; today, 60 percent of its Google mobile traffic is AMP, well above the 10 to 15 percent that publishers have been getting from AMP</em>«. Que, otra vez, no quiere decir nada, ya que el % de tráfico que acaba en páginas AMP desde Google Mobile depende de tu implementación de AMP y no tanto de lo bien que lo estés haciendo en SEO.</p>
<p>&nbsp;</p>
<h2>El porcentaje de rebote en las páginas AMP es muy alto</h2>
<p>Fuentes: <a href="http://productforums.google.com/forum/#!topic/webmasters/AHU52vd02Mg">http://productforums.google.com/forum/#!topic/webmasters/AHU52vd02Mg</a>, <a href="http://www.blackhatworld.com/seo/amp-pages-high-bounce-rate.897599/">http://www.blackhatworld.com/seo/amp-pages-high-bounce-rate.897599/</a></p>
<p>Si buscas en blogs y foros, encontrarás multitud de comentarios sobre esto, dando multitud de razones que explican por qué el porcentaje de rebote de tus páginas AMP es tan alto. Esas razones, pueden de hecho ser parte de la causa, pero <strong>la causa principal es simplemente que lo más probable es que ese porcentaje de rebote esté siendo mal calculado.</strong></p>
<p>Como <a href="http://www.christianoliveira.com/blog/seo/porcentaje-rebote-alto-amp/">expliqué aquí</a>, la forma en que AMP funciona provoca una inflación de sesiones y usuarios en nuestras herramientas de analítica, que en consecuencia provoca que el porcentaje de rebote se calcule de forma errónea.</p>
<p>Esto es un problema de sobra conocido por Google, difícil de resolver, y aunque están trabajando en ello y <a href="http://analytics.googleblog.com/2017/05/google-analytics-is-enhancing-support.html">ya han hecho mejoras</a>, el problema persiste para el caso de uso principal (gente que llega a tus páginas AMP a través de Google Mobile)</p>
<p>Así que, si quieres analizar el comportamiento de la gente en tus páginas AMP, <strong>no cuentes con el porcentaje de rebote salvo que hayas implementado alguna solución a este problema</strong>.</p>
<h2>Las páginas AMP posiciona mejor en los resultados móviles de Google</h2>
<p>Aquí, tenemos que considerar dos escenarios diferentes:</p>
<ul>
<li>La cajita de «Noticias destacadas», que aparece para algunas búsquedas.</li>
<li>Los resultados orgánicos</li>
</ul>
<h3>Caja de «Noticias destacadas» (AMP article rich results)</h3>
<p>Esta caja de resultados no es nueva, ni ha sido creada por AMP. <a href="http://searchengineland.com/google-20-google-universal-search-11232">Desde que Google lanzó «Universal»</a>, intenta mostrar diferentes tipos de resultados en función de la búsqueda.</p>
<p>Así, si buscas «Despacito», el primer resultado es un vídeo gigante de youtube con la canción:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1753" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1.png" alt="" width="896" height="642" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1.png 896w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-300x215.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-768x550.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-772x553.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-624x447.png 624w" sizes="auto, (max-width: 896px) 100vw, 896px" /></p>
<p>Y, si Google considera que la búsqueda está de alguna forma relacionada con «noticias», mostrará la caja con resultados de noticias:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1756" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit.png" alt="" width="821" height="623" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit.png 821w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-300x228.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-768x583.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-772x586.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-624x474.png 624w" sizes="auto, (max-width: 821px) 100vw, 821px" /></p>
<p>Que, en mobile, ahora saca resultados AMP:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1755" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp.png" alt="" width="444" height="640" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp.png 444w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-208x300.png 208w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-433x624.png 433w" sizes="auto, (max-width: 444px) 100vw, 444px" /></p>
<p>Aunque, a veces, también aparece algún resultado no-AMP:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1754" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-mobile-no-amp.png" alt="" width="388" height="575" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-mobile-no-amp.png 388w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-mobile-no-amp-202x300.png 202w" sizes="auto, (max-width: 388px) 100vw, 388px" /></p>
<p><strong>Esta caja era inicialmente exclusiva para los medios que estaban en una white-list</strong> (a la que podías optar si cumplías los requisitos), y <a href="http://searchengineland.com/googles-news-listings-beyond-traditional-205213">más tarde empezó a incluir también de forma esporádica, resultados de webs que no estaban en esa lista</a> (incluso <a href="http://www.seroundtable.com/google-in-the-news-19259.html">tweets y vídeos de youtube</a>).</p>
<p><a href="http://marketingland.com/google-launches-amp-listings-heres-how-they-look-166136">Con el lanzamiento de AMP, <strong>Google «forzó» a los medios a adoptar su plataforma si querían seguir apareciendo en esa caja en Mobile</strong></a>. A pesar de que a veces se cuela algún resultado no-AMP, no es la norma.</p>
<p>Así que, cuando alguien comenta que AMP es un factor de posicionamiento justificándolo con esta caja: no lo es. Al menos, no uno nuevo, o no uno generado a raiz de AMP. La caja de noticias existe desde antes de AMP, e incluso aunque implementes AMP en tus páginas, probablemente no aparecerás ahí, ya que la mayoría de resultados son de medios grandes.</p>
<p>La razón que Google utiliza para justificar el favoritismo hacia AMP dentro de esta caja es «<em>AMP is the format that currently delivers the best possible user experience on the mobile web. That is because AMP allows for consistent speed, caching, pre-rendering, and enables swiping between full-length pages. This is a big deal for topics where there isn’t “that one best result” that a user might want to look at.</em>» (fuente: <a href="http://news.ycombinator.com/item?id=12731534">Malte Ubl, creador y responsable de tecnología en el proyecto AMP, en Hacker News</a>).</p>
<p>Puedes leer mi opinión sobre esto al final del post.</p>
<h3>Resultados orgánicos (AMP non-rich results)</h3>
<p>Para los resultados orgánicos «normales», <a href="http://www.seroundtable.com/google-amp-not-a-ranking-signal-yet-21693.html">Google dice que AMP todavía no es un factor de posicionamiento</a>. Puedes creerlo o no, pero de momento no hay datos (al menos, no los he encontrado) que demuestren lo contrario.</p>
<p>Así que ahora mismo, si implementas AMP en tus páginas, y alguna de ellas posiciona en 2º lugar para una búsqueda, con su URL «normal», tan pronto como Google detecto que esa URL tiene una versión AMP, será la versión AMP la que aparezca en su lugar, en la misma 2ª posición.</p>
<p>Pero, ¿y qué pasa con estos datos? Aquí se puede ver claramente que los rankings y CTR de las páginas AMP es mucho mejor:</p>
<p><a href="http://twitter.com/wscentre/status/865078505255485440"><img loading="lazy" decoding="async" class="aligncenter wp-image-1758 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-ctr-and-rank-google-1.png" alt="" width="616" height="559" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-ctr-and-rank-google-1.png 616w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-ctr-and-rank-google-1-300x272.png 300w" sizes="auto, (max-width: 616px) 100vw, 616px" /></a></p>
<p>Parece mejor, pero los datos están comparando cosas diferentes.</p>
<p>La única forma de intentar (no puedes estar 100% seguro, ya que no puedes hacer test A/B sobre un mismo resultado) conseguir datos reales sobre CTR y rankings para comparar resultados AMP vs no-AMP sería:</p>
<ul>
<li>Tener varias URLs posicionando para algunas keywords de forma muy estable durante un largo periodo de tiempo (en términos de posición, tráfico y CTR)</li>
<li>Crear versión AMP para algunas de esas URLs, dejando otras sin versión AMP como grupo de control.</li>
<li>Monitorizar si Google indexa correctamente las versiones AMP (con el mismo título y descripción)</li>
<li>Monitorizar los rankings en mobile para las keywords y páginas elegidas</li>
<li>Monitorizar el CTR y posición media en Search console, tanto para las páginas del grupo de control como para las que han cambiado a AMP.</li>
</ul>
<p>De esa forma, se puede ver si una keyword para la cual has tenido posicionando la misma URL en la misma posición durante un largo periodo de tiempo, con un CTR estable, mejora o empeora una vez empieza a aparecer su versión AMP. Por supuesto, incluso si cambia, puede haber otros factores influenciando estos valores, por lo que nunca puedes tener 100% de seguridad.</p>
<p>Si comparamos, simplemente, los datos de las páginas AMP con las páginas no-AMP en Search Console, probablemente lo estaremos haciendo mal.</p>
<p>Estos son los datos, de Search Console, para mi blog de viajes <a href="http://randomtrip.es">Randomtrip.es</a>, tanto para páginas AMP como no-AMP desde móvil.</p>
<p>Páginas AMP:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1762" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip.png" alt="" width="1002" height="305" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip.png 1002w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-300x91.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-768x234.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-772x235.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-624x190.png 624w" sizes="auto, (max-width: 1002px) 100vw, 1002px" /></p>
<p>Páginas no-AMP:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1763" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1.png" alt="" width="1014" height="318" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1.png 1014w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-300x94.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-768x241.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-772x242.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-624x196.png 624w" sizes="auto, (max-width: 1014px) 100vw, 1014px" /></p>
<p>Entonces, con estos datos, las páginas AMP ganan, ¿no? Mejor CTR (8.82% vs 5.01%) y mejor posición media (7 vs 7.7).</p>
<p>Bueno, no exactamente. <strong>Estos no son datos sobre las mismas páginas con diferente output</strong>; son datos de páginas complemente diferentes (las URLs que tienen versión AMP, no aparecen con su versión no-AMP en mobile), así que <strong>la comparación no tiene sentido</strong>. Lo que estamos comparando aquí es el rendimiento de dos grupos de páginas diferentes (homepage y categorías por un lado, posts por otro), que pueden tener, de por sí, diferente rendimiento SEO en las SERPs, por multitud de motivos.</p>
<h2>El CTR es mejor para los resultados de AMP</h2>
<p>Fuentes: <a href="http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/">http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/</a> y <a href="http://speakerdeck.com/natalialkb/amp-in-the-wild?slide=37">http://speakerdeck.com/natalialkb/amp-in-the-wild?slide=37</a></p>
<p>Esto puede ser verdad, bajo la suposición de que la gente ha aprendido que el símbolo del rayo con las letras AMP indican que esa página carga muy rápido, y por lo tanto tienda a clickar más ahí, pero es poco probable (pregunta a cualquier persona que no esté en el mundillo qué cree que significa la etiqueta)</p>
<p>Y, no está demostrado con datos. Puede ser verdad, pero también puede no serlo, así que si quieres utilizar esto como un argumento a favor de AMP, necesitarás probarlo u obtener datos reales de alguien que lo haya hecho.</p>
<p><figure id="attachment_1770" aria-describedby="caption-attachment-1770" style="width: 667px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="wp-image-1770 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1.png" alt="" width="667" height="331" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1.png 667w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1-300x149.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1-624x310.png 624w" sizes="auto, (max-width: 667px) 100vw, 667px" /><figcaption id="caption-attachment-1770" class="wp-caption-text">Fuente: <a href="http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/">«Accelerated Mobile Pages (AMP): one year on – stats and infographic», at Search Engine Watch</a></figcaption></figure></p>
<p>Hay datos acompañando a ambos tipos de suposiciones: que el <a href="http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/">CTR aumenta</a> y que el <a href="http://www.seroundtable.com/google-amp-rich-cards-lower-ctr-23143.html">CTR disminuye</a>, pero por la explicación dada en el punto anterior, ninguna de las dos suposiciones está correctamente demostrada.</p>
<p><figure id="attachment_1772" aria-describedby="caption-attachment-1772" style="width: 693px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1772" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1.png" alt="" width="693" height="381" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1.png 693w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1-300x165.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1-624x343.png 624w" sizes="auto, (max-width: 693px) 100vw, 693px" /><figcaption id="caption-attachment-1772" class="wp-caption-text">Fuente: <a href="http://speakerdeck.com/natalialkb/amp-in-the-wild?slide=37">Slides from Natalia Baltazar (The Guardian) at the #ampconf</a></figcaption></figure></p>
<h2>Google robará mi tráfico SEO</h2>
<p>Fuente: <a href="http://www.alexkras.com/google-may-be-stealing-your-mobile-traffic/">http://www.alexkras.com/google-may-be-stealing-your-mobile-traffic/</a> (el autor, Alex Kras, rectificó sobre el titular al principio del artículo, diciendo que es «poco preciso»)</p>
<p>Este artículo fue <strong>uno de los primeros polémicos</strong> que <a href="http://news.ycombinator.com/item?id=12722590">caló hondo en comunidades como Hacker News</a>, en contra de AMP, y es una lectura bastante interesante porque <strong>refleja lo poco que se conoce / se entiende de AMP</strong> en las comunidades de desarrollo, e incluso en comunidades SEO.</p>
<p>Entonces, ¿robará mi tráfico SEO Google, si implemento AMP? No exactamente.</p>
<p>AMP es un proyecto complejo, <a href="http://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/#Como_funciona_AMP_en_Google">puedes aprender más sobre su funcionamiento aquí</a>. Básicamente, hace que tus páginas carguen más rápido gracias a dos factores principales:</p>
<ol>
<li>Hay un montón de restricciones respecto a CSS, JS y anuncios, así que te fuerzan a crear páginas sin toda esa «morralla» que hace que tus páginas «normales» cargue más lentas, y que no estás dispuesto a sacar. Así que tus páginas AMP cargarán (o al menos deberían cargar) más rápido que tus páginas mobile</li>
<li>En lugar de enviar el tráfico a tus páginas AMP, Google las cachea en sus servidores y las sirve él mismo. De esta forma se aseguran de que determinadas optimizaciones del lado del servidor estén implementadas.</li>
</ol>
<p>El punto 2 es el controvertido aquí: ya no eres tú el que sirve esas páginas, Google lo hace, y por eso parece que Google te está robando el tráfico.</p>
<p>En realidad, el tráfico contará igualmente en tus herramientas de analítica, y tú mantienes el control de los contenidos, menús, anuncios, links, etc. que se muestran ahí (con algunos <a href="http://www.christianoliveira.com/blog/seo/porcentaje-rebote-alto-amp/">problemas en cuanto a analítica que mostré en este post</a>)</p>
<p>PERO, los usuario no abandonan Google complemente cuando pinchan en un resultado AMP; pueden hacer swipe horizontal de una noticia a otra en la cajita de «Noticias destacadas», y la URL que se les muestra en el navegador no es la tuya, si no que es una URL de Google.</p>
<p>Así que, el tráfico cuenta como tuyo, pero es Google el que lo está recibiendo, y es Google el que controla el entorno en el que los usuarios ven tu contenido.</p>
<p>Otra queja del autor del artículo (Alex Kras), es que AMP no es «opcional» para los usuarios que buscan. Al contrario de lo que sucede con App indexing, donde si el usuario tiene instalada la app correspondiente al dominio del resultado, y Google sabe que el contenido se puede consumir en la app, envía al usuario directamente a la app, pero ofrece un link como alternativa por si el usuario quiere ver el contenido en la web.</p>
<hr />
<h2>Entonces, ¿debería implementar AMP en mi web?</h2>
<p>Bueno, como toda decisión de negocio, y <a href="http://www.traveler.es/viajes/mundo-traveler/articulos/como-ligar-con-un-gallego/7428">como los gallegos siempre decimos: ¡depende!</a></p>
<p>Necesitarás evaluar los pros y contras, y tener un cuidado extra con las métricas que utilizas para evaluar tu decisión.</p>
<p>Si tu web depende del tráfico desde Google News, probablemente ya hayas implementado AMP. Si no, estás en desventaja con tus competidores, ya que la mayoría de resultados dentro de la caja de Noticias Destacadas en mobile, son AMP.</p>
<p>Ahora mismo, no está demostrado que usar AMP te ayude a posicionar mejor ni a obtener más CTR, así que si tu web móvil es lo suficientemente rápida, probablemente puedas vivir sin AMP.</p>
<p>Si Google empieza a dar ese empujón en rankings a los resultados orgánicos AMP (porque quieran promover la tecnología abusando de su posición, o porque empiecen de dar más peso a la velocidad en móviles, entre otros motivos), entonces tendrás que reevaluar tu decisión.</p>
<p>Si tu web móvil es lenta, ¡arréglala! Independientemente de que implementes AMP o no, la velocidad debería ser una prioridad, especialmente en mobile.</p>
<h2>Mi opinión sobre AMP</h2>
<p>Mi forma de ver todo esto es que <strong>Google no está tratando de engañar a negocios y webs con AMP</strong>, y que los aspectos negativos resultado de utilizar AMP son más consecuencias y/o limitaciones de la plataforma bajo la que funciona, y no tanto un objetivo de Google en sí mismo.</p>
<p>En general, si implementas AMP en tu web, verás que tus páginas cargan más rápido, lo cual es bueno para tu audiencia. Además, la adopción de AMP esta trayendo consigo una serie de buenas prácticas en web performance que deberías seguir en tu web, y no sólo en tus páginas AMP.</p>
<p>Ahora bien, espero que Google deje de usar su posición de poder para forzar a las webs a adoptar su propio ecosistema. Debería ser posible implementar AMP sin utilizar la caché de Google, obteniendo el mismo beneficio que cualquier otra página AMP.</p>
<p>Además, como probablemente el 99.9% de los usuarios ni siquiera entienden que significa AMP, deberían testar otro tipo de etiquetas en sus resultados para resaltar aquellos resultados «optimizados» para móviles, y la etiqueta debería depender más en la velocidad y la usabilidad en sí de cada resultado, y no del uso de su ecosistema AMP.</p>
<p>&nbsp;</p>
<hr />
<p>¿Tienes datos para probar alguna de las suposiciones? Si es así, dímelo y mejoramos el artículo</p>
<p><em>Test: huyijovobonomo</em></p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/">¿Debería implementar AMP? 5 suposiciones no demostradas o no probadas que pueden llevarte a la decisión equivocada</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Should I implement AMP? 5 meaningless, not proven or misleading assumptions that may lead you to the wrong decision</title>
		<link>https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/</link>
					<comments>https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/#respond</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Mon, 03 Jul 2017 04:59:00 +0000</pubDate>
				<category><![CDATA[En]]></category>
		<category><![CDATA[Web Analytics]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=1749</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-150x150.png" class="alignleft tfe wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-150x150.png 150w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-96x96.png 96w" sizes="auto, (max-width: 150px) 100vw, 150px" /></a>Are you sure the arguments you use in favour or against AMP are true? Most of them probably are not. Check out why in this post.</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/">Should I implement AMP? 5 meaningless, not proven or misleading assumptions that may lead you to the wrong decision</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1749&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Should I implement AMP? 5 meaningless, not proven or misleading assumptions that may lead you to the wrong decision&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
<a href="http://www.christianoliveira.com/blog/analitica-web/deberia-implementar-amp/">Puedes leer este post en castellano aquí</a></p>
<p><strong>AMP is one of the most polemic projects from Google inside the DEV and SEO communities</strong>. Every week new information appears with data both in favour and against the project, which in most of the cases shows an incorrect picture about it.</p>
<p>Deciding whether to implement AMP or not can have a huge impact for some businesses, so it&#8217;s crucial to know what the pros and cons are and if they are completely true.</p>
<p><strong>Most of that data is usually flawed, meaningless or half-true</strong>, so in this post you will found a compilation of some of the most common assumptions, and what they hide.</p>
<p><strong>Important note!</strong> This is not an article in favour nor against AMP. It&#8217;s just an analysis of some assumptions, both favourable and not so favourable about it.</p>
<h2>example.com is getting XX% of its Google mobile traffic from AMP</h2>
<p>Source: <a href="http://digiday.com/media/guardian-getting-60-percent-google-mobile-traffic-amp/">http://digiday.com/media/guardian-getting-60-percent-google-mobile-traffic-amp/</a></p>
<p>This specific news piece refers to The Guardian, but you can find similar metrics from other websites.</p>
<p>The Guardian was <a href="http://www.theguardian.com/membership/2016/feb/24/todays-release-of-accelerated-mobile-pages-amp">one of the first news website to implement AMP</a>, working side by side with Google, <a href="http://www.theguardian.com/help/insideguardian/2015/oct/07/todays-developer-release-of-accelerated-mobile-pages-amp">months before the project was publicly launched</a>. They went «all-in» with AMP, creating an AMP version of all their articles (retroactively)</p>
<p><figure id="attachment_1750" aria-describedby="caption-attachment-1750" style="width: 706px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1750" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005.png" alt="AMP version of an old news article from the guardian" width="706" height="689" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005.png 706w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005-300x293.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/the-guardian-amp-2005-624x609.png 624w" sizes="auto, (max-width: 706px) 100vw, 706px" /><figcaption id="caption-attachment-1750" class="wp-caption-text">The <a href="http://amp.theguardian.com/environment/2005/oct/01/water.conservationandendangeredspecies">AMP version of a news article from 2005</a>, on The Guardian</figcaption></figure></p>
<p>What does this mean? That a huge percentage of their URLs, have an AMP version. Why not all? Well, because AMP was designed in the first place for news articles, not for any kind of page. Some examples of pages in The Guardian that do not have an AMP version are:</p>
<ul>
<li>Their homepage: <a href="http://www.theguardian.com/">http://www.theguardian.com/</a></li>
<li>Their categories / topics: <a href="http://www.theguardian.com/football">http://www.theguardian.com/football</a>,  <a href="http://www.theguardian.com/books/stieg-larsson">http://www.theguardian.com/books/stieg-larsson</a></li>
<li>Interactive / more complex pieces of content: <a href="http://www.theguardian.com/world/ng-interactive/2017/may/07/french-presidential-election-results-latest">http://www.theguardian.com/world/ng-interactive/2017/may/07/french-presidential-election-results-latest</a></li>
</ul>
<p>When implementing AMP on your site, Google (on mobile) will replace your normal URLs by your AMP URLs on their SERPs, <strong>sending traffic to your AMP pages instead of to your normal pages</strong>.</p>
<p>So, saying that «The Guardian is getting 60 percent of its Google mobile traffic from AMP», just means that they implemented AMP correctly and that results are what you would expect, if you knew the % of mobile SEO traffic those pages had before AMP.</p>
<p><strong>If you implement AMP on 100% of your pages, those pages will eventually get 100% of Google Mobile traffic, saying nothing about the quality or success of using AMP</strong>. It&#8217;s just part of the implementation. You could be getting less SEO traffic than before, but having 100% of it landing on AMP pages anyway.</p>
<p>It doesn&#8217;t tell if the Guardian is getting more or less traffic from Google Mobile, as the traffic has stopped landing on the normal pages, and started landing on the AMP pages. And even if Google Mobile traffic grew post-AMP implementation, it could be from a lot of factors and it will be difficult to know the exact reason (specially in huge sites like The Guardian, where traffic varies heavily depending on the news)</p>
<p>The article goes on saying: «<em>AMP has gradually been taking over the Guardian’s mobile traffic; today, 60 percent of its Google mobile traffic is AMP, well above the 10 to 15 percent that publishers have been getting from AMP</em>«. Which is again, meaningless, as the % of traffic AMP pages get from Google mobile depends on your AMP implementation and not from your SEO performance itself.</p>
<h2>Bounce rate on AMP pages is really high</h2>
<p>Sources: <a href="http://productforums.google.com/forum/#!topic/webmasters/AHU52vd02Mg">http://productforums.google.com/forum/#!topic/webmasters/AHU52vd02Mg</a>, <a href="http://www.blackhatworld.com/seo/amp-pages-high-bounce-rate.897599/">http://www.blackhatworld.com/seo/amp-pages-high-bounce-rate.897599/</a></p>
<p>If you search inside forums and blogs, you can find lots of comments about this, stating lots of reasons why the bounce rate of our AMP is so high. Those reasons can indeed be affecting, but <strong>the main cause of that high bounce rate is that it is probably wrongly calculated</strong>.</p>
<p>As <a href="http://www.christianoliveira.com/blog/en/why-the-bounce-rate-of-my-amp-pages-is-so-high/">I explained here</a>, the way AMP works causes an inflation of sessions and users on your Analytics tool, which then causes an incorrectly calculated high bounce rate.</p>
<p>This is a well-known problem by Google, which is tricky to solve, and although they are working on it and <a href="http://analytics.googleblog.com/2017/05/google-analytics-is-enhancing-support.html">have already improved it</a>, the problem still remains for the main use scenario (people reaching your AMP pages through Google search on mobile).</p>
<p>So, if you want to analyse the behaviour of your AMP pages, <strong>don&#8217;t count on the bounce rate metric unless you have implemented any kind of solution to solve it.</strong></p>
<h2>AMP pages rank higher on Google&#8217;s Mobile SERP results</h2>
<p>Here, we need to consider two different scenarios:</p>
<ul>
<li>The «Top Stories» box results, which appear for some queries in the SERPs</li>
<li>The organic results.</li>
</ul>
<h3>Top Stories box results (AMP article rich results)</h3>
<p>This box of results is not new, nor created because of AMP. <a href="http://searchengineland.com/google-20-google-universal-search-11232">Since Google launched «Universal»</a>, they try to show different types of results depending on the query.</p>
<p>That way, if you for example search for «Despacito», the first result is a giant youtube video with the song:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1753" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1.png" alt="" width="896" height="642" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1.png 896w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-300x215.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-768x550.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-772x553.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/despacito-1-624x447.png 624w" sizes="auto, (max-width: 896px) 100vw, 896px" /></p>
<p>And if Google consider that the query is somehow related to «news» it will also show a box with news results:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1756" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit.png" alt="" width="821" height="623" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit.png 821w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-300x228.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-768x583.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-772x586.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-624x474.png 624w" sizes="auto, (max-width: 821px) 100vw, 821px" /></p>
<p>Which in mobile now highlights AMP results:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1755" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp.png" alt="" width="444" height="640" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp.png 444w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-208x300.png 208w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-brexit-mobile-amp-433x624.png 433w" sizes="auto, (max-width: 444px) 100vw, 444px" /></p>
<p>Although sometimes there are non-AMP results inside:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1754" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-mobile-no-amp.png" alt="" width="388" height="575" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-mobile-no-amp.png 388w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/resultados-noticias-mobile-no-amp-202x300.png 202w" sizes="auto, (max-width: 388px) 100vw, 388px" /></p>
<p><strong>That box was initially exclusive for white-listed publishers</strong> (you could opt-in if you comply with the requisites), and<a href="http://searchengineland.com/googles-news-listings-beyond-traditional-205213"> later on started to show, sometimes, results from websites outside that list</a> (<a href="http://www.seroundtable.com/google-in-the-news-19259.html">even tweets and youtube videos</a>).</p>
<p><a href="http://marketingland.com/google-launches-amp-listings-heres-how-they-look-166136">With the launch AMP, <strong>Google «forced» publishers to adopt its platform in order to appear in that box in mobile</strong></a>. Although sometimes non-AMP results appear there, it&#8217;s not the norm.</p>
<p>So, when some people say that AMP is a ranking factor because of this box: it&#8217;s not. Or at least not a new one, or not because of AMP. The news box existed before AMP, and even if you implement AMP on your pages, your results won&#8217;t probably appear there, as most of them are from big publishers.</p>
<p>The reason Google uses to justify favouring AMP in the Top Stories box is that «<em>AMP is the format that currently delivers the best possible user experience on the mobile web. That is because AMP allows for consistent speed, caching, pre-rendering, and enables swiping between full-length pages. This is a big deal for topics where there isn’t “that one best result” that a user might want to look at.</em>» (source: <a href="http://news.ycombinator.com/item?id=12731534">Malte Ubl, Creator and Tech Lead of AMP, on HN</a>).</p>
<p>You can read my take on this at the end of this post.</p>
<h3>Organic results (AMP non-rich results)</h3>
<p>For the organic, «normal» results, <a href="http://www.seroundtable.com/google-amp-not-a-ranking-signal-yet-21693.html">Google says AMP is not a ranking factor yet</a>. Believe it or not, there is no data (at least I couldn&#8217;t find it) which demonstrate the opposite.</p>
<p>So right now, if you implement AMP on your pages, and you rank 2nd for a query, with your «normal» URL, as soon as Google detects the AMP version of that URL, the AMP result will appear instead, in the same 2nd position.</p>
<p>So what about this data? It says it&#8217;s clear that rankings and CTR are better on AMP pages:</p>
<p><a href="http://twitter.com/wscentre/status/865078505255485440"><img loading="lazy" decoding="async" class="aligncenter wp-image-1758 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-ctr-and-rank-google-1.png" alt="" width="616" height="559" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-ctr-and-rank-google-1.png 616w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-ctr-and-rank-google-1-300x272.png 300w" sizes="auto, (max-width: 616px) 100vw, 616px" /></a></p>
<p>It seems better, but that data is comparing different things.</p>
<p>The only way to try (you cannot be 100% sure as you cannot A/B test AMP results) to get real stats about rankings and CTR for AMP vs non-AMP results would be:</p>
<ul>
<li>To have several URLs rankings for several keywords, really stable for a long time (in terms of traffic and CTR)</li>
<li>Create the AMP version for some of those URLs, leaving some of them without AMP as a control group</li>
<li>Check if Google index the AMP versions properly</li>
<li>Monitor mobile rankings for both AMP and non-AMP URLs after they get indexed</li>
<li>Monitor CTR for both in Search Console</li>
</ul>
<p>That way, you can see if a keyword for which you have been ranking in the same position for long time, with a stable CTR, gets any improvement right after implementing AMP. Of course there is the possibility that lots of other factors influence this, so you can&#8217;t be 100% sure.</p>
<p>If you just compare, in Search Console, the performance of your AMP pages with your non-AMP pages, you are probably doing it wrong.</p>
<p>These are the stats, from Search Console, for my travel blog <a href="http://randomtrip.es">RandomTrip.es</a>, both for Mobile AMP pages and Mobile non-AMP pages.</p>
<p>AMP pages:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1762" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip.png" alt="" width="1002" height="305" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip.png 1002w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-300x91.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-768x234.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-772x235.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/amp-stats-randomtrip-624x190.png 624w" sizes="auto, (max-width: 1002px) 100vw, 1002px" /></p>
<p>Non-AMP pages:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1763" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1.png" alt="" width="1014" height="318" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1.png 1014w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-300x94.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-768x241.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-772x242.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/06/non-amp-stats-randomtrip-1-624x196.png 624w" sizes="auto, (max-width: 1014px) 100vw, 1014px" /></p>
<p>So with these stats, AMP Mobile pages win: better CTR (8.82% vs 5.01%) and better average position (7 vs 7.7), right?</p>
<p>Well, not exactly. <strong>These are not stats about the same pages</strong> with different output, they are about different pages (pages that have AMP version always appear with their AMP version on mobile), <strong>so the comparison makes no sense</strong>. What we are comparing here is different kind of pages (the homepage and categories/tags vs posts), which may have, by themselves, different SEO performance for lots of different reasons.</p>
<h2>CTR on SERPs is higher for AMP results</h2>
<p>Sources: <a href="http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/">http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/</a> and <a href="http://speakerdeck.com/natalialkb/amp-in-the-wild?slide=37">http://speakerdeck.com/natalialkb/amp-in-the-wild?slide=37</a></p>
<p>This can be true, under the assumption that users have learned that the AMP symbol means pages load faster and so they tend to click more on those kinds of results, but it&#8217;s unlikely (ask any of your non-tech friends what they think it is)</p>
<p>And, it&#8217;s not demonstrated with data. It can be true, but it also cannot, so if you want to use it as an argument to implement AMP, you will need to test it yourself or get real data from someone who already tested it.</p>
<p><figure id="attachment_1770" aria-describedby="caption-attachment-1770" style="width: 667px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="wp-image-1770 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1.png" alt="" width="667" height="331" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1.png 667w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1-300x149.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/amp-improves-ctr-in-serps-1-624x310.png 624w" sizes="auto, (max-width: 667px) 100vw, 667px" /><figcaption id="caption-attachment-1770" class="wp-caption-text">Source: <a href="http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/">«Accelerated Mobile Pages (AMP): one year on – stats and infographic», at Search Engine Watch</a></figcaption></figure></p>
<p>There is data both assuring that <a href="http://searchenginewatch.com/2016/10/13/accelerated-mobile-pages-amp-one-year-on-stats-and-infographic/">CTR improves</a> and also <a href="http://www.seroundtable.com/google-amp-rich-cards-lower-ctr-23143.html">that it decreases</a>, but because of the explanation and examples given in the previous point, none of the assumptions are really demonstrated.</p>
<p><figure id="attachment_1772" aria-describedby="caption-attachment-1772" style="width: 693px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1772" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1.png" alt="" width="693" height="381" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1.png 693w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1-300x165.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/07/the-guardian-amp-ctr-1-624x343.png 624w" sizes="auto, (max-width: 693px) 100vw, 693px" /><figcaption id="caption-attachment-1772" class="wp-caption-text">Source: <a href="http://speakerdeck.com/natalialkb/amp-in-the-wild?slide=37">Slides from Natalia Baltazar (The Guardian) at the #ampconf</a></figcaption></figure></p>
<h2>Google will steal my SEO traffic</h2>
<p>Source: <a href="http://www.alexkras.com/google-may-be-stealing-your-mobile-traffic/">http://www.alexkras.com/google-may-be-stealing-your-mobile-traffic/</a> (the author, Alex Kras, rectified about the headline and says at the beginning of the article that it is inaccurate)</p>
<p>This article was<strong> one of the first polemic ones</strong> that <a href="http://news.ycombinator.com/item?id=12722590">took of in communities like Hacker News against AMP</a>, and it is an interesting read as <strong>it reflects how little people know/understand about AMP</strong> (even inside the dev community).</p>
<p>So, will google steal your SEO traffic if you implement AMP? Not exactly</p>
<p>AMP is a complex project, <a href="http://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/#How_AMP_works_inside_Google">you can learn more about how it works here</a>. Basically, it makes your pages load fast thanks to these two main factors:</p>
<ol>
<li>There are a lot of restrictions regarding CSS, JS and Ads, so they force you to create pages without all the «stuff» that makes your «normal» pages slow and that you are not willing to take out of them. So your AMP pages will (or at least should) be faster than your «normal» mobile pages.</li>
<li>Instead of sending the visitors to your AMP pages, Google is actually caching your AMP pages on its servers and serving them itself. This assures some server side optimizations their infrastructure already have.</li>
</ol>
<p>Point 2 is the controversial here: you are no longer serving these pages, Google does, and that&#8217;s why it seems Google is stealing your traffic.</p>
<p>In reality, traffic will still count on your web analytics tools, and you still control the content, menus, ads and links you are showing there (with <a href="http://www.christianoliveira.com/blog/en/why-the-bounce-rate-of-my-amp-pages-is-so-high/">some problems carried along as I demonstrate in this post</a>)</p>
<p>BUT, users don&#8217;t completely leave Google when they click on AMP results, they can swipe from one news piece to another between different websites when using the «Top Stories» box, and the URL showed on the user&#8217;s browser is a Google one, not yours.</p>
<p>So the traffic is counted as yours, but it&#8217;s Google serving it, and it&#8217;s Google the one controlling the environment in which the users are seeing your content.</p>
<p>Another complaint the author of the article (Alex Kras) does, is that <a href="http://www.alexkras.com/please-make-google-amp-optional/">AMP is not optional for the user</a>. Contrary to what happens with App indexing, where if you have the app from the result&#8217;s domain installed and Google know that you can check the content there, it will direct you there, but offers another link to just check the content on the website.</p>
<p>&nbsp;</p>
<hr />
<h2>So, should you implement AMP on your website?</h2>
<p>Well, as with every business decision, and <a href="http://www.quora.com/Galicia-Why-do-Galicians-tend-to-respond-to-questions-with-more-questions">as we Galicians always say: it depends!</a></p>
<p>You need to evaluate the pros and cons, and take extra care with the metrics you use to evaluate your decision.</p>
<p>If you rely on Google News traffic, then you probably are already using AMP. If not, you are at disadvantage as most of the results in the «Top Stories» box are AMP ones.</p>
<p>Right now it is not demonstrated that using AMP will give you a rank nor a CTR boost, so if your mobile website is fast enough, you can probably live without AMP.</p>
<p>If Google starts giving AMP results (because they want to promote the technology or because they give speed more weight in their new mobile index), then you need to take that into account as well.</p>
<p>If your mobile website is slow, fix it! Whether you implement AMP or not, speed should be a priority, specially on mobile.</p>
<h2>My take about AMP</h2>
<p>My take here is that <strong>Google is not trying to fool websites and business with AMP</strong> and that the negative aspects of how AMP works right now are more of consequences / limitations of the platform than their goal itself.</p>
<p>In general, if you implement AMP on your website you will see your pages loading faster, which is a good thing. Also, the adoption of AMP is bringing to the table some best practices in terms of web performance that you should follow on your own website too, and not only on the AMP version.</p>
<p>On the other side, <strong>I hope Google stop using its power to make websites to adopt their whole ecosystem</strong>. It should be possible to implement AMP <strong>without using Google&#8217;s cache</strong>, getting the «AMP» label anyway.</p>
<p>Actually, as probably 99,9% of the users don&#8217;t even know what «AMP» means, they should test other kind of labels if they want to highlight «mobile optimized» results, and it should rely on the speed and UX of the destination page, not on AMP.</p>
<hr />
<p>Do you have data to prove any of the assumptions? If so, let me know!</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/">Should I implement AMP? 5 meaningless, not proven or misleading assumptions that may lead you to the wrong decision</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/en/web-analytics/should-i-implement-amp/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Why the bounce rate of my AMP pages is so high?</title>
		<link>https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/</link>
					<comments>https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Wed, 01 Mar 2017 08:05:44 +0000</pubDate>
				<category><![CDATA[En]]></category>
		<category><![CDATA[Web Analytics]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=1720</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-150x150.png" class="alignleft tfe wp-post-image" alt="Qué es AMP" decoding="async" loading="lazy" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-150x150.png 150w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-96x96.png 96w" sizes="auto, (max-width: 150px) 100vw, 150px" /></a>Your AMP pages have a higher than usual bounce rate? Don't worry, your data may be wrong. In this article, I explain you why. </p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/">Why the bounce rate of my AMP pages is so high?</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1720&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Why the bounce rate of my AMP pages is so high?&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
<em>(También puedes <a href="http://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/">leer este artículo en castellano aquí</a>)</em></p>
<blockquote><p>Update: Since October 2017, there is a <a href="https://www.blog.google/products/marketingplatform/analytics/google-analytics-is-enhancing-support-for-amp-on-cache/">partial solution to this developed and announced by Google</a>. Learn more about it <a href="#How_to_partially_solve_the_problem_with_the_solution_provided_by_Google">here</a>.</p>
<p>Also,<a href="https://blog.amp.dev/2018/11/13/developer-preview-of-better-amp-urls-in-google-search/"> Google announced in November 2018 that they had developed a new technology that allows browsers to show the original URL when serving AMP pages from Google&#8217;s cache</a>, called «signed exchanges». This is not live yet but would potentially solve the problems detailed in this post</p></blockquote>
<p>If you have jumped in the AMP wagon and took a look at the metrics, you may be asking yourself <strong>why your AMP pages have a higher than normal bounce rate</strong>.</p>
<p>Take a look at this example, comparing SEO traffic to blog posts, both AMP and non-AMP (it is in both cases organic traffic, this website does not appear in the «Top News» carrousel). As you can see, the behaviour metrics are much worse in the AMP pages:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1709" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp.png" alt="" width="939" height="210" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp.png 939w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-300x67.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-768x172.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-772x173.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-624x140.png 624w" sizes="auto, (max-width: 939px) 100vw, 939px" /><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1710" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp.png" alt="Las métricas de comportamiento para AMP son mucho peores. ¿Por qué?" width="940" height="203" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp.png 940w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-300x65.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-768x166.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-772x167.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-624x135.png 624w" sizes="auto, (max-width: 940px) 100vw, 940px" /></p>
<p>Weird, isn&#8217;t it? We could try and say that a possible explanation for this is that non-AMP traffic gets more recurring visitors, so the quality of their visits is better. But that&#8217;s not the case:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1711" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos.png" alt="" width="914" height="253" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos.png 914w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-300x83.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-768x213.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-772x214.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-624x173.png 624w" sizes="auto, (max-width: 914px) 100vw, 914px" /></p>
<p>What&#8217;s happening is waaaay simpler (and complex, at the same time). <strong>Google Analytics</strong> (or the analytics tool you are using) <strong>is giving you incorrect data</strong>: inflation of unique visitors and sessions, higher than normal bounce rates, increase in referral traffic&#8230;</p>
<p>AMP carries with it an ecosystem where<strong> you are no longer the one serving the content</strong>, with a lot of implications in terms of measuring it. In this post, I explain you, with the highest level of detail, what the problem is, what is it caused by and how can it be solved.</p>
<h2>How AMP works, inside Google</h2>
<h3>What is AMP?</h3>
<p>Before going deeper, let&#8217;s understand what AMP is all about.</p>
<p><a href="http://www.ampproject.org/">AMP (Accelerated Mobile Pages)</a> is an open-source project, led by Google but supported by other partners (Pinterest, Twitter, Linkedin&#8230;) that is trying to define a <strong>standard to create faster pages for mobile devices</strong>.</p>
<p>It was, in part, an answer to <a href="http://instantarticles.fb.com/">Facebook&#8217;s Instant Articles</a> (which is not open-source) and both of the projects have the same goal: when a user clicks on a link, <strong>inside their platforms, the content is loaded instantly</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1673" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp.png" alt="Qué es AMP" width="993" height="486" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp.png 993w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-300x147.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-768x376.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-772x378.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-624x305.png 624w" sizes="auto, (max-width: 993px) 100vw, 993px" /></p>
<p>As, even with the resources, companies (in general) haven&#8217;t really tried to create faster mobile web pages, and the main cause of the slow load speeds are ads and the use of JS, Google (and Facebook) have decided to define new standards with lots of restrictions so, whatever you do, pages will load really fast.</p>
<p>In both cases, besides limiting the <a href="http://www.ampproject.org/docs/reference/spec">html tags and elements that you can include</a> (JS, CSS, ads&#8230;), <strong>both platforms save a copy of your AMP/Instant Article content so they can serve it directly from their servers.</strong></p>
<h3>How are AMP pages served, after performing a search on Google?</h3>
<p>In Google&#8217;s specific case, when a user clicks on any of the AMP results (those with the icon and the AMP label), the content is loaded inmediatly, without leaving Google&#8217;s SERP.</p>
<p><figure id="attachment_1725" aria-describedby="caption-attachment-1725" style="width: 360px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1725" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/2017-02-28_19_25_12.gif" alt="" width="360" height="640" /><figcaption id="caption-attachment-1725" class="wp-caption-text">Accesing AMP content through Google&#8217;s SERP</figcaption></figure></p>
<p>What Google does, is:</p>
<ul>
<li>Once the crawler detects in the «common» URL the amphtml tag, it crawls the AMP URL and validate if it complies with the AMP guidelines.</li>
<li>If that&#8217;s the case, then  the AMP page is cached and asigned to the «common» URL.</li>
<li>Besides that, as the AMP URL has (or should has) the canonical tag pointing to the «common» URL, it shouldn&#8217;t be indexed separately.</li>
</ul>
<p>When a user performs a search from a mobile device, <strong>if a result doesn&#8217;t have AMP version, clicking the result will open the «common» URL in the browser</strong>. The domain server is contacted and the client&#8217;s browser receives the page (this is the common behaviour for any web page).</p>
<p><strong>If a result has indeed an AMP version</strong>, Google highlights that in the result (with the icon and AMP label). When the user clicks on the result, instead of opening the URL in the browser, <strong>this is what happens</strong>:</p>
<p>1. The SERP&#8217;s html already contains a div element that will display the content of any AMP result.</p>
<p><figure id="attachment_1676" aria-describedby="caption-attachment-1676" style="width: 838px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="wp-image-1676 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1.png" alt="Div que alberga contenido AMP en SERP" width="838" height="590" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1.png 838w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-300x211.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-768x541.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-772x544.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-624x439.png 624w" sizes="auto, (max-width: 838px) 100vw, 838px" /><figcaption id="caption-attachment-1676" class="wp-caption-text">This is the div that will display the content of the AMP results, if any of them are clicked.</figcaption></figure></p>
<p>2. After clicking on an AMP result, several elements are loaded inside that div. One of them is an iFrame. This entire layer will load the content directly inside it, without leaving the SERP.</p>
<p><figure id="attachment_1677" aria-describedby="caption-attachment-1677" style="width: 1076px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1677" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp.png" alt="iframe con contenido de AMP" width="1076" height="640" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp.png 1076w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-300x178.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-768x457.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-1024x609.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-772x459.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-624x371.png 624w" sizes="auto, (max-width: 1076px) 100vw, 1076px" /><figcaption id="caption-attachment-1677" class="wp-caption-text">The content is loaded inside an iFrame, that points to the AMP cache URL</figcaption></figure></p>
<p>3. That iFrame points to the specific Google&#8217;s AMP cache URL for that page (e.g., <a href="http://cdn.ampproject.org/v/s/randomtrip.es/tarjeta-sim-portugal-internet-smartphone/amp/?amp_js_v=6">http://cdn.ampproject.org/v/s/randomtrip.es/tarjeta-sim-portugal-internet-smartphone/amp/?amp_js_v=6</a> ). Same happens with the elements of the «Top News» carrousel</p>
<p><figure id="attachment_1678" aria-describedby="caption-attachment-1678" style="width: 1079px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1678" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp.png" alt="Elementos LI en Top News AMP de Google" width="1079" height="599" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp.png 1079w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-300x167.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-768x426.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-1024x568.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-772x429.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-624x346.png 624w" sizes="auto, (max-width: 1079px) 100vw, 1079px" /><figcaption id="caption-attachment-1678" class="wp-caption-text">Each element of the «Top News» carrousel has its own li element to display its content</figcaption></figure></p>
<p>4. If the user, after opening an AMP result, closes the article using the X up left, the layer is closed and he/she can continue navigating through the results.</p>
<p>5. In the specific case of the «Top News» carrousel, if the user use the swipe function, the next article is loaded (next li with the corresponding iFrame)</p>
<p>6. If the user clicks on any link inside the content of an AMP result, he/she leaves this environment and the «common» URL is loaded inside the browser, as always (the non-AMP URLs are the ones loaded, even if the link has a corresponding AMP version)</p>
<p><figure id="attachment_1680" aria-describedby="caption-attachment-1680" style="width: 1214px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1680" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1.png" alt="Link interno AMP " width="1214" height="575" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1.png 1214w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-300x142.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-768x364.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-1024x485.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-772x366.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-624x296.png 624w" sizes="auto, (max-width: 1214px) 100vw, 1214px" /><figcaption id="caption-attachment-1680" class="wp-caption-text">If the user clicks on any internal link inside the AMP content, he/she leaves the Google environment and the «common» URLs is loaded in the browser.</figcaption></figure></p>
<p><img loading="lazy" decoding="async" class="size-full wp-image-1682" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2.png" alt="Carga de página enlazada desde AMP" width="646" height="654" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2.png 646w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2-296x300.png 296w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2-96x96.png 96w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2-616x624.png 616w" sizes="auto, (max-width: 646px) 100vw, 646px" /></p>
<h2>How AMP works, regarding Analytics?</h2>
<p>Now that we understand how Google serves the AMP pages inside their SERPs, there are two main consequences that we need to explore, in terms of Analytics:</p>
<ul>
<li><strong>AMP pages are served by Google, not by our</strong> <strong>server</strong>. Our server doesn&#8217;t even know that a page has been served to a user.</li>
<li><strong>The domain that serves the AMP page is cdn.ampproject.org</strong>, whose content is loaded inside an iFrame, in Google&#8217;s corresponding domain (e.g., www.google.es)</li>
</ul>
<h3>AMP pages are served by Google, not by our server</h3>
<p>If we perform a <strong>log analysis filtering AMP URLs in our server, we&#8217;ll probably see that the traffic pattern has nothing to do to what Google Analytics shows</strong> (or your Analytics tool). In fact, most of the hits will be from Googlebot.</p>
<p>The only ways (right now) to reach an AMP page are (unless you don&#8217;t have a responsive / mobile version and you are sending all mobile traffic to your AMP pages):</p>
<ul>
<li>Through Google (or other 3rd parties adopting the technology, like LinkedIn, Pinterest&#8230;)</li>
<li>Accessing directly to an AMP URL in your broswer.</li>
<li>Through links that shouldn&#8217;t be out there, pointing to AMP pages (email, social networks, 3rd party websites&#8230;)</li>
</ul>
<p>The first case is the most common (at least by now). <strong>In that case, the visit never reachs our server</strong>. Google serves the page directly, along with the images and other resources, through cdn.ampproject.org and its static domains:</p>
<p><figure id="attachment_1684" aria-describedby="caption-attachment-1684" style="width: 926px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1684" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1.png" alt="Página AMP servida desde Google" width="926" height="527" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1.png 926w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-300x171.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-768x437.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-772x439.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-624x355.png 624w" sizes="auto, (max-width: 926px) 100vw, 926px" /><figcaption id="caption-attachment-1684" class="wp-caption-text">The AMP page is served directly from google.es, through Google&#8217;s AMP cache domain (cdn.ampproject.org). There is not a single petition to the original domain (randomtrip.es)</figcaption></figure></p>
<h3>AMP pages are served from a different domain</h3>
<p>As Google is the one serving the pages, from his servers, <strong>the domain serving the pages is not our original domain</strong>, but one he decides. Right now Google is using cdn.ampproject.org (sometimes also yourwebsite.cdn.ampproject.org), using an iFrame loaded directly inside the SERPs.</p>
<p><strong>This has a lot of implications regarding analytics</strong>, as the analytics code is being executed in a different domain and so, <strong>it can&#8217;t read the cookies of the original domain</strong>.</p>
<p>Some issues that happen regarding analytics, creating <strong>unrealiable data</strong>:</p>
<ul>
<li>A user that visits one of our AMP pages through Google, and a non-AMP page through any method, is counted as two visitors.</li>
<li>A visit that starts in an AMP page through Google and continues with an internal link to a non-AMP page, is counted as two visits.</li>
<li>The bounce rate (measured by default) of an AMP page is 100% unless there are several AMP results from our domain in the SERP and the user visit several of them in the same session.</li>
<li>A visit coming from an AMP page through Google to our website (through internal links) is considered «Referral traffic» from cdn.ampproject.org</li>
</ul>
<p>Below, all of these cases are  reproduced and investigated step by step.</p>
<h2>Why AMP analytics data lies?</h2>
<p><strong>The term «unique visitor» is getting more and more false day by day.</strong> Users using different browsers, different devices and private/incognito options (or manually deleting the cookies) makes identifying a real user through a cookie impossible.</p>
<p>This means that, <strong>even without AMP, we are suffering «duplication» of unique visitors constantly</strong></p>
<p>So what happens with AMP? There are different cases, depending on where the content is loaded, and, in some cases, the order of visiting each of the scenarios (all of the cases explained here refer to the use of a mobile device).</p>
<p><strong>1. User access our website through his mobile browser.</strong> This is the most typical use-case for accesing our website: someone wants to check our website, and types our URL directly in the browser (or through favorites, or through Google Search).</p>
<p>To decide if a user is new or not, Google Analytics checks the «_ga» cookie. If it exists, the JS obtains the «clientID» value from it and send it to GA servers. If not, it creates the cookie along a new «clientID» in order to identify the user in the future interactions.</p>
<p>In this case, while doing the test, we are using a new «user» in Chrome so we don&#8217;t have any cookie set yet, and so a new one is created.</p>
<p>Our clientID for this domain:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1696" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-1-visita-url-no-amp-cid.png" alt="ClientId común (guardado en cookie _ga) para esta web" width="192" height="23" /></p>
<p><figure id="attachment_1697" aria-describedby="caption-attachment-1697" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1697" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp.png" alt="Info enviada a Google Analytics al acceder a la web" width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1697" class="wp-caption-text">When accesing the website directly, Google Analytics&#8217; behaviour is the «normal» one. A clientID is generated and stored in the _ga cookie, and the value sent to the GA servers.</figcaption></figure></p>
<p><strong>2. User access directly to an AMP page:</strong> this case, generally, will not be common (unless we share/link our AMP URLs, or implement our mobile website directly with AMP).</p>
<p>We are still in our domain (randomtrip.es), and so, the GA code should be able to access the previous cookie (_ga) and know that we are still the same user, right?</p>
<p>Well, and here «the party starts», that&#8217;s not the case:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1698" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png" alt="Cookie generada para página AMP, en un mismo dominoi" width="501" height="22" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png 501w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid-300x13.png 300w" sizes="auto, (max-width: 501px) 100vw, 501px" /></p>
<p><figure id="attachment_1700" aria-describedby="caption-attachment-1700" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1700" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1.png" alt="Información enviada a Google Analytics al acceder a una página AMP." width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1700" class="wp-caption-text">Even loading an AMP page inside our same domain (randomtrip.es) where a _ga cookie already exists, GA identify us as a different user. Why?</figcaption></figure></p>
<p>What happens here is that Google Analytics&#8217; AMP JS uses a cookie indeed, but the one it uses (AMP_ECID_GOOGLE) is different than the cookie GA uses in non-AMP pages (_ga).</p>
<p>So, clientID is different in this case, and this two sequential interactions would result in two unique visitors with two individual sessions.</p>
<p><strong>3. User performs a search on Google and clicks an AMP result:</strong> This is the most common use-case for AMP</p>
<p>Content is loaded through Google&#8217;s AMP Cache, inside Google&#8217;s domain (let&#8217;s say google.es) through an iFrame that points to cdn.ampproject.org, and <strong>the user identification information (the clientID) is saved in the LocalStorage for the google.es domain</strong>, instead of in a cookie (it doesn&#8217;t use _ga cookie, nor the _AMP_ECID_GOOGLE cookie). <strong>The value stored there is unique and, of course, different</strong> from the previous values in the cases 1 and 2.</p>
<p>Funny, uh? :D (notice the sarcasm here). So that would be our third interaction with this website, andthis is our third clientID:</p>
<pre><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1694" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png" alt="Cid asignado al acceder a AMP desde Google" width="473" height="17" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png 473w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid-300x11.png 300w" sizes="auto, (max-width: 473px) 100vw, 473px" /></pre>
<p><figure id="attachment_1695" aria-describedby="caption-attachment-1695" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1695" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia.png" alt="Datos enviados a Google Analytics al acceder a página AMP desde búsqueda en Google" width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1695" class="wp-caption-text">While accesing this AMP result from Google SERP, this is the clientID sent to GA, different from the two first ones for the same website.</figcaption></figure></p>
<p>So, we (I) are already three unique visitors, with three different sessions!</p>
<p><strong>4. User access directly the Google AMP&#8217;s cache URL:</strong> this case is starting to be a common one for third party apps adopting AMP (LinkedIn, Pinterest&#8230;), or could happen in the strange case a user access directly one of those URLs through any other method. The URL is like this: <a href="http://cdn.ampproject.org/v/s/randomtrip.es/barco-flores-lombok-komodo/amp/?amp_js_v=6">http://cdn.ampproject.org/v/s/randomtrip.es/barco-flores-lombok-komodo/amp/?amp_js_v=6</a></p>
<p>In this case, the method used by GA is the same than in the previous case (the LocalStorage, not the cookie) but it uses instead the LocalStorage for the subdomain cdn.ampproject.org, so the value stored for the clientID is, again, a new one, different from all the other cases.</p>
<p>We have our forth clientID, for the same website, using the same browser and without deleting cookies.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1701" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png" alt="ClientID al acceder directamente a la cdn de Google para AMP" width="465" height="16" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png 465w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid-300x10.png 300w" sizes="auto, (max-width: 465px) 100vw, 465px" /></p>
<p><figure id="attachment_1702" aria-describedby="caption-attachment-1702" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1702" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp.png" alt="Información enviada a Google Analytics al acceder directamente a la CDN de AMP de Google" width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1702" class="wp-caption-text">This would be our 4th clientID for the same website!</figcaption></figure></p>
<p><strong>5. User access directly to the URL Google shows when clicking an AMP result:</strong> this case is common as it happens when a user gets to an AMP page through Google and, when deciding to share it (by email, social networks, etc.) copies the visible URL in their browser or using the native «sent to» option.</p>
<p><a href="http://9to5google.com/2017/02/06/google-amp-original-link/" target="_blank" rel="noopener noreferrer">Google is trying to avoid this behaviour, but IMO in a ineffective way</a>. The visible URL is still their own ;)</p>
<p>The URL would be like <a href="http://www.google.es/amp/s/randomtrip.es/barco-flores-lombok-komodo/amp/">http://www.google.es/amp/s/randomtrip.es/barco-flores-lombok-komodo/amp/</a> (you can&#8217;t access this kind of URL from desktop &#8211; you will be redirected to the original one. You can access it from a mobile device).</p>
<p>In this case, we are in the google.es domain, and the clientID value is saved in the LocalStorage.</p>
<p>Now something interesting happens.</p>
<p>If different values for the clientID exist in both the LocalStorage of google.es (or the corresponding Google domain) and cdn.ampproject.org, the second one is the one sent. So, once we access cdn.ampproject.org, cases 3, 4 and this one (5) should send the same clientID value (not bad :D)</p>
<p>In this case, this is the clientID sent to GA servers (same as in case 4):</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1703" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-1-visita-url-amp-desde-google-cid.png" alt="ClientID al acceder a la URL de Google para AMP directamente" width="470" height="20" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-1-visita-url-amp-desde-google-cid.png 470w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-1-visita-url-amp-desde-google-cid-300x13.png 300w" sizes="auto, (max-width: 470px) 100vw, 470px" /></p>
<p><figure id="attachment_1704" aria-describedby="caption-attachment-1704" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1704" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google.png" alt="Información enviada a Google Analytics al acceder directamente a la URL propia que genera desde el SERP." width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1704" class="wp-caption-text">In this case, we are accessing a environment where a clientID already exists, so it is used and we are the same user we were in the other interaction.</figcaption></figure></p>
<p>So: the clientID generated in the case 3, will never be used again, because now the one generated in the case 4 will be the chosen one for both cases. Depending in the order of interaction of the user with our website, both will be generated or not, and we will have more or less duplication of «unique visitors» and visits.</p>
<p><strong>6. User access AMP version through a third party app:</strong> There is one last case, that is starting to appear now, which is third party apps.</p>
<p>LinkedIn, Pinterest, Flipboard&#8230; are already including AMP version on the links shared by anyone inside their platform instead of the «common» ones, directing the traffic directly to the Google AMP&#8217;s cache URL (cdn.ampproject.org or yourwebsite.ampproject.org), which would be same as case 4.</p>
<p><figure id="attachment_1713" aria-describedby="caption-attachment-1713" style="width: 676px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1713" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app.png" alt="AMP en la App de Linkedin" width="676" height="607" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app.png 676w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app-300x269.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app-624x560.png 624w" sizes="auto, (max-width: 676px) 100vw, 676px" /><figcaption id="caption-attachment-1713" class="wp-caption-text">In the LinkedIn APP, AMP content is loaded directly using Google&#8217;s AMP Cache URL</figcaption></figure></p>
<p>I couldn&#8217;t try yet, but as these apps open the link in a html viewer inside the apps themselves, it is possible that each one of them could generate a new clientID. Anyway, some of them use the Chrome engine, so this may not be the case. If you happen to test it, please say so in the comments so we can complete the information for this case! :)</p>
<hr />
<p>So, we have 6+ scenarios, 4 of which (at least) generate a different clientID, which means that what before AMP was (ideally) <strong>one unique visitor, now can be counted as up to 4 unique visitors</strong><strong>:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1698" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png" alt="Cookie generada para página AMP, en un mismo dominoi" width="501" height="22" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png 501w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid-300x13.png 300w" sizes="auto, (max-width: 501px) 100vw, 501px" /><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1694" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png" alt="Cid asignado al acceder a AMP desde Google" width="473" height="17" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png 473w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid-300x11.png 300w" sizes="auto, (max-width: 473px) 100vw, 473px" /><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1696" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-1-visita-url-no-amp-cid.png" alt="ClientId común (guardado en cookie _ga) para esta web" width="192" height="23" /><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1701" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png" alt="ClientID al acceder directamente a la cdn de Google para AMP" width="465" height="16" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png 465w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid-300x10.png 300w" sizes="auto, (max-width: 465px) 100vw, 465px" /></p>
<p>All of this is also <a href="http://developers.google.com/analytics/devguides/collection/amp-analytics/client-id">explained here by Google itself</a>, and <a href="http://twitter.com/cramforce/status/837289470273683457">confirmed by the creator and tech lead of AMP as a known issue</a></p>
<h3>Impacted Metrics</h3>
<p>As you can imagine, the consequences of this «errors» regarding analytics are that <strong>lots of metrics inaccurate</strong>, so we need to be careful when we analyze data if AMP traffic is involved.</p>
<ul>
<li><strong>Unique visitors:</strong> as we have just checked, a user accessing from the same device, using the same browser and withouth deleting cookies, <strong>can be counted as up to 4 unique visitors</strong> depending on how he/she access our AMP pages.</li>
<li><strong>Sessions:</strong> if a user visits an AMP page, in any of the environments and leaves, there is no problem in terms of sessions. But, if he continue navigating our website, from the AMP page to any other non-AMP page on our website, apart from being counted as a new Unique Visitor, a new session is started, <strong>so it is counted as two sessions</strong><strong>.</strong></li>
<li><strong>Bounce rate:</strong> due to the previous reasons, when a session is divided in two, <strong>the first session would have only one pageview (so it will be counted as a bounce)</strong>. The second session, if it only checks one page, would also be considered a bounce. So, the bounce rate will be increased incorrectly (the complete session should not be considered a bounce, but it ends being two bounce sessions). And this happens both for AMP and non-AMP pages.</li>
<li><strong>Pageviews per session:</strong> also in consequence of the previous reasons, instead of having 2 pageviews/session, we would have 1 pageview/session.</li>
<li><strong>Traffic sources:</strong> traffic coming from our AMP pages to our non-AMP pages from 3rd parties, will be counted as entry traffic (new sessions) and <strong>its source would be «Referral Traffic», from cdn.ampproject.org (or yourwebsite.cdn.ampproject.org)</strong></li>
</ul>
<p>These are the most common metrics directly affected. As you can imagine, as these ones are affected, so are most of the rest, as most of them depend on these ones to be calculated.</p>
<p>For example: <strong>in an e-commerce, if a user enters our website through an AMP page in Google and ends buying something in the same session, the sale would be attributed to the «second user», and the source of that visit would be «Referral Traffic», instead of «Search Engines».</strong></p>
<h2>How to avoid Analytics duplicating users with AMP?</h2>
<p><strong>Luckily, a solution exists, </strong>to avoid clientIDs to be different in any of these cases. The solution is technically complex, but feasible. It is only valid for the data collected after its implementation, not for the already collected data.</p>
<p>It&#8217;s unbelievable that Google hasn&#8217;t done anything yet to fix this situation (neither they did with <a href="http://botcrawl.com/lifehacker-com-referral-spam/">the Spam problem in Google Analytics</a>), when AMP has been live on the SERPs for year.</p>
<p><strong>The solution</strong>, which I haven&#8217;t tested yet, <strong>can be found in this post</strong> from <a href="http://twitter.com/SimoAhava">Simo Ahava</a>:</p>
<p><a href="http://www.simoahava.com/analytics/google-analytics-client-id-amp-pages/">http://www.simoahava.com/analytics/google-analytics-client-id-amp-pages/</a></p>
<p>Basically it consists on creating a proxy in our own domain (we need http, at least in the proxy URL)</p>
<p>In the amp-analytics component configuration, you can define that before sending the data to Google Analytics servers, more configuration information should be obtained from an external URL.</p>
<p>Contrary to most of the AMP resources (which Google cache on their servers and serve them directly), this petition to this URL is not cached, and it is performed every time the page finishes loading, from the client, while the page keeps the focus.</p>
<p>As the petition is to a URL from our own domain, cookies from our domain are sent, so the proxy just checks if the _ga cookie exists, and if that&#8217;s the case, gets the clientID value from it to return it to the client. The client receives the «correct» clientID and sends the information to GA servers.</p>
<p>Besides that, the _ga cookie must be updated the same way Google Analytics normally does.</p>
<p><strong>Problems:</strong></p>
<ul>
<li>Not a trivial implementation.</li>
<li>You need http in your server (at least for the proxy URL)</li>
<li>It&#8217;s not an official solution, so this can lead to problems in the future.</li>
<li>If you implement it wrong, the results can be worse</li>
<li>Doesn&#8217;t work on Safari, when accessing the content through Google&#8217;s AMP cache.</li>
</ul>
<p>UPDATE (02/03/2017): Malte Ubl, creator and tech lead of the AMP Project, <a href="http://twitter.com/cramforce/status/837294718392418305">just said on Twitter that Simo&#8217;s solution is indeed a good one</a>, with the caveat that won&#8217;t work when using Safari and accessing the content through Google&#8217;s AMP cache (as Safari blocks 3rd party cookies)</p>
<p><figure id="attachment_1737" aria-describedby="caption-attachment-1737" style="width: 555px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1737" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id.png" alt="" width="555" height="647" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id.png 555w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id-257x300.png 257w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id-535x624.png 535w" sizes="auto, (max-width: 555px) 100vw, 555px" /><figcaption id="caption-attachment-1737" class="wp-caption-text"><a href="http://twitter.com/cramforce/status/837294718392418305">Conversación en twitter</a></figcaption></figure></p>
<h2>What happens with historical data?</h2>
<p>If you manage to implement the previous solution, it will just fix the problem after the implementation is done. The data you already have in your Google Analytics would still be wrong.</p>
<p>What can you do? Not a lot, but if you really need to try and fix the data (at least the basic metrics), <strong>you can try with the following, finding an aproximation of how the data should be</strong>:</p>
<ul>
<li>As sessions who navigate inside an AMP page end on our website, we have them controlled: they all are under the «Referral Traffic» section, from cdn.ampproject.org.</li>
<li>If you want to correct the bounce rate, you can get from one side the AMP pages visits, on the other side the visits from cdn.ampproject.org and try co re-calculate the value. E.g., if you have 1000 visits to AMP pages, with a 89% bounce rate, and then 200 visits from cdn.ampproject.org, you would have:
<ul>
<li>110 visits (11%) were not bounces, as they visited several AMP pages in the same session.</li>
<li>200 visits have been considered bounces, but they are not, as they come from your AMP pages.</li>
<li>So, you have 310 visits which were not bounces.</li>
<li>Aprox. of real bounce rate, corrected: 690 bounces (1000-310) out of 1000 (69% instead of 89%)</li>
</ul>
</li>
</ul>
<p>Based on this, you can try to do the same with other metrics.</p>
<h2>How to (partially) solve the problem with the solution provided by Google</h2>
<p>Google developed a partial solution to this problem available to all google domains since October 2017.<a href="https://www.blog.google/products/marketingplatform/analytics/google-analytics-is-enhancing-support-for-amp-on-cache/"> You can read about it here</a> and you can also check my talk about it at <a href="https://www.searchmetrics.com/summit-11-2017-speaker/">Searchmetrics Summit 2017:</a></p>
<p><iframe loading="lazy" style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" src="//www.slideshare.net/slideshow/embed_code/key/gX23MGMFQKff5t" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"> </iframe></p>
<p>It&#8217;s important to note that this solution is not included «by default», so if you are using AMP in any of your websites, you need to to the following in order to get this solution working:</p>
<p>1. On all your non-AMP pages, set the value of the parameter &#8216;useAMPclientID&#8217; to «true»</p>
<p>2. On all your AMP pages, include this tag on the head:</p>
<pre>&lt;meta name="amp-google-client-id-api" content="googleanalytics"&gt;</pre>
<p>3. Use referral exclusion on GA: you need to set up referral exclusion with this domain cdn.ampproject.org</p>
<p>More info about how to implement and debug the solution: <a href="https://support.google.com/analytics/answer/7486764?hl=en">https://support.google.com/analytics/answer/7486764?hl=en</a></p>
<p>Appart from this, <a href="https://blog.amp.dev/2018/11/13/developer-preview-of-better-amp-urls-in-google-search/">Google announced that, using a new technology called Signed Exchanges, they soon will be able to serve AMP pages from Google&#8217;s AMP cache showing your original URL</a>, which would potentially solve the problems stated in this post.</p>
<hr />
<h2>TL/DR</h2>
<p>We&#8217;ve just checked that the same «unique visitor» ends up being counted as up to 4 unique visitors due to how AMP works, generating wrong metrics in our Analytics tool.</p>
<p>Worst thing is that maybe you didn&#8217;t even realize, and you may have been worried about the high bounce rate on your AMP pages.</p>
<p>By now, unless you manage to try the solution indicated in this post, there is not much else to do. But it&#8217;s important to take this into account before jumping into conclusions with our data, when AMP traffic is involved</p>
<p>Ideally, Google will provide an official solution. By now, there is a <a href="http://github.com/ampproject/amphtml/issues/5761">task in AMP&#8217;s Github</a>, but it&#8217;s been there for some months without any specific plans of being implemented. Besides that, if AMP adoption by 3rd parties continue growing, the number of unique visitors generated by the same device can grow even more.</p>
<p>UPDATE (02/03/2017): <a href="http://twitter.com/cramforce/status/837291154139922432">Google&#8217;s completely aware of this problem and trying to find a solution (although no easy)</a></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1736" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga.png" alt="" width="625" height="572" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga.png 625w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga-300x275.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga-624x571.png 624w" sizes="auto, (max-width: 625px) 100vw, 625px" /></p>
<p>Additional reads:</p>
<ul>
<li><a href="http://simoahava.com/analytics/accelerated-mobile-pages-via-google-tag-manager/">Accelerated Mobile Pages via Google Tag Manager</a></li>
<li><a href="http://medium.com/relay-media/whats-going-on-with-amp-analytics-5595af2dcc71">What’s Going On With AMP Analytics?</a></li>
<li><a href="http://www.gsqi.com/marketing-blog/how-to-set-up-adjusted-bounce-rate-on-accelerated-mobile-pages-amp-using-google-tag-manager/">How To Set Up Adjusted Bounce Rate on Accelerated Mobile Pages (AMP) Using Google Tag Manager</a></li>
</ul>
<hr />
<p>Hope the post has been useful. If that&#8217;s the case, share it! :)</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/">Why the bounce rate of my AMP pages is so high?</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>¿Por qué mis páginas de AMP tienen un porcentaje de rebote tan alto?</title>
		<link>https://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/</link>
					<comments>https://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Wed, 01 Mar 2017 04:47:24 +0000</pubDate>
				<category><![CDATA[Analítica web]]></category>
		<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=1669</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-150x150.png" class="alignleft tfe wp-post-image" alt="Qué es AMP" decoding="async" loading="lazy" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-150x150.png 150w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-96x96.png 96w" sizes="auto, (max-width: 150px) 100vw, 150px" /></a>¿Tus páginas de AMP tienen un porcentaje de rebote más alto de lo habitual? No te preocupes, el dato puede no ser correcto. En este artículo te explico por qué.</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/">¿Por qué mis páginas de AMP tienen un porcentaje de rebote tan alto?</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1669&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;¿Por qué mis páginas de AMP tienen un porcentaje de rebote tan alto?&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
<em>(You can also <a href="http://www.christianoliveira.com/blog/en/web-analytics/why-the-bounce-rate-of-my-amp-pages-is-so-high/">read this article in English here</a>)</em></p>
<blockquote><p>Actualización: Desde Octubre de 2017, <a href="https://www.blog.google/products/marketingplatform/analytics/google-analytics-is-enhancing-support-for-amp-on-cache/">Google desarrolló y anunció una solución parcial al problema descrito en este post</a>. Puedes leer más sobre ello <a href="#Como_solucionar_parcialmente_este_problema_con_la_solucion_propuesta_por_Google">aquí</a>.</p>
<p>Además, <a href="https://blog.amp.dev/2018/11/13/developer-preview-of-better-amp-urls-in-google-search/">Google anunció en Noviembre de 2018 que ha desarrollado una nueva tecnología que permitirá a los navegadores mostrar la URL original cuando sirvan la versión AMP desde la caché de Google</a>, llamada «Signed Exchanges». Todavía no está implementado en las versiones más recientes de los navegadores pero solucionaría potencialmente los problemas detallados en este artículo.</p></blockquote>
<p>Si te has subido al carro de AMP, y has indagado un poco en las métricas puede que te estés preguntando <strong>por qué tus nuevas páginas tienen un porcentaje de rebote tan alto</strong> (muchas veces mayor que las versiones «normales» de las mismas páginas).</p>
<p>Aquí tenéis un ejemplo, comparando el tráfico de un blog a posts (no categorías, ni home) AMP y NO AMP (tráfico orgánico a AMP, la web no sale en el carrusel de Noticias Destacadas). Como podéis ver, las métricas de comportamiento son mucho peores en el caso de AMP.</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1709" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp.png" alt="" width="939" height="210" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp.png 939w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-300x67.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-768x172.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-772x173.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-624x140.png 624w" sizes="auto, (max-width: 939px) 100vw, 939px" /> <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1710" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp.png" alt="Las métricas de comportamiento para AMP son mucho peores. ¿Por qué?" width="940" height="203" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp.png 940w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-300x65.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-768x166.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-772x167.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-amp-624x135.png 624w" sizes="auto, (max-width: 940px) 100vw, 940px" /></p>
<p>Es raro, ¿no? Podríamos decir que una posible explicación es que el tráfico no AMP tiene más usuarios recurrentes, y que por eso tiene mejor calidad. Pero no es el caso:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1711" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos.png" alt="" width="914" height="253" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos.png 914w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-300x83.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-768x213.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-772x214.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/rebote-trafico-no-amp-recurrentes-nuevos-624x173.png 624w" sizes="auto, (max-width: 914px) 100vw, 914px" /></p>
<p>Lo que está pasando es mucho más simple (y a la vez complejo): <strong>Google Analytics</strong> (o la herramienta de medición que utilices) <strong>te está dando datos incorrectos</strong>: inflación de usuarios únicos y sesiones, porcentajes de rebote más altos de lo habitual, aumento del tráfico de referencia&#8230;</p>
<p>AMP trae «de regalo» un ecosistema en el que <strong>tú ya no eres el que sirve el contenido</strong>, con todo lo que eso conlleva de cara a la medición del uso de estas páginas. En este artículo, te explico con todo nivel de detalle cuál es el problema con las métricas en AMP, a qué se debe, y cómo se puede solucionar.</p>
<h2>Cómo funciona AMP, en Google</h2>
<h3>Qué es AMP</h3>
<p>Antes de profundizar en sus entresijos, conviene entender en qué consiste AMP.</p>
<p><a href="http://www.ampproject.org/">AMP (Accelerated Mobile Pages)</a> es un proyecto open source, liderado por Google pero secundado por otros partners (Pinterest, Twitter, Linkedin&#8230;), que pretende definir un <strong>estándar para realizar páginas para dispositivos móviles más rápidas</strong>.</p>
<p>Apareció, en parte, como respuesta a <a href="http://instantarticles.fb.com/">Instant Articles de Facebook</a> (que no es open source) y ambos proyectos tienen el mismo objetivo: que cuando el usuario pinche en un link, <strong>dentro de sus plataformas, pueda visualizar el contenido de forma inmediata.</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1673" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp.png" alt="Qué es AMP" width="993" height="486" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp.png 993w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-300x147.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-768x376.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-772x378.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/que-es-amp-624x305.png 624w" sizes="auto, (max-width: 993px) 100vw, 993px" /></p>
<p>Como, a pesar de tener los recursos, las empresas (en general) no han creado webs móviles muy rápidas, y la causa de su lentitud suelen ser principalmente la publi y el uso de JS, Google (y Facebook) han decidido definir unos estándares con muchas restricciones para que sí o sí, tu web cargue muy rápido.</p>
<p>Para ello, en ambos casos, además de limitar el número de <a href="http://www.ampproject.org/docs/reference/spec">etiquetas html y elementos que se pueden incluir</a> (JS, CSS, anuncios y demás), <strong>ambas plataformas cachean una copia de tu contenido</strong> en versión AMP/Instant Article <strong>para servirla directamente desde sus servidores</strong>.</p>
<h3>¿Cómo se sirven las páginas AMP cuando realizas una búsqueda en Google?</h3>
<p>En el caso concreto de Google, al clickar en cualquier resultado que muestre el símbolo del rayo y «AMP» al lado, cargará, sin salir del SERP de Google, la página correspondiente, de forma prácticamente inmediata.</p>
<p><figure id="attachment_1725" aria-describedby="caption-attachment-1725" style="width: 360px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1725" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/2017-02-28_19_25_12.gif" alt="" width="360" height="640" /><figcaption id="caption-attachment-1725" class="wp-caption-text">Ejemplo de acceso a página AMP desde los resultados de búsqueda de Google</figcaption></figure></p>
<p>Esto es así porque lo que Google hace es:</p>
<ul>
<li>Una vez detecta en una URL «común» la etiqueta que indica su versión AMP, la rastrea, valida que el html cumpla los estándares AMP</li>
<li>Si es así, se guarda una copia en caché y marca que la URL «normal» tiene versión AMP, asociando la una a la otra.</li>
<li>Además, como la URL tiene (o debería) tener una canonical apuntando a la normal, no se debería indexar por separado en el índice de Gogle.</li>
</ul>
<p>Cuando alguien hace una búsqueda en mobile, <strong>si un resultado no tiene versión AMP, al pinchar en el link se abre esa URL en el navegador</strong>, se contacta al servidor del dominio en cuestión y se obtiene el contenido de la página (como toda la vida, vamos!)</p>
<p><strong>Si un resultado sí tiene versión AMP,</strong> Google muestra el símbolo del rayo y las letras AMP. Al pinchar, <strong>en lugar de abrir la URL original del resultado en el navegador</strong> (ya sea la URL AMP o la «común»), <strong>lo que pasa es lo siguiente</strong>:</p>
<p>1. En el html mobile, Google tiene un div ya preparado para albergar el contenido de cualquier resultado AMP.</p>
<p><figure id="attachment_1676" aria-describedby="caption-attachment-1676" style="width: 838px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="wp-image-1676 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1.png" alt="Div que alberga contenido AMP en SERP" width="838" height="590" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1.png 838w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-300x211.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-768x541.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-772x544.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/div-carga-contenido-amp-1-624x439.png 624w" sizes="auto, (max-width: 838px) 100vw, 838px" /><figcaption id="caption-attachment-1676" class="wp-caption-text">Ese div es el que va a albergar el contenido de los resultados AMP si pinchamos en alguno</figcaption></figure></p>
<p>2. Al pinchar en el resultado, dentro de ese div se cargan una serie de elementos, entre ellos un iFrame. Esta capa carga el contenido del resultado correspondiente, sin salir de la página de resultados el la que el usuario está.</p>
<p><figure id="attachment_1677" aria-describedby="caption-attachment-1677" style="width: 1076px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1677" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp.png" alt="iframe con contenido de AMP" width="1076" height="640" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp.png 1076w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-300x178.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-768x457.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-1024x609.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-772x459.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/iframe-resultado-amp-624x371.png 624w" sizes="auto, (max-width: 1076px) 100vw, 1076px" /><figcaption id="caption-attachment-1677" class="wp-caption-text">El contenido se carga dentro de un iFrame, que apunta a la URL de la caché de Google AMP</figcaption></figure></p>
<p>3. Ese iFrame, apunta a la <strong>URL de la caché de Google para la URL de AMP del resultado</strong> correspondiente (ej: <a href="http://cdn.ampproject.org/v/s/randomtrip.es/tarjeta-sim-portugal-internet-smartphone/amp/?amp_js_v=6">http://cdn.ampproject.org/v/s/randomtrip.es/tarjeta-sim-portugal-internet-smartphone/amp/?amp_js_v=6</a> ). Lo mismo ocurre en el carrusel de «Noticias destacadas»</p>
<p><figure id="attachment_1678" aria-describedby="caption-attachment-1678" style="width: 1079px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1678" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp.png" alt="Elementos LI en Top News AMP de Google" width="1079" height="599" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp.png 1079w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-300x167.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-768x426.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-1024x568.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-772x429.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/li-carrusel-top-news-amp-624x346.png 624w" sizes="auto, (max-width: 1079px) 100vw, 1079px" /><figcaption id="caption-attachment-1678" class="wp-caption-text">Cada elemento del carrusel de «Noticias destacadas» tiene su propio elemento li para albergar su contenido con un iFrame</figcaption></figure></p>
<p>4. Si el usuario cierra con el aspa superior izquierda, se cierra la capa y sigue donde estaba (en el SERP)</p>
<p>5. Si el usuario hace «swipe» (en el caso del carrusel de «Top News») se pasa al siguiente elemento de la lista (otro iFrame con la URL de la caché de Google que corresponda)</p>
<p>6. Si el usuario pincha en algún link o elemento dentro del contenido de cualquiera de los artículos AMP, se va fuera y ahora sí se abre con el navegador la URL correspondiente (versión NO-AMP, aunque la URL la tenga)</p>
<p><figure id="attachment_1680" aria-describedby="caption-attachment-1680" style="width: 1214px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1680" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1.png" alt="Link interno AMP " width="1214" height="575" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1.png 1214w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-300x142.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-768x364.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-1024x485.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-772x366.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-1-624x296.png 624w" sizes="auto, (max-width: 1214px) 100vw, 1214px" /><figcaption id="caption-attachment-1680" class="wp-caption-text">Si pinchamos en algún link interno (o externo) dentro del contenido de AMP, este nos lleva fuera de Google</figcaption></figure></p>
<p><figure id="attachment_1682" aria-describedby="caption-attachment-1682" style="width: 646px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1682" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2.png" alt="Carga de página enlazada desde AMP" width="646" height="654" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2.png 646w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2-296x300.png 296w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2-96x96.png 96w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/link-interno-amp-2-2-616x624.png 616w" sizes="auto, (max-width: 646px) 100vw, 646px" /><figcaption id="caption-attachment-1682" class="wp-caption-text">Y la página enlazada se sirve ya en su versión «normal» (no-AMP)</figcaption></figure></p>
<h2>¿Cómo funciona AMP a nivel de analítica?</h2>
<p>Una vez hemos entendido cómo sirve Google las páginas AMP dentro de sus resultados de búsqueda, hay dos puntos fundamentales que afectan a nivel de analítica:</p>
<ul>
<li><strong>Las páginas las sirve Google, no nuestro servidor</strong>. Nuestro servidor ni siquiera sabe que se ha servido una página.</li>
<li><strong>El dominio que sirve la página es cdn.ampproject.org</strong>, cuyo contenido se carga con un iFrame dentro del dominio de Google en el que se realizase la búsqueda (por ejemplo www.google.es)</li>
</ul>
<h3>Las páginas las sirve Google, no nuestro servidor</h3>
<p>Si hacemos un <strong>análisis de logs en nuestro servidor</strong> de las URLs AMP que tengamos, veremos que probablemente el <strong>patrón de tráfico no tenga nada que ver con lo que nos muestra Google Analytics</strong> (o la herramienta de analítica que usemos). De hecho, puede que sólo tengamos peticiones de Googlebot.</p>
<p>Esto es así porque, a día de hoy, salvo que no tengamos versión móvil o web responsive y derivemos el tráfico móvil a AMP, las únicas formas de llegar a una página AMP son:</p>
<ul>
<li>A través de Google (u otros terceros que están adoptando la tecnología)</li>
<li>Accediendo a la URL de alguna página AMP directamente desde nuestro navegador</li>
<li>Que se haya escapado algún link a una URL AMP por algún lado (email, redes sociales, webs de terceros que nos enlacen&#8230;).</li>
</ul>
<p><strong>Si se llega a través de Google, la visita nunca llega a nuestro servidor</strong>: Google sirve directamente la página, las imágenes, etc., desde cdn.ampproject.org</p>
<p><figure id="attachment_1684" aria-describedby="caption-attachment-1684" style="width: 926px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1684" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1.png" alt="Página AMP servida desde Google" width="926" height="527" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1.png 926w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-300x171.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-768x437.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-772x439.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/01/amp-servida-desde-google-1-624x355.png 624w" sizes="auto, (max-width: 926px) 100vw, 926px" /><figcaption id="caption-attachment-1684" class="wp-caption-text">La página se sirve desde google.es, a través del dominio caché de Google para AMP (cnd.ampproject.org). No hay ninguna petición al dominio original (randomtrip.es)</figcaption></figure></p>
<h3>Las páginas se sirven desde un dominio diferente</h3>
<p>Al servir las páginas Google, desde sus servidores, <strong>el dominio que las sirve no es el nuestro</strong>, si no el que él elija. En este caso y actualmente, el dominio que está utilizando es cdn.ampproject.org (a veces aparece un subdominio de este, tipo tuweb.cdn.ampproject.org), mediante un iFrame insertado en google.es (o el dominio regional de Google que corresponda)</p>
<p><strong>Esto a nivel de analítica tiene muchas implicaciones</strong>, ya que el código de analítica se está ejecutando desde un dominio diferente, y por lo tanto <strong>no puede acceder a la cookie del dominio original.</strong></p>
<p>Algunas cosas que pasan a nivel de analítica, y que generan datos <strong>no fiables</strong>:</p>
<ul>
<li>Un usuario que visite una página nuestra en AMP desde Google, y otra no-AMP, son dos usuarios.</li>
<li>Una visita que empiece en una página nuestra en AMP desde Google y pinche en algún enlace interno, son dos visitas.</li>
<li>El rebote (medido por defecto) de una página AMP es 100% salvo que tengamos varios elementos en el carrusel de «Top News» y el usuario pase por varios de ellos en la misma sesión, o salvo que tengamos varios resultados del mismo dominio en un SERP y el usuario pinche en varios de ellos en la misma sesión.</li>
<li>Una visita que viene a la web «común» después de pinchar en un enlace interno en la versión AMP servida por Google, tiene como fuente «Tráfico de Referencia» desde cdn.ampproject.org</li>
</ul>
<p>A continuación, reproduzco paso a paso cada una de estas anomalías.</p>
<h2>¿Por qué los datos de analítica de AMP mienten?</h2>
<p><strong>El término «usuarios» cada vez es más falso en el mundo de la analítica web.</strong> Diferentes navegadores, diferentes dispositivos y el uso de los modos incógnito (o borrado manual de cookies) hacen que prácticamente ningún usuario pueda ser identificado de forma unívoca con una cookie.</p>
<p>Esto quiere decir que,<strong> incluso sin AMP, estamos sufriendo «duplicidad» de usuarios constantemente</strong>.</p>
<p>¿Qué pasa con AMP? Hay diferentes casos, según desde dónde se cargue el contenido, y en algún caso, según el orden (en todos los casos hablo del uso desde un dispositivo móvil):</p>
<p><strong>1. Usuario accede a la web desde su navegador móvil.</strong> Este es el caso típico de uso de nuestra web: alguien quiere acceder a ella, e introduce directamente la dirección en su navegador (o accede desde favoritos).</p>
<p>Para determinar si es un usuario nuevo o no, Google Analytics comprueba la cookie «_ga». Si existe, obtiene de ella el valor del «clientID» y lo envía. Si no es así, la genera, con un nuevo «clientId» para poder identificar al usuario en las próximas sesiones.</p>
<p>En este caso, al hacer las pruebas en un navegador desde 0, todavía no hay ninguna cookie y somos un usuario nuevo, por lo que se genera la cookie y el «clientID».</p>
<p>Nuestro clientID para este dominio:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1696" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-1-visita-url-no-amp-cid.png" alt="ClientId común (guardado en cookie _ga) para esta web" width="192" height="23" /></p>
<p><figure id="attachment_1697" aria-describedby="caption-attachment-1697" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1697" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp.png" alt="Info enviada a Google Analytics al acceder a la web" width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-visita-url-no-amp-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1697" class="wp-caption-text">Al acceder de forma directa, el comportamiento de Google Analytics es el «normal». Se genera un cliendID que se guarda en la cookie _ga y se envía a los servidores de GA</figcaption></figure></p>
<p><strong>2. Usuario accede directamente a página AMP</strong>: este caso, en general, no será común, salvo que compartamos o enlacemos nuestras URLs AMP (o hagamos nuestra versión móvil en AMP directamente).</p>
<p>Seguimos estando en nuestro dominio (randomtrip.es), y por lo tanto, al acceder a una página la cookie generada en el paso anterior nos debería identificar y, por lo tanto, seríamos el mismo usuario, ¿no?</p>
<p>Pues no es así (empieza la fiesta):</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1698" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png" alt="Cookie generada para página AMP, en un mismo dominoi" width="501" height="22" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png 501w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid-300x13.png 300w" sizes="auto, (max-width: 501px) 100vw, 501px" /></p>
<p><figure id="attachment_1700" aria-describedby="caption-attachment-1700" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1700" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1.png" alt="Información enviada a Google Analytics al acceder a una página AMP." width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-visita-url-amp-1-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1700" class="wp-caption-text">Aunque estamos en el mismo dominio (randomtrip.es) y ya existe una cookie (_ga), el JS de Analytics en AMP utiliza una cookie diferente, y para Analytics somos dos usuarios diferentes.</figcaption></figure></p>
<p>Lo que pasa aquí es que el JS de Analytics que se utiliza en AMP sí utiliza una cookie, pero la cookie que utiliza (AMP_ECID_GOOGLE) es distinta de la cookie que utiliza Analytics en las páginas no AMP (_ga).</p>
<p>Por lo tanto, la información del clientID es distinta para este caso, y para estas dos interacciones secuenciales, somos dos usuarios y dos visitas diferentes.</p>
<p><strong>3. Usuario hace búsqueda en google y pincha en resultado AMP</strong>. Este es el caso más típico de uso de AMP.</p>
<p>El contenido se carga desde la caché de Google, en el dominio de google (pongamos google.es) a través de un iFrame que apunta a cdn.ampproject.org, y <strong>la información</strong> de identificación del usuario <strong>(clientID) se guarda en LocalStorage</strong> para el dominio google.es, <strong>no en una cookie</strong> (ni _ga, ni AMP_ECID_GOOGLE). El valor que guarda ahí es único y diferente al valor del clientID de la cookie del dominio real del contenido.</p>
<p>¿Divertido, eh? :D (Nótese el sarcasmo). Pues esta, que sería la tercera interacción secuencial, envía la siguiente información a Analytics:</p>
<pre><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1694" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png" alt="Cid asignado al acceder a AMP desde Google" width="473" height="17" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png 473w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid-300x11.png 300w" sizes="auto, (max-width: 473px) 100vw, 473px" /></pre>
<p><figure id="attachment_1695" aria-describedby="caption-attachment-1695" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1695" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia.png" alt="Datos enviados a Google Analytics al acceder a página AMP desde búsqueda en Google" width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-visita-url-google-amp-propia-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1695" class="wp-caption-text">Al acceder a este resultado AMP desde los resultados de búsqueda de Google, este es el clientID que se envía a Google Analytics, diferente a los dos primeros para la misma web.</figcaption></figure></p>
<p>Por lo tanto, ya somos tres usuarios y tres sesiones diferentes!</p>
<p><strong>4. Usuario accede directamente a la caché</strong>: Este caso empieza a ser común para terceros diferentes a Google (LinkedIn, Pinterest&#8230;), o se podría dar en el extraño caso de que el usuario accediese directamente a la fuente del iFrame (a la caché de Google para AMP), accediendo por ejemplo a una URL como esta: <a href="http://cdn.ampproject.org/v/s/randomtrip.es/barco-flores-lombok-komodo/amp/?amp_js_v=6">http://cdn.ampproject.org/v/s/randomtrip.es/barco-flores-lombok-komodo/amp/?amp_js_v=6</a></p>
<p>En este caso, se utiliza el mismo sistema que en el caso anterior (el LocalStorage, y no la cookie) pero para el subdominio cdn.ampproject.org, con lo cual el valor que se almacena para el clientID es distinto del anterior. Ya tenemos nuestro cuarto clienId distinto, todo para la misma web, desde el mismo navegador y sin borrar cookies.</p>
<p>En este caso, el clientID que nos asigna es el siguiente:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1701" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png" alt="ClientID al acceder directamente a la cdn de Google para AMP" width="465" height="16" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png 465w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid-300x10.png 300w" sizes="auto, (max-width: 465px) 100vw, 465px" /></p>
<p><figure id="attachment_1702" aria-describedby="caption-attachment-1702" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1702" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp.png" alt="Información enviada a Google Analytics al acceder directamente a la CDN de AMP de Google" width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-visita-url-cdn-amp-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1702" class="wp-caption-text">Este sería nuestro 4º clientID para la misma web!</figcaption></figure></p>
<p><strong>5. Usuario accede directamente a la URL de Google que muestra el iFrame desde la caché:</strong> este caso es común ya que se da cuando un usuario hace una búsqueda en Google, pincha en un resultado de AMP, y al ver el contenido decide compartirlo bien copiando y pegando la URL tal cual, bien a través de las funciones nativas del navegador (enviar a&#8230;).</p>
<p><a href="http://9to5google.com/2017/02/06/google-amp-original-link/" target="_blank" rel="noopener noreferrer">Google está intentando evitar este comportamiento, pero creo que de una manera poco efectiva</a>. La URL visible sigue siendo la suya propia ;)</p>
<p>La URL sería de este estilo: <a href="http://www.google.es/amp/s/randomtrip.es/barco-flores-lombok-komodo/amp/">http://www.google.es/amp/s/randomtrip.es/barco-flores-lombok-komodo/amp/</a> (no se puede acceder desde Desktop, ya que hace redirección a la URL original. Sí se puede acceder desde móvil).</p>
<p>En este caso, estamos en dominio google.es, y el valor del clientID también se guarda en el LocalStorage.</p>
<p>Y aquí pasa una cosa interesante.</p>
<p>Si existen dos valores diferentes para el clientID en los LocalStorage de google.es (o el dominio que corresponda) y cdn.ampproject.org, prima el del segundo. Por lo tanto, una vez que hayamos accedido alguna vez a «cdn.ampproject.org», los casos 3, 4 y este mismo (5), deberían devolver el mismo valor para clientID (menos mal! :D)</p>
<p>En este caso, el clientID que nos asigna es el siguiente (el mismo que en el caso 4):</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1703" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-1-visita-url-amp-desde-google-cid.png" alt="ClientID al acceder a la URL de Google para AMP directamente" width="470" height="20" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-1-visita-url-amp-desde-google-cid.png 470w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-1-visita-url-amp-desde-google-cid-300x13.png 300w" sizes="auto, (max-width: 470px) 100vw, 470px" /></p>
<p><figure id="attachment_1704" aria-describedby="caption-attachment-1704" style="width: 1280px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1704" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google.png" alt="Información enviada a Google Analytics al acceder directamente a la URL propia que genera desde el SERP." width="1280" height="800" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google.png 1280w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-300x188.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-768x480.png 768w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-1024x640.png 1024w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-772x483.png 772w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/5-visita-url-amp-desde-google-624x390.png 624w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /><figcaption id="caption-attachment-1704" class="wp-caption-text">En este caso, estamos accediendo a un entorno en el que ya existe un cliendId anterior, por lo que se utiliza ese y somos el mismo usuario que antes.</figcaption></figure></p>
<p>Es decir: el clientID generado en el paso 3, ya nunca más se va a utilizar, porque ahora prevalece el del paso 4. Dependiendo de la secuencia de interacción del usuario, se generarán ambos o no, y tendremos mayor o menor inflación de usuarios y visitas.</p>
<p><strong>6. Usuarios que acceder a versión AMP a través de apps de terceros:</strong> hay un último caso, que está empezando a despegar todavía ahora, y son las apps de terceros.</p>
<p>LinkedIn, Pinterest, Flipboard&#8230; ya están incluyendo la versión AMP de los links en vez de la normal en sus aplicaciones móviles, dirigiendo el tráfico directamente a la URL de la caché de Google (cdn.ampproject.org o tuweb.cdn.ampproject.org), que sería el caso 4.</p>
<p><figure id="attachment_1713" aria-describedby="caption-attachment-1713" style="width: 676px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-1713" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app.png" alt="AMP en la App de Linkedin" width="676" height="607" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app.png 676w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app-300x269.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/amp-linkedin-app-624x560.png 624w" sizes="auto, (max-width: 676px) 100vw, 676px" /><figcaption id="caption-attachment-1713" class="wp-caption-text">En la app de LinkedIn, los contenidos AMP se cargan directamente desde la URL de la caché de Google</figcaption></figure></p>
<p>No he podido comprobarlo todavía, pero al abrir estas apps los links en un viewer html dentro de la propia app, es posible que para cada una de ellas se genera un nuevo usuario (aunque algunas usan el motor de Chrome, así que puede que no sea así). Si lo compruebas, avisa en los comentarios para completar la info! :)</p>
<hr />
<p>Por lo tanto, tenemos 6+ escenarios, de los cuales 4, al menos, generan un clientID distinto, lo cual quiere decir que <strong>lo que antes</strong> de tener implementado AMP <strong>contaba idealmente como un usuario único</strong> (en el mismo navegador, en mobile), <strong>ahora puede llegar a contar como hasta 4 usuarios únicos:</strong></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1698" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png" alt="Cookie generada para página AMP, en un mismo dominoi" width="501" height="22" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid.png 501w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/2-1-visita-url-amp-cid-300x13.png 300w" sizes="auto, (max-width: 501px) 100vw, 501px" /> <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1694" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png" alt="Cid asignado al acceder a AMP desde Google" width="473" height="17" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid.png 473w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/3-1-visita-url-google-amp-propia-cid-300x11.png 300w" sizes="auto, (max-width: 473px) 100vw, 473px" /> <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1696" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/1-1-visita-url-no-amp-cid.png" alt="ClientId común (guardado en cookie _ga) para esta web" width="192" height="23" /> <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1701" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png" alt="ClientID al acceder directamente a la cdn de Google para AMP" width="465" height="16" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid.png 465w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/02/4-1-visita-url-cdn-amp-cid-300x10.png 300w" sizes="auto, (max-width: 465px) 100vw, 465px" /></p>
<p>Todo esto lo tenéis <a href="http://developers.google.com/analytics/devguides/collection/amp-analytics/client-id?hl=es">aquí explicado también por el propio Google</a> y <a href="http://twitter.com/cramforce/status/837289470273683457">confirmado por el creador y líder tecnológico de AMP, Malte Ubl, en Twitter</a></p>
<h3>Métricas afectadas</h3>
<p>Como te podrás imaginar, las consecuencias de estas discrepancias a la hora de medir hacen que <strong>muchas de las métricas no representen la realidad tal y como la imaginamos</strong>, por lo que hay que tener mucho cuidado a la hora de analizar e interpretar los datos si hay tráfico AMP de por medio</p>
<ul>
<li><strong>Usuarios únicos:</strong> como acabamos de comprobar, <strong>un usuario</strong> desde un mismo dispositivo, con un mismo navegador y sin borrar cookies <strong>puede llegar a contar como 4 usuarios diferentes</strong> en función de cómo visite nuestras páginas AMP.</li>
<li><strong>Visitas/Sesiones:</strong> si un usuario visita una página en AMP, en cualquiera de los entornos, y se va, no hay problema (desde un punto de vista de medición). <strong>El problema viene si el usuario navega</strong>. En ese caso, al pinchar en cualquier link o elemento que le lleve a otra página de nuestra web (normalmente, a páginas no AMP), al igual que se cambia de usuario, se inicia una nueva sesión, <strong>partiendo una única sesión en dos.</strong></li>
<li><strong>Porcentaje de rebote:</strong> debido a lo anterior, al partir una sesión en dos, <strong>la primera sesión tendrá una sola página vista y por lo tanto contará como un rebote, cuando en realidad no lo es</strong>. La segunda visita, si solo ve una página y se va, también contará como rebote. Entonces, está aumentando el porcentaje de rebote de forma totalmente ficticia (una sesión que no sería considerada rebote &#8211; el usuario ve dos páginas &#8211;  se convierte en dos sesiones, ambas consideradas rebotes). Tanto para AMP como para las páginas no AMP visitadas desde la versión AMP.</li>
<li><strong>Páginas vistas por sesión:</strong> totalmente ligada a los dos puntos anteriores, en lugar de tener 2 páginas vistas por sesión pasaríamos a tener 1.</li>
<li><strong>Fuentes de tráfico:</strong> el tráfico que navega hacia otras URLs de nuestra web desde los escenarios en los que el contenido lo sirve Google (o un tercero), cuenta como tráfico de entrada (sesiones nuevas) y <strong>su Fuente de tráfico pasa a ser Tráfico de referencia desde cnd.ampproject.org (o tuweb.cdn.ampproject.org)</strong></li>
</ul>
<p>Estas son las métricas más comunes directamente afectadas. Como os podéis imaginar, a raíz de estas, prácticamente todo el resto de métricas se ven afectadas, al depender la gran mayoría de estas para su cálculo.</p>
<p>Por ejemplo, <strong>en un e-commerce, si un usuario accede a través de AMP y termina comprando en esa misma sesión, la venta se atribuiría al usuario de la web, no al de AMP, y tendría fuente de tráfico «Referencia» en vez de «Buscadores».</strong></p>
<h2>Cómo evitar que Analytics duplique usuarios con AMP</h2>
<p><strong>Por suerte, existe una solución</strong> para evitar que los clientID sean diferentes en todos estos casos, técnicamente compleja, pero factible. Sirve para los datos recogidos a raíz de su implementación, pero no para los datos que ya tengamos recogidos en Google Analytics.</p>
<p>Es increíble que Google no haya hecho todavía para arreglar esta situación (igual que no ha hecho nada por solucionar <a href="http://blog.ikhuerta.com/eliminando-el-trafico-referral-spam-de-google-analytics">el tema del Spam</a> <a href="http://botcrawl.com/lifehacker-com-referral-spam/">en Google Analytics</a>), cuando AMP lleva ya casi un año implementado en las SERPs.</p>
<p>ACTUALIZACIÓN (07/03/2017): <a href="http://twitter.com/egarolera">Eduardo Garolera</a> me ha pasado <a href="http://github.com/ampproject/amphtml/blob/master/spec/amp-managing-user-state.md#task-1-for-non-amp-pages-on-the-publisher-origin-set-up-an-identifier-and-send-analytics-pings">este linkazo</a> en el que Google explica de forma muy específica y detallada el «approach» que recomienda seguir para minimizar el impacto de la duplicación de cookies de usuario. Viene a explicar lo que ha hecho Simo, y que cuento aquí abajo, pero con una solución también para el caso en el que el usuario que visita alguno de los escenarios AMP sin haber visitado antes nuestra propia web.</p>
<p>La solución, aunque no la he probado todavía, <strong>la podéis encontrar en este post</strong> de <a href="http://twitter.com/SimoAhava">Simo Ahava</a>:</p>
<p><a href="http://www.simoahava.com/analytics/google-analytics-client-id-amp-pages/">http://www.simoahava.com/analytics/google-analytics-client-id-amp-pages/</a></p>
<p>Básicamente <strong>consiste en crear un proxy en nuestro dominio</strong> (se necesita http sí o sí).</p>
<p>En la configuración del componente amp-analytics, en AMP, se puede indicar que antes de enviar los datos a Google Analytics, se obtenga información de configuración extra desde una URL externa.</p>
<p>A diferencia de la mayoría de recursos en AMP (que los cachea Google y los sirve desde sus propios servidores), esta petición a la URL externa no se cachea y se realiza siempre desde el cliente, en el momento en que la página se termina de cargar y el foco está puesto en ella.</p>
<p>Al ser una petición a una URL de nuestro dominio, se envían las cookies de ese dominio al servidor, por lo que el proxy lo que hace es comprobar si recibe la cookie _ga, y si es así, extraer el valor del clientID para devolverlo al cliente y que se incluya ese clientID en la petición a Analytics, en vez del que ha generado el propio Google Analytics.</p>
<p>Además, hay que actualizar la cookie de la misma manera en que Google Analytics lo haría, para reproducir el comportamiento por defecto de GA.</p>
<p><strong>Problemas:</strong></p>
<ul>
<li>No es una implementación tan trivial</li>
<li>Necesitas tener http en tu servidor (al menos para la URL del proxy)</li>
<li>No es algo oficial, por lo que si la forma de medir de Google Analytics cambia es probable que tengamos que actualizar nuestro «workaround»</li>
<li>Si lo hacemos mal, la podemos liar todavía más.</li>
<li>No funciona si el usuario no visita primero en AMP y luego en nuestra web</li>
<li>No funciona en Safari cuando se accede al contenido a través de la caché de Google AMP.</li>
</ul>
<p>ACTUALIZACIÓN (02/03/2017): Malte Ubl, creador y responsable tecnológico del proyecto AMP, <a href="http://twitter.com/cramforce/status/837294718392418305">acaba de decir en Twitter que la solución de Simo es, de hecho, buena</a>, con la salvedad de que no funcionaría en el caso de Safari, al acceder al contenido a través de la caché de Google (ya que Safari bloquea las cookies de terceros)</p>
<div class="mceTemp"></div>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1737" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id.png" alt="" width="555" height="647" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id.png 555w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id-257x300.png 257w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-simo-amp-client-id-535x624.png 535w" sizes="auto, (max-width: 555px) 100vw, 555px" /></p>
<h2>¿Y qué pasa con los datos históricos?</h2>
<p>Si te atreves a implementar la solución anterior, obviamente sólo se arreglará el problema a partir del momento en que pongas la solución en producción, por lo que los datos recogidos hasta ese momento seguirán estando mal.</p>
<p>¿Qué puedes hacer? No mucho, pero si de verdad necesitas intentar darle un vuelvo a los datos (al menos a los más básicos) de lo que tengas hasta ahora,<strong> puedes intentar utilizar la siguiente información para obtener una aproximación.</strong></p>
<ul>
<li>Como las sesiones que hayan consumido más de una página acaban irremediablemente en tu web, las tenemos controladas: están bajo «Tráfico de referencia» desde el subdominio cdn.ampproject.org.</li>
<li>Si quieres corregir el rebote, puedes sacar por un lado las visitas a AMP, por otro las visitas desde cnd.ampproject.org y recalcular el dato. Ej: si tienes 1000 visitas a páginas AMP, con un 89% de rebote, y 200 visitas desde cnd.ampproject.org, tendrías:
<ul>
<li>110 visitas (11%) no fueron rebotes, porque visitaron varios resultados en los SERPs de AMP de tu dominio</li>
<li>200 visitas se han considerado rebote, pero en realidad no lo fueron, porque accedieron a tu web desde AMP y se han categorizado como tráfico de refencia</li>
<li>Por lo tanto, 310 visitas no han sido rebotes.</li>
<li>Aproximación de rebote corregido: 690 (1000-310) de 1000 (69% en vez de 89%)</li>
</ul>
</li>
</ul>
<p>Partiendo de esto, puedes hacer lo mismo con otras métricas (para descontar usuarios y sesiones, reajustar páginas vistas, etc.)</p>
<h2>Cómo solucionar (parcialmente) este problema con la solución propuesta por Google</h2>
<p>Google desarrolló una solución parcial a este problema funcional en todos los dominios de Google desde 2017. <a href="https://www.blog.google/products/marketingplatform/analytics/google-analytics-is-enhancing-support-for-amp-on-cache/">Puedes leer sobre ello aquí</a> y también echar un ojo a la presentación sobre el tema que hice en el <a href="https://www.searchmetrics.com/summit-11-2017-speaker/">Searchmetrics Summit 2017</a>:</p>
<p><iframe loading="lazy" style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" src="//www.slideshare.net/slideshow/embed_code/key/gX23MGMFQKff5t" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen" data-mce-fragment="1"> </iframe></p>
<p>Es importante destacar que está solución no viene incluida «por defecto» en AMP, así que si usas AMP en alguna de tus webs, necesitas hacer lo siguiente para tener la solución funcionando:</p>
<p>1. En todas tus páginas no-AMP, setear el volumen del parámetro &#8216;useAMPclientID&#8217; a «true»</p>
<p>2. En todas tus páginas AMP, incluir el siguiente tag en el head:</p>
<pre>&lt;meta name="amp-google-client-id-api" content="googleanalytics"&gt;</pre>
<p>3. Usar exclusiones de referencia en GA: necesitas dar de alta exclusiones de referencia para el dominio cdn.ampproject.org</p>
<p>Más información sobre cómo implementar y comprobar que está funcionando esta solución en <a href="https://support.google.com/analytics/answer/7486764?hl=es">https://support.google.com/analytics/answer/7486764?hl=es</a></p>
<p>Aparte de esto, <a href="https://blog.amp.dev/2018/11/13/developer-preview-of-better-amp-urls-in-google-search/">Google anunció que gracias al uso de una nueva tecnología, Signed Exchanges, los navegadores podrán servir páginas AMP desde la caché de Google mostrando la URL original del contenido</a>, que potencialmente solucionaría los problemas detallados en este post.</p>
<hr />
<h2>Conclusión (TL/DR)</h2>
<p>Acabamos de ver y demostrar cómo un mismo «usuario» (mismo navegador con cookies habilitadas en un mismo dispositivo móvil) puede multiplicarse por 4 por culpa de AMP en las herramientas de Analítica, arrastrando consigo un aumento de visitas, un descenso de páginas vistas por visita y un aumento del rebote, todo totalmente «ficticio».</p>
<p>Y lo peor de todo, es que seguramente ni te habías dado cuenta. Y puede que hasta te hayas preocupado con el alto rebote de tus páginas en AMP.</p>
<p>De momento, salvo que te atrevas a probar la solución que he señalado en este post, no hay mucho que hacer. Pero por lo menos, es importante tenerlo en cuenta a la hora de analizar, y evitar sacar conclusiones precipitadas cuando haya tráfico AMP de por medio.</p>
<p>Lo ideal es que Google proponga una solución «oficial». De momento hay una <a href="http://github.com/ampproject/amphtml/issues/5761">tarea en el Github de AMP</a>, pero lleva ahí unos meses sin mucho movimiento. Además, si la adopción de AMP en apps de terceros sigue, el número de usuarios por dispositivo móvil puede crecer todavía más.</p>
<p>ACTUALIZACIÓN (02/03/2017): <a href="http://twitter.com/cramforce/status/837291154139922432">Google es completamente consciente del problema y está tratando de encontrar una solución (aunque no es fácil)</a></p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1736" src="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga.png" alt="" width="625" height="572" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga.png 625w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga-300x275.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2017/03/cramforce-amp-ga-624x571.png 624w" sizes="auto, (max-width: 625px) 100vw, 625px" /></p>
<p>Lecturas adicionales (en inglés):</p>
<ul>
<li><a href="http://www.simoahava.com/analytics/accelerated-mobile-pages-via-google-tag-manager/">Accelerated Mobile Pages via Google Tag Manager</a></li>
<li><a href="http://medium.com/relay-media/whats-going-on-with-amp-analytics-5595af2dcc71">What’s Going On With AMP Analytics?</a></li>
<li><a href="http://www.gsqi.com/marketing-blog/how-to-set-up-adjusted-bounce-rate-on-accelerated-mobile-pages-amp-using-google-tag-manager/">How To Set Up Adjusted Bounce Rate on Accelerated Mobile Pages (AMP) Using Google Tag Manager</a></li>
</ul>
<hr />
<p>Espero que el post te haya sido útil. Si es así, compártelo! :)</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/">¿Por qué mis páginas de AMP tienen un porcentaje de rebote tan alto?</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/analitica-web/porcentaje-rebote-alto-amp/feed/</wfw:commentRss>
			<slash:comments>33</slash:comments>
		
		
			</item>
		<item>
		<title>Cómo afecta el (not provided) al SEO en medios de comunicación</title>
		<link>https://www.christianoliveira.com/blog/seo/como-afecta-el-not-provided-al-seo-en-medios-de-comunicacion/</link>
					<comments>https://www.christianoliveira.com/blog/seo/como-afecta-el-not-provided-al-seo-en-medios-de-comunicacion/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Thu, 29 May 2014 11:13:37 +0000</pubDate>
				<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=678</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/seo/como-afecta-el-not-provided-al-seo-en-medios-de-comunicacion/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/periodo-vida-de-una-notica-150x150.png" class="alignleft wp-post-image tfe" alt="Ciclo de vida de una noticia" title="" /></a>El artículo que vas a leer a continuación fue escrito por David Esteve y un servidor como parte del segundo Ksbook: «Estar primero no es un don». Gracias a los chicos de KPIsland por invitarnos a participar :) 1. El SEO en medios Si algo caracteriza al SEO en grandes medios de comunicación es la inmediatez, [&#8230;]</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/seo/como-afecta-el-not-provided-al-seo-en-medios-de-comunicacion/">Cómo afecta el (not provided) al SEO en medios de comunicación</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;678&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Cómo afecta el (not provided) al SEO en medios de comunicación&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
<em>El artículo que vas a leer a continuación fue escrito por <a title="SEO fino" href="http://twitter.com/deivizzz" target="_blank" rel="noopener">David Esteve</a> y un servidor como parte del segundo <a href="http://ksbooks.es/" target="_blank" rel="noopener">Ksbook</a>: <a href="http://impulsandoelmarketingonline.com/ksbooks/estar-primero-no-es-un-don/" target="_blank" rel="noopener">«Estar primero no es un don».</a> Gracias a los chicos de <a href="http://kpisland.com/" target="_blank" rel="noopener">KPIsland</a> por invitarnos a participar :)</em></p>
<h2>1. El SEO en medios</h2>
<p>Si algo caracteriza al SEO en grandes medios de comunicación es la inmediatez, el poco tiempo disponible para recolectar datos y decidir qué keywords elegir para nuestras noticias. El tiempo de vida de una noticia suele ser bastante limitado (por norma general uno o dos días como máximo) y el volumen de demanda generado no es lineal, sino que hay uno o varios picos dentro de esas 24-48h. Por lo tanto, si no conseguimos posicionar nuestro contenido durante esos picos, hemos perdido nuestra oportunidad.</p>
<p><figure id="attachment_681" aria-describedby="caption-attachment-681" style="width: 1010px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="wp-image-681 size-full" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/periodo-vida-de-una-notica.png" alt="Ciclo de vida de una noticia" width="1010" height="606" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/periodo-vida-de-una-notica.png 1010w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/periodo-vida-de-una-notica-300x180.png 300w" sizes="auto, (max-width: 1010px) 100vw, 1010px" /><figcaption id="caption-attachment-681" class="wp-caption-text">Imagen de <a href="http://twitter.com/pedromg">Pedro Martínez</a></figcaption></figure></p>
<p>&nbsp;</p>
<p>Lo malo, que tenemos poco tiempo para actuar.</p>
<p>Lo bueno, que las noticias tienen un pase VIP a las SERP de Google: Google News.</p>
<p>Si lo hacemos bien y mejor que la competencia, nuestras noticias tardan minutos en aparecer en las primeras posiciones, listas para ser clickadas por, en ocasiones, enormes cantidades de personas.</p>
<p>Para entenderlo mejor, es más fácil echar un vistazo al siguiente ejemplo:</p>
<p><figure id="attachment_687" aria-describedby="caption-attachment-687" style="width: 824px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-687" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/tendencia-busquedas-hoteles-en-madrid.png" alt="Tendencias de búsqueda para &quot;hoteles en madrid&quot;" width="824" height="573" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/tendencia-busquedas-hoteles-en-madrid.png 824w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/tendencia-busquedas-hoteles-en-madrid-300x208.png 300w" sizes="auto, (max-width: 824px) 100vw, 824px" /><figcaption id="caption-attachment-687" class="wp-caption-text">Fuente: <a href="http://www.google.es/trends/explore#q=hoteles%20en%20madrid&amp;geo=ES&amp;date=3%2F2014%201m&amp;cmpt=q">Google Trends</a></figcaption></figure></p>
<p>La línea azul representa las búsquedas desde España para la keyword “hoteles en madrid” en Marzo de 2014. Esta keyword tiene un volumen mensual de búsquedas más o menos constante, una media de 27000 búsquedas al mes (según la herramienta Keyword Planner de Google Adwords).</p>
<p>En la siguiente gráfica, pintamos la información anterior junto a la misma información para las búsquedas “cambio de hora” y “Adolfo Suárez”, representadas con las líneas roja y amarilla respectivamente:</p>
<p><figure id="attachment_686" aria-describedby="caption-attachment-686" style="width: 823px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-686" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/hoteles-madrid-vs-cambio-hora-vs-adolfo-suarez.png" alt="&quot;hoteles en madrid&quot; vs &quot;cambio de hora&quot; vs &quot;adolfo suarez&quot;" width="823" height="580" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/hoteles-madrid-vs-cambio-hora-vs-adolfo-suarez.png 823w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/hoteles-madrid-vs-cambio-hora-vs-adolfo-suarez-300x211.png 300w" sizes="auto, (max-width: 823px) 100vw, 823px" /><figcaption id="caption-attachment-686" class="wp-caption-text">Fuente: <a href="http://www.google.es/trends/explore#q=hoteles%20en%20madrid%2C%20cambio%20de%20hora%2C%20adolfo%20suarez&amp;geo=ES&amp;date=3%2F2014%201m&amp;cmpt=q">Google Trends</a></figcaption></figure></p>
<p>Como se puede apreciar en la gráfica, la línea azul ni siquiera se distingue, mientras que las otras dos búsquedas tienen solamente algunos picos, pero de muchísimo volumen. Tanto, que ese mes representan mucho más en volumen que la keyword anterior (“hoteles en madrid)</p>
<p>El contenido que generemos relacionado con esas dos keywords, es muy probable que no vuelva a recibir cantidades significantes de tráfico. Si sucede algo más de interés respecto al tema se cubrirá con nuevas noticias. En algunos casos, sabremos cuándo volverá a suceder (cambio de hora), mientras que en otras no lo podremos afirmar a ciencia cierta.</p>
<h3>¿Cómo sabemos qué keywords utilizará la gente para buscar?</h3>
<p>En el caso de algo que haya sucedido en el pasado, tenemos dos “grandes” fuentes:</p>
<ul>
<li><strong>Los datos de Google</strong>: sólo si el suceso aconteció en la ‘era Google’ &#8211; concretamente, desde 2004 en Google Trends. Tenemos datos más detallados en la herramienta <a href="http://adwords.google.com/KeywordPlanner" target="_blank" rel="noopener">keyword planner</a>; concretamente y desde hace pocas semanas, de los dos últimos años.</li>
<li><strong>Los datos de nuestra web</strong>: sólo si tenemos las keywords por las que llegaron a nuestra web los usuarios anteriormente, o datos de las búsquedas que realizaron en el buscador de nuestra web. También tenemos datos de impresiones y clicks en Google en su herramienta <a href="http://www.google.com/webmasters/tools/home?hl=es" target="_blank" rel="noopener">Webmaster Tools</a> (solo de los últimos 90 días a no ser que nos hayamos dedicado a guardar los datos en el pasado).</li>
</ul>
<p>Si lo que sucede es un hecho completamente nuevo, tendremos solamente los datos de nuestra web en tiempo real, según vaya transcurriendo el tiempo de vida de la noticia y podamos observar el comportamiento del usuario (principalmente keywords de entrada o búsquedas en nuestro buscador), y con unas horas de retraso, puede que algún dato también de Google Trends.</p>
<p>En ambos casos, es esencial “escuchar” en tiempo real y adaptarnos o ampliar información sobre la marcha para poder “hablar el idioma del usuario”.</p>
<p>Como podéis ver, elegir keywords a contrarreloj no es tarea sencilla, más aún sabiendo que, una vez elegida la keyword, tenemos que convencer a los periodistas (que en pleno breaking news tienen muchos frentes y no podrán dedicarnos mucho tiempo) de que lo mejor es utilizar esa keyword y no cualquier otra que ellos hayan pensado o vean más correcta periodísticamente. No hay que perder de vista que existe una línea editorial que seguir y muchas veces no es equivalente a cómo busca la gran masa.</p>
<p>Necesitamos pues, elegir rápido y elegir bien, y para eso precisamos de información.</p>
<p>Veamos un caso real sucedido en <a href="http://www.elmundo.es" target="_blank" rel="noopener">elmundo.es</a>:</p>
<p>Benedicto XVI (el Papa por ese entonces)renuncia, y por lo tanto sabemos que se va a proceder a elegir un nuevo Papa.</p>
<p>Por suerte para nosotros, el anterior Papa se eligió en la era Google, por lo que podíamos ir hacia atrás y saber qué fue lo que se buscó cuando eligieron a Benedicto XVI. En este caso, al ser en 2005, teníamos que irnos a Google Trends, la única herramienta que nos da datos de hace tanto tiempo (a no ser que tuviésemos por aquel entonces las keywords por las que habían accedido los usuarios a elmundo.es, que no era el caso).</p>
<p>¿Qué se buscaba más? ¿Fumata blanca? ¿Nuevo Papa? ¿Habemus papa?¿El nombre original del nuevo Papa? ¿O el nuevo nombre al convertirse en papa? Simplemente nos vamos a Google Trends y lo sacamos:</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-685" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/tendencias-busquedas-nuevo-papa.png" alt="Tendencias de búsquedas para la elección del nuevo Papa" width="615" height="353" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/tendencias-busquedas-nuevo-papa.png 615w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/tendencias-busquedas-nuevo-papa-300x172.png 300w" sizes="auto, (max-width: 615px) 100vw, 615px" /></p>
<p>Como se aprecia claramente, los nombres del antes y el después son lo más buscado (ratzinger, benedicto XVI), después nuevo papa y ya muy por debajo “habemus Papa” y “fumata blanca”. Con estos datos ya sabíamos en base a qué keywords teníamos que optimizar titulares de las noticias si queríamos maximizar el tráfico conseguido a través de buscadores.</p>
<p>Además de esto, al revisar la lista de keywords por las que estaban entrando los usuarios ese día, apareció en la lista “quién es el nuevo papa”, sin buscarlo intencionadamente. Se pidió a redacción redactar una noticia con este titular. <a href="http://www.elmundo.es/elmundo/2013/03/13/internacional/1363199799.html" target="_blank" rel="noopener">Esa noticia</a> terminó siendo una de las más leídas de ese día, y no sólo por tráfico obtenido a partir de buscadores, si no también por usuarios accediendo a la noticia desde el propio periódico. Básicamente, si había búsquedas en Google, había interés.</p>
<p>Un claro ejemplo de cómo el SEO realmente nos puede ayudar más allá de traer tráfico del propio buscador.</p>
<p>¿Qué pasaría si nos enfrentásemos a este mismo suceso un año más tarde? Pues que, con el aumento del (not provided) por parte de Google, tendríamos mucha menos muestra de keywords por las que entran los usuarios a nuestra web (o incluso ninguna si el ritmo de crecimiento de (not provided) sigue así) y puede que no llegásemos a ese tipo de casos. Además, no podríamos ratificar si la optimización SEO realmente dió sus frutos de la misma forma que antes.</p>
<h2>2. ¿Cómo ha afectado el tráfico <i>Not Provided </i>a los medios?</h2>
<p>Parece mentira que dentro de no mucho tiempo habrán pasado tres años desde que se hizo oficial por parte de Google la encriptación de las palabras clave de búsqueda Google, con la intención de proteger la confidencialidad y los datos de los usuarios logueados con sus cuentas. Abróchense los cinturones, manos en la nuca y la cabeza debajo del asiento delantero.</p>
<p>Si bien es cierto que este hecho impactó tremendamente en la industria del search y la analítica, hizo mella de una forma quizás más notable en los grandes medios de comunicación, o portales con contenido de carácter noticioso y más inmediato, sobre los que recaía la responsabilidad de buscar una alternativa factible a la pérdida de gran parte de las “pistas” que les permitían reconocer de qué forma definían sus lectores el contenido que consumían de sus noticias y en definitiva “aprender y descubrir” los temas que suscitaban un mayor interés.</p>
<p>Para los grandes medios la pérdida de este suculento dato ha supuesto un cambio de mentalidad, y, desde mi punto de vista supuso una obligación de “apertura de mente” para los especialistas en search y analítica, ya que poco a poco, mientras el porcentaje de tráfico <i>Not Provided</i> nos iba dejando ciegos, pequeños rayos de luz aparecían en forma de: sinergias más intensas con campañas de pago, colaboración con otros medios, desarrollo de estrategias en <i>Real Time</i>, y en definitiva, quizás se produce un mayor enfoque en el “aquí y ahora”, más que en saber “cómo mi lector ha encontrado mi noticia”.</p>
<h2>3. ¿Qué alternativas se proponen para reducir su impacto en la operativa?</h2>
<p>Y <a href="http://www.notprovidedcount.com/" target="_blank" rel="noopener">si algún día el tráfico <i>Not Provided</i> llega al 100%</a>, ¿qué hacemos? Sin duda ésta fue una de las primeras preguntas que aparecieron en los pensamientos de muchos de nosotros.</p>
<p>Pues bien, a día de hoy, después de casi tres años podemos decir con la cabeza bien alta que superamos como podemos este bache del camino y hemos aprendido que existen alternativas bastante buenas para orientarnos en la búsqueda de las keywords utilizadas por los usuarios</p>
<h3>Sinergias SEO y campañas de pago por click</h3>
<p>No es ningún secreto. Prácticamente desde que se define el SEO se ha hablado del gran apoyo que suponen las campañas de PPC para descubrir y entender mejor el comportamiento que tienen los usuarios en los buscadores, siendo en este momento una sinergia totalmente fundamental.</p>
<p>Para quién no lo sepa, Google le pareció buena idea “esconder” la información de la palabra clave referida del buscador únicamente de los usuarios que accedieran a nuestro sitio web mediante resultados orgánicos, tomando la decisión de no aplicar el mismo castigo a los accesos desde campañas de PPC. Desde entonces surgió una gran controversia por parte de los especialistas en search e incluso de parte de los propios usuarios del buscador, que llegaron a tacharlos incluso con adjetivos de carácter hipócrita.</p>
<p>Por supuesto, Google ha estado muy al tanto de estas inquietudes y por este motivo, en el último congreso Search Marketing Expo <i>(SMX West)</i>, uno de los máximos responsables y quizás actualmente el mejor conocedor del desarrollo del algoritmo de ordenación de resultados de búsqueda, Amit Singhal, se pronunció al respecto reconociendo la importancia de las opiniones de los usuarios sobre al respecto, y de alguna forma llegó a otorgar la razón y a comprender esa cierta “desconfianza”, e incluso comentó que en los próximos meses se verían cambios al respecto. Las preguntas eran claras, ¿volverán a ofrecer la palabra clave referida para los resultados orgánicos? ¿aplicarán la misma medida de encriptación del dato para los usuarios que vienen de anuncios de pago? Pues bien, finalmente parece ser que símplemente eliminarán la palabra clave de las URL referidas desde el buscador, por lo que quedarán afectadas principalmente las herramientas de analítica, pero podrán seguir viéndose a través de las campañas de Adwords o de cualquier herramienta que haga uso de su API.</p>
<p>El caso es que, aun así,  los grandes medios de comunicación siguen viendo clara la oportunidad de potenciar sus campañas de pago en buscadores para recuperar de alguna forma esa visibilidad.</p>
<p>Las ventajas ofrecidas por las campañas conjuntas de SEO y PPC aportan gran cantidad de beneficios. Además de la adquisición de tráfico, la campaña de PPC puede ser usada para mejorar la estrategia SEO gracias a los datos que nos reporta. Algunos de los beneficios que nos puede aportar incluyen:</p>
<ul>
<li><b>Testeo de la conversión de las palabras clave (Keyword Research):</b> Las campañas de PPC ofrecen una mayor agilidad a la hora de descubrir y testear palabras clave, obteniendo información en minutos en vez de en meses, algo que en el mundo de los medios de comunicación es totalmente imprescindible. Puede ser usado para identificar qué palabras clave funcionan mejor, evitando tener que invertir grandes esfuerzos durante largos periodos de tiempo en la optimización de páginas por términos que realmente no podemos estimar de forma precisa si llegarán a obtener los resultados esperados.</li>
</ul>
<ul>
<li><b>Testeo de de </b><b><i>Landing Pages</i></b><b>:</b> Suele decirse que gracias al testeo A/B de diferentes páginas podemos determinar qué clase de presentación on site es más efectiva acorde con nuestro objetivo, para posteriormente hacer uso de la misma dentro de nuestra campaña SEO.</li>
</ul>
<p>Si bien es cierto que existen algunas excepciones, generalmente esto no puede ser del todo fácil, ya que generalmente las páginas orientadas a SEO suelen ser mucho más largas, con grandes contenidos orientados a una o varias palabras clave y en caso de existir un funnel de conversión, se suele tratar de promover el “autodescubrimiento” por parte del usuario en el transcurso del proceso que le llevará a su objetivo. Sin embargo, las <i>landing pages</i> para PPC suelen tener una clara orientación a la acción inmediata, por lo que excepto en casos muy puntuales es raro ver sinergias claramente aplicables en este aspecto, al menos en medios de prensa.</p>
<ul>
<li><b>Obtener tráfico y conversiones por palabras de alta competencia:</b> Prácticamente en cualquier sector existen algunos términos o frases que son muy competitivos, lo cual supone un gran desafío posicionar nuestras landing pages de forma orgánica, teniendo que pasar en algunos casos varios meses e incluso años. Una campaña de PPC te permite capturar ese tráfico de forma inmediata mientras que el trabajo SEO se construye y va haciendo efecto más lentamente.</li>
</ul>
<ul>
<li><b>Visibilidad: </b>Y es que en esto del marketing para buscadores, 1+1=3.Una campaña de PPC también puede ayudar a incrementar el tráfico y la visibilidad incluso cuando tenemos buen posicionamiento en resultados orgánicos por una palabra clave. Si tenemos en cuenta que generalmente los anuncios aparecerán en la parte más privilegiada de la página de resultados de búsqueda, capturar la posición primera o segunda  PPC y la primera en resultados orgánicos aumenta la visibilidad y en muchos casos mejora la confianza del usuario que busca, viéndolo desde su filtro como “el resultado que busco”.</li>
</ul>
<p>Sin embargo, no es oro todo lo que reluce, y este punto tiene muchos matices, ya que también hay que prestar atención a la posible canibalización de clicks, sobre todo a nivel de marca. Pongamos sobre la mesa dos casos diferenciados:</p>
<ol>
<li>Nadie está pujando por una palabra clave para la que posicionamos en orgánico en #1. Si únicamente nos anunciamos nosotros es posible que ese 1+1=3 se convierta en 1+1=1,5, o lo que es lo mismo, donde antes el 100% de los usuarios que entraban a nuestra web por ese término lo hacían “sin coste” para nosotros, ahora ese porcentaje se reparte, reduciendo nuestro retorno de la inversión.</li>
<li>Muchos anunciantes pujan por la misma palabra clave, y nosotros tenemos el resultado #1 en orgánico. En este caso posiblemente sea una gran oportunidad de canibalizar más a nuestros competidores que a nosotros.</li>
</ol>
<h3>¿Google Webmaster Tools como alternativa real para los grandes medios?</h3>
<p>Si ahora mismo nuestro (not provided) estuviese al 100% y no tuviésemos ninguna información sobre las keywords que han utilizado los usuarios para llegar a nuestra web, la principal alternativa que tendríamos para ver esta información sería Webmaster Tools. Esta herramienta de Google nos da una lista de keywords por las que ha aparecido nuestra web en los resultados orgánicos del buscador y los clicks que ha recibido.</p>
<p>Aunque para la mayoría de webs pueda suponer una alternativa hasta cierto punto, en los medios la realidad es bastante distinta:</p>
<ul>
<li style="list-style-type: none;">
<ul>
<li><b>No hay tiempo real</b>, ni siquiera tenemos los datos con unas horas de retraso. A día de hoy, los datos tardan un par de días en aparecer, por lo que para breaking news no nos van a ser de utilidad</li>
<li><b>No son precisos</b>. Esto es un defecto de cara a cualquier web. Hay <a href="http://www.notprovided.eu/why-not-use-googles-wmt-data/" target="_blank" rel="noopener">varios estudios</a> demostrando que los datos en muchas ocasiones no se corresponden con la realidad de la web.</li>
<li><b>El módulo de Google News no se contabiliza: </b>desgraciadamente, y por las comparaciones que he hecho, los clicks e impresiones de las noticias que aparecen en el módulo de Google News no se contabilizan aquí, por lo que de cara a breaking news nos limita un montón incluso a la hora de analizar a posteriori el impacto de nuestras acciones.</li>
</ul>
</li>
</ul>
<p>Sólo nos queda esperar que, si el (not provided) no es revertido en ningún momento, Google al menos mejore su herramienta.</p>
<h3>El uso de herramientas y software de terceros como (SEMRush)</h3>
<p>Siendo sinceros, a los que nos dedicamos al marketing online nos encantan las herramientas. A estas alturas posiblemente incluso sea imposible tan siquiera estimar la cantidad de recursos que existen para facilitar la gestión de nuestras campañas. Si, están muy bien, y en muchos casos nos ayudan con la pérdida de información de “datos reales” de los que disponíamos antes de la llegada del <i>Not provided</i>, pero debemos tener claro cuál es su uso en cada caso, ya que existe una gran diferencia.</p>
<p>Una de las alternativas que se plantearon como ayuda al <i>Not Provided</i> es el uso de herramientas de Rank Tracking o lo que es lo mismo, software que monitoriza de forma constante los resultados de búsqueda para distintos términos y nos ofrece información sobre sus movimientos en el tiempo y su volumen de búsquedas para que podamos “estimar” qué palabras clave pueden ser nuestro objetivo.</p>
<p>Este tipo de herramientas tienen una especial aplicación en portales muy grandes, ya que debido a la limitación de infraestructura por parte de las empresas que desarrollan este tipo de software, la frecuencia de rastreo y monitorización es mucho más real y constante en portales que atraen más usuarios. Por este motivo, la mayoría de los medios pueden obtener datos realmente suculentos de herramientas como SEMRush.</p>
<p><figure id="attachment_684" aria-describedby="caption-attachment-684" style="width: 1031px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-684" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/palabras-genericas-elmundoes.png" alt="Informe de keywords orgánicas de elmundo.es" width="1031" height="402" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/palabras-genericas-elmundoes.png 1031w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/palabras-genericas-elmundoes-300x116.png 300w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/palabras-genericas-elmundoes-1024x399.png 1024w" sizes="auto, (max-width: 1031px) 100vw, 1031px" /><figcaption id="caption-attachment-684" class="wp-caption-text">Informe de palabras clave orgánicas genéricas (no marca) para ElMundo.es. Fuente: <a href="http://es.semrush.com/">SemRush</a></figcaption></figure></p>
<p>Este tipo de herramientas puede suponer una fuente de información muy relevante para los medios, ya que no sólo nos da una idea de qué términos nos están trayendo una mayor cantidad de tráfico actualmente, si no que podemos ver, mediante histórico, cómo fue el comportamiento de los usuarios y los rankings en una determinada fecha para así poder mejorar nuestra estrategia y orientación de keywords sobre las que vamos a trabajar.</p>
<p><figure id="attachment_683" aria-describedby="caption-attachment-683" style="width: 911px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-683" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/keywords-elecciones-elmundo.png" alt="Keywords elecciones 2011" width="911" height="375" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/keywords-elecciones-elmundo.png 911w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/keywords-elecciones-elmundo-300x123.png 300w" sizes="auto, (max-width: 911px) 100vw, 911px" /><figcaption id="caption-attachment-683" class="wp-caption-text">Informe de palabras clave sobre las elecciones de noviembre de 2011 para ElMundo.es. Fuente: <a href="http://es.semrush.com/">SemRush</a></figcaption></figure></p>
<p>Por ejemplo, en la imagen anterior, podemos ver como la herramienta nos permite “estimar” cuál será el comportamiento de los usuarios a la hora de buscar temas relacionados con las elecciones en 2015.</p>
<p><img loading="lazy" decoding="async" class="alignleft wp-image-682 size-medium" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/conjuntos-palabras-clave-semrush-110x300.png" alt="Intersecciones de conjuntos de keywords entre competidores en Semrush" width="110" height="300" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/conjuntos-palabras-clave-semrush-110x300.png 110w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/conjuntos-palabras-clave-semrush.png 218w" sizes="auto, (max-width: 110px) 100vw, 110px" /></p>
<p>Otra de las funcionalidades que ofrecen estas herramientas suele ser el análisis de nuestros competidores.</p>
<p>Gracias a la gran capacidad de rastreo e indexación que tienen, podemos crear informes que comparan nuestras palabras clave orgánicas y las de nuestros competidores.</p>
<p>Con un poco de picardía, podemos filtrar los resultados ofrecidos por la herramienta de tal forma que obtengamos en pocos minutos, información tan valiosa sobre por ejemplo, por qué términos de gran volumen está posicionando la competencia y nosotros no, y así poder elaborar una estrategia para cambiar esto.</p>
<p>Si sumamos esto a la capacidad de “retroceder en el tiempo” podemos incluso ver cómo se desarrolló, en términos de competencia una determinada campaña o noticia de última hora.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><figure id="attachment_688" aria-describedby="caption-attachment-688" style="width: 618px" class="wp-caption aligncenter"><img loading="lazy" decoding="async" class="size-full wp-image-688" src="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/keywords-elmundo-vs-elpais.png" alt="Informe competidores - ElMundo vs ElPais. Palabras clave comunes con filtros. Fuente: SemRush" width="618" height="782" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/keywords-elmundo-vs-elpais.png 618w, https://www.christianoliveira.com/blog/wp-content/uploads/2014/05/keywords-elmundo-vs-elpais-237x300.png 237w" sizes="auto, (max-width: 618px) 100vw, 618px" /><figcaption id="caption-attachment-688" class="wp-caption-text">Informe competidores &#8211; ElMundo vs ElPais. Palabras clave comunes con filtros. Fuente: <a href="http://es.semrush.com/">SemRush</a></figcaption></figure></p>
<h2>4. Futuro del (not provided) en los medios</h2>
<p>A pesar de todas estas alternativas, los datos con los que contamos siguen siendo mucho menos completos que cuando teníamos todas nuestras keywords directamente en la herramienta de anal´ (podemos obtener las keywords de otra fuentes, pero si necesitamos conocer también el comportamiento del usuario por keyword las cosas se complican). Y además, en relación al impacto en los medios del real-time, las herramientas nos limitan mucho más.</p>
<p>Lo que es seguro es que seguiremos buscando la forma de obtener la mayor cantidad de información posible para tratar de maximizar el tráfico SEO. Una de las fuentes que creemos que nos puede dar pistas sobre la terminología de los usuarios son las redes sociales. Por ejemplo, si conseguimos analizar en tiempo real los tweets respecto a una temática o acontecimiento X, podemos comparar cuáles son los términos que más se están utilizando y estar un poco menos “ciegos” en nuestra optimización.</p>
<p>O quizás Google da marcha atrás y nos devuelve esta jugosa información :) Ojalá!</p>
<p>&nbsp;</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/seo/como-afecta-el-not-provided-al-seo-en-medios-de-comunicacion/">Cómo afecta el (not provided) al SEO en medios de comunicación</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/seo/como-afecta-el-not-provided-al-seo-en-medios-de-comunicacion/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Resumen del UXSpain 2012 en Salamanca</title>
		<link>https://www.christianoliveira.com/blog/ux/resumen-del-uxspain-2012-en-salamanca/</link>
					<comments>https://www.christianoliveira.com/blog/ux/resumen-del-uxspain-2012-en-salamanca/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Wed, 03 Apr 2013 19:10:22 +0000</pubDate>
				<category><![CDATA[UX]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=621</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/ux/resumen-del-uxspain-2012-en-salamanca/"><img align="left" hspace="5" width="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2013/04/uxsp-logo2.png" class="alignleft wp-post-image tfe" alt="Logo UX Spain" title="" /></a>(Republico esta entrada en mi blog, que estaba previamente publicada en el blog de Betabeers. Por cierto, han salido ya las entradas para la edición 2013, que se hará en Valladolid, puedes comprarlas aquí) Si te interesa el tema de la eXperiencia de Usuario (UX), probablemente este no sea el primer post que lees acerca [&#8230;]</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/ux/resumen-del-uxspain-2012-en-salamanca/">Resumen del UXSpain 2012 en Salamanca</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;621&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Resumen del UXSpain 2012 en Salamanca&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
(Republico esta entrada en mi blog, que estaba previamente publicada en el blog de <a href="http://betabeers.com/" target="_blank" rel="noopener">Betabeers</a>.</p>
<p>Por cierto, han salido ya las entradas para la edición 2013, que se hará en Valladolid, puedes comprarlas <a href="http://uxspain.tol.do/" target="_blank" rel="noopener">aquí</a>)</p>
<p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-1605" src="https://www.christianoliveira.com/blog/wp-content/uploads/2013/04/uxsp-logo2.png" alt="Logo UX Spain" width="260" height="47" /></p>
<p dir="ltr">Si te interesa el tema de la eXperiencia de Usuario (UX), <a href="http://qweos.net/blog/2012/05/14/uxspain-2012-presentaciones-resumenes-y-cronicas/">probablemente este no sea el primer post que lees acerca del Uxspain 2012</a>, por lo que más que volcar aquí el contenido resumido de los dos días de ponencias, dejo mis impresiones desde un punto de vista de alguien que “no se dedica” al UX y que asistió al evento.</p>
<p> <strong>Lo positivo</strong></p>
<ul>
<li>Público multidisciplinar: normalmente los eventos grandes que se hacen centrados en un sector o disciplina concretos, acaban teniendo un público también únicamente de ese sector. En cambio, en UXSpain había público de todo tipo (negocio, marketing, desarrollo, diseño&#8230;).</li>
<li>Algunas charlas multidisciplinares: se habló de UX+Negocio, se habló de UX+Desarrollo Ágil y como trabajar con los desarrolladores, se habló de UX+Emprendimiento&#8230; Me parece esencial que se haga esto en cualquier evento sea del sector que sea. Hay que ver “the whole picture” y no cerrarse sólo en nuestra área de trabajo.</li>
<li>Organización: de 10! El wifi, los horarios, la comida, el pack de bienvenida, … Nos trataron como reyes, lo cual siempre se agradece. Mención especial a las “rubias de las camisetas verdes” :D</li>
<li>Juntar a tanta gente: es difícil organizar un evento en una ciudad que no sea Madrid o Barcelona y atraer a tanta gente durante un fin de semana. Esto me ha permitido conocer gente nueva y ver a otra que hacía tiempo que no veía.</li>
</ul>
<p><strong>Lo no tan positivo</strong></p>
<ul>
<li>La falta de casos prácticos: me hubiera gustado ver casos reales de trabajos de UX, qué problema se tenía qué solucionar, qué tipo de investigación y planteamiento del problema se hizo y en qué resultó (éxito o fracaso, y por qué). Durante la mesa redonda del primer día salió el tema de compartir información, y al parecer había gente a favor del secretismo, lo cuál me parece bastante grave; creo que internet es lo que es y estamos dónde estamos gracias al espíritu de compartir. La cantidad de recursos gratuitos que nos podemos encontrar online es enorme, y creo que a cambio <a href="http://www.bonillaware.com/weareatwar">todos tenemos que intentar aportar algo de vuelta</a>.</li>
<li>La falta de una cultura de medición en el sector UX: parece que se va hablando cada vez más de que hay que medir pero que poca gente lo hace. Creo que es algo esencial, para evaluar correctamente el éxito/fracaso y para poder basar las decisiones en datos. (Como dice la tarjeta de los chicos de <a href="http://ducksboard.com/">Ducksboard</a>: <a href="http://awe.sm/5q4ak">http://awe.sm/5q4ak</a>)</li>
<li>El “desprecio” de algunos ponentes/participantes hacia otras áreas (ya sea desarrollo, negocio, seo&#8230;). Bueno, más que despreciar, digamos subestimar. Todas las áreas aportan su granito de arena a cada proyecto y hay que saber respetar el trabajo de los demás, saber entenderse/comunicarse y tener muy claro el objetivo final del proyecto para que todas las áreas remen en la misma dirección.</li>
</ul>
<p dir="ltr">Con todo lo bueno y lo “no tan bueno”, creo que es un punto de partida genial para el sector y que el año que viene, con todo este feedback que están recibiendo, harán un eventazo.</p>
<p dir="ltr">Estaría genial que más gente de UX se acercase a eventos como Betabeers para compartir conocimiento, puntos de vista, y dar tips :)</p>
<p>&nbsp;</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/ux/resumen-del-uxspain-2012-en-salamanca/">Resumen del UXSpain 2012 en Salamanca</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/ux/resumen-del-uxspain-2012-en-salamanca/feed/</wfw:commentRss>
			<slash:comments>7</slash:comments>
		
		
			</item>
		<item>
		<title>Cómo exportar más de 500 filas en el nuevo Google Analytics</title>
		<link>https://www.christianoliveira.com/blog/analitica-web/como-exportar-mas-de-500-filas-en-el-nuevo-google-analytics/</link>
					<comments>https://www.christianoliveira.com/blog/analitica-web/como-exportar-mas-de-500-filas-en-el-nuevo-google-analytics/#comments</comments>
		
		<dc:creator><![CDATA[Christian Oliveira]]></dc:creator>
		<pubDate>Sat, 21 Jan 2012 14:18:57 +0000</pubDate>
				<category><![CDATA[Analítica web]]></category>
		<guid isPermaLink="false">http://www.christianoliveira.com/blog/?p=486</guid>

					<description><![CDATA[<p><a href="https://www.christianoliveira.com/blog/analitica-web/como-exportar-mas-de-500-filas-en-el-nuevo-google-analytics/"><img align="left" hspace="5" width="150" height="150" src="https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/parametro-explorer-table-rowCount-google-analytics-150x150.jpg" class="alignleft tfe wp-post-image" alt="Buscamos el parámetro &quot;explorer-table.rowCount en la URL de Google Analytics" decoding="async" loading="lazy" /></a>Tanto en la nueva como en la antigua versión de Google Analytics, el número máximo de filas que la interfaz te permite mostrar es 500. Esto está bien para visualizar los datos en la herramienta (500 ya me parece un poco excesivo) pero a la hora de exportar, se queda muy corto (sobre todo cuando [&#8230;]</p>
<p>La entrada <a href="https://www.christianoliveira.com/blog/analitica-web/como-exportar-mas-de-500-filas-en-el-nuevo-google-analytics/">Cómo exportar más de 500 filas en el nuevo Google Analytics</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>

<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top"
    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;486&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;0\/5 - (0 votos)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Cómo exportar más de 500 filas en el nuevo Google Analytics&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
            
<div class="kksr-stars">
    
<div class="kksr-stars-inactive">
            <div class="kksr-star" data-star="1" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="2" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="3" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="4" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" data-star="5" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
    
<div class="kksr-stars-active" style="width: 0px;">
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
            <div class="kksr-star" style="padding-right: 5px">
            

<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
        </div>
    </div>
</div>
                

<div class="kksr-legend" style="font-size: 19.2px;">
            <span class="kksr-muted">Rate this post</span>
    </div>
    </div>
Tanto en la nueva como en la antigua versión de Google Analytics, el número máximo de filas que la interfaz te permite mostrar es 500. Esto está bien para visualizar los datos en la herramienta (500 ya me parece un poco excesivo) pero a la hora de exportar, se queda muy corto (sobre todo cuando puedes tener &gt;1.000.000 de filas).</p>
<p>En la versión antigua, existía un pequeño <strong>«truco» para poder exportar hasta un máximo de <strike>50.000</strike> 20.000 filas</strong> (gracias Soraya por notificarlo en los comentarios. Antes eran 50.000). Este consistía en añadir, a mano, el parámetro «limit» en la URL indicando el número de filas máximo que queremos exportar (por ejemplo, para exportar 20.000 filas, añadíamos a la URL “<strong>&amp;limit=20000</strong>”), click en la tecla «Enter» y aunque nada pasaba en la interfaz, clickando luego en «Exportar -&gt; CSV» obteníamos un fichero .csv con los 20.000 resultados (ninguno de los otros formatos lo permitía).</p>
<p>Sin embargo, en la nueva versión de Analytics esto ha cambiado. Sigue existiendo una forma de exportar hasta 20.000 resultados pero ha cambiado el parámetro a utilizar. Ahora el procedimiento es el siguiente:</p>
<ol>
<li>Accedemos al informe del cuál queremos exportar más de 500 filas</li>
<li>Cambiamos el número de filas a mostrar de 10 al número que nos de la gana entre los disponibles (esto hará que en la URL aparezca el parámetro que define el número de resultados a mostrar) :<img loading="lazy" decoding="async" class="aligncenter size-full wp-image-493" style="display: block;" title="Seleccionamos más de 10 filas para mostrar en el informe de Google Analytics" src="http://www.christianoliveira.com/blog/wp-content/uploads/2012/01/ver-mas-de-10-filas-google-analytics.jpg" alt="Seleccionamos más de 10 filas para mostrar en el informe de Google Analytics" width="863" height="427" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/ver-mas-de-10-filas-google-analytics.jpg 863w, https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/ver-mas-de-10-filas-google-analytics-300x148.jpg 300w" sizes="auto, (max-width: 863px) 100vw, 863px" /></li>
<li>En la URL, buscamos el parámetro <strong>explorer-table.rowCount%3D<em>x</em></strong> (dónde &#8216;x&#8217; es el número que hemos elegido en el menú desplegable de «Mostrar filas: «, en este caso, 25):  <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-494" style="display: block;" title="Buscamos el parámetro &quot;explorer-table.rowCount en la URL de Google Analytics" src="http://www.christianoliveira.com/blog/wp-content/uploads/2012/01/parametro-explorer-table-rowCount-google-analytics.jpg" alt="Buscamos el parámetro &quot;explorer-table.rowCount en la URL de Google Analytics" width="880" height="317" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/parametro-explorer-table-rowCount-google-analytics.jpg 880w, https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/parametro-explorer-table-rowCount-google-analytics-300x108.jpg 300w" sizes="auto, (max-width: 880px) 100vw, 880px" /></li>
<li>Modificamos &#8216;x&#8217; por el número de filas que queramos exportar. Por ejemplo, para 20.000 quedaría explorer-table.rowCount%3D<em>20000</em>. En el ejemplo, tenemos un total de 558 filas así que, como las queremos exportar todas, quedaría así: <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-498" style="display: block;" title="Introducimos el número de filas a mostrar en el informe" src="http://www.christianoliveira.com/blog/wp-content/uploads/2012/01/introducimos-numero-de-filas-a-mostrar.jpg" alt="Introducimos el número de filas a mostrar en el informe" width="882" height="321" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/introducimos-numero-de-filas-a-mostrar.jpg 882w, https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/introducimos-numero-de-filas-a-mostrar-300x109.jpg 300w" sizes="auto, (max-width: 882px) 100vw, 882px" /></li>
<li>Presionamos la tecla «Enter». El problema de este método, es que, a diferencia de la anterior versión de Google Analytics, carga en pantalla (en el informe) el número de filas que ahí pongamos. Esto quiere decir que si ponemos 20.000, va a tardar un rato y dependiendo de la potencia de nuestro ordenador, nos dejará el navegador prácticamente «muerto» durante un rato más o menos largo (el firefox por ejemplo con un pc no muy potente se queda frito durante este tiempo). Una vez que termine, veremos que se han cargado todas esas filas directamente en el informe:   <img loading="lazy" decoding="async" class="aligncenter size-full wp-image-500" style="display: block;" title="Mostrando ya más de 500 filas en la nueva versión de google analytics " src="http://www.christianoliveira.com/blog/wp-content/uploads/2012/01/mostrando-mas-de-500-filas-en-google-analytics.jpg" alt="Mostrando ya más de 500 filas en la nueva versión de google analytics " width="859" height="336" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/mostrando-mas-de-500-filas-en-google-analytics.jpg 859w, https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/mostrando-mas-de-500-filas-en-google-analytics-300x117.jpg 300w" sizes="auto, (max-width: 859px) 100vw, 859px" /></li>
<li>Sólo nos queda ir a «Exportar» y seleccionar cualquiera de los formatos (en la nueva versión de google analytics, a diferencia de la anterior, sí nos vale cualquiera de ellos):</li>
</ol>
<p style="text-align: center;"><img loading="lazy" decoding="async" class="size-full wp-image-501 aligncenter" title="Exportar datos de informe en Google Analytics (CSV, TSV o CSV para excel)" src="http://www.christianoliveira.com/blog/wp-content/uploads/2012/01/exportar-datos-de-informe-en-google-analytics.jpg" alt="Exportar datos de informe en Google Analytics (CSV, TSV o CSV para excel)" width="509" height="171" srcset="https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/exportar-datos-de-informe-en-google-analytics.jpg 509w, https://www.christianoliveira.com/blog/wp-content/uploads/2012/01/exportar-datos-de-informe-en-google-analytics-300x100.jpg 300w" sizes="auto, (max-width: 509px) 100vw, 509px" /></p>
<p>Cómo puedes ver, el método sigue siendo bastante similar al de la versión anterior, pero en mi opinión sigue siendo un engorro; no les costaba nada añadir una opción a la hora de exportar en la que especificar el número de resultados que queremos, así nos evitaríamos todo este proceso y el hecho de tener que esperar a que el navegador cargue todos esos datos para mostrar por pantalla (algo inútil ya que lo que queremos es exportarlos para verlos en una hoja de cálculo, no en pantalla). También echo en falta (tanto aquí como en cualquier de los servicios de Google que permite exportar datos &#8211; <a href="http://www.google.com/webmasters/tools/" target="_blank">Webmasters Tools</a>, <a href="http://adwords.google.com/select/KeywordToolExternal" target="_blank">Adwords Keyword Tool</a>, etc.) una opción de «Abrir en una hoja de cálculo de Google Docs».</p>
<p>Más información:</p>
<ul>
<li>Para la nueva versión de Analytics: <a title="Exportación y mailing de informes en Google Analytics" href="http://support.google.com/analytics/bin/answer.py?hl=en&amp;answer=1038573" target="_blank">Documentación oficial de Google sobre exportación y mailing de informes</a> &#8211; click en «To export more than 500 Rows of Data:» (basado en mis intentos está mal la documentación, los pasos 4 y 5 no son ciertos; eso pasaba en la versión antigua &#8211; tiene toda la pinta de ser un copy+paste&#8230;)</li>
<li>Para la anterior versión de Analytics: <a title="Exportar más de 500 filas de datos de un informe en la antigua versión de Google Analytics" href="http://support.google.com/googleanalytics/bin/answer.py?hl=en&amp;answer=159501" target="_blank">¿Cómo exporta más de 500 filas de datos de un informe?</a></li>
</ul>
<p>La entrada <a href="https://www.christianoliveira.com/blog/analitica-web/como-exportar-mas-de-500-filas-en-el-nuevo-google-analytics/">Cómo exportar más de 500 filas en el nuevo Google Analytics</a> aparece primero en <a href="https://www.christianoliveira.com/blog">Blog de Christian Oliveira</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.christianoliveira.com/blog/analitica-web/como-exportar-mas-de-500-filas-en-el-nuevo-google-analytics/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
