Menu icon Foundation
Does using Interchange effect SEO?

I was just wondering how interchange would effect SEO. With interchange facilitating serving of different content to different devices and different pixel densities, etc. Lets say for instance I have a page and I use interchange to serve different content for different devices, including text content. I would want a brief version or a summarized version of the textual content for mobile and a detailed version of the content for bigger screens.
My questions are :
Will google penalize me for doing this?
I'm not sure how the google bot would index the content, will it index the mobile content or the large screen content?
will it penalize me for duplicate content?
or
Penalize me for serving a different content to the users than the indexed content by the google bot?
I think a little clarity on this would be great.

if it does effect SEO then would there be any best practices of using interchange with some DOs and DONTs so that we can be sure of not spoiling out SEO ranking by using interchange.

Thanks

interchangeseo

I was just wondering how interchange would effect SEO. With interchange facilitating serving of different content to different devices and different pixel densities, etc. Lets say for instance I have a page and I use interchange to serve different content for different devices, including text content. I would want a brief version or a summarized version of the textual content for mobile and a detailed version of the content for bigger screens.
My questions are :
Will google penalize me for doing this?
I'm not sure how the google bot would index the content, will it index the mobile content or the large screen content?
will it penalize me for duplicate content?
or
Penalize me for serving a different content to the users than the indexed content by the google bot?
I think a little clarity on this would be great.

if it does effect SEO then would there be any best practices of using interchange with some DOs and DONTs so that we can be sure of not spoiling out SEO ranking by using interchange.

Thanks

Soumyadip Saha over 1 year ago

Thank you for the blog post. Due to the Google update in 2014, it will not penalize your website if you use interchange. But there is no particular answer to your question. However, you might be not sure whether content will be indexed or not. 

trinity Eli over 1 year ago

We normally create these as two different files and put them into our own directory structure under the Interchange directory called custom/GlobalSub and then add this, include custom/GlobalSub/*.sub, to the interchange.cfg file to make sure they get loaded when Interchange restarts. 

Audrey Bendjoua over 5 years ago

Hi Karl,

We were writing at the same time (I was asking Wu-Chang his opinion). As I've joinded the discussion very late, I did not exepect any answer.
So first of all, thanks a lot for your support.

And yes the images are "my awesome content" as I'm explaining it in my other post.

I'll try your solution. I don't know much about JavaScript but I'm tenacious.

Thanks again.

Audrey

Karl Ward over 5 years ago

I wouldn't say interchange has a negative impact on SEO for images ... Images are after all being loaded (by ajax), and Google should be capable of identifying that. I have never heard that images are "the awesome SEO content" before ...

Your issue with the ALT tag is unfortunate. Why not populate it normally, and then temporarily remove it on $(document).ready() (store them in data-alt for example for each image), and then re-apply them AFTER the image has been replaced?
$(document).on('replace', 'img', function (e, new_path, original_path) {

Audrey Bendjoua over 5 years ago

Oups ! Seems I miss my HTML code, here it is :

 <div class="project-img">
      <img data-interchange="[img/projects/dacca.jpg, (default)], [img/projects/dacca_r.jpg, (my_custom_query)]" /><span class="alt">La catastrophe de Dacca</span>
      <!--[if IE 8]>
      <img src="img/projects/dacca.jpg" alt="La catastrophe de Dacca" />
      <![endif]-->
      <noscript><img src="img/projects/dacca.jpg" alt="La catastrophe de Dacca" /></noscript>
    </div>
    <!-- End project image -->

Audrey

Audrey Bendjoua over 5 years ago

Hi everybody,

Sorry to jump into this matter so lately.

My question is simple :
If images are "the Awesome SEO content" (and they are in the website I'm buiding), should I avoid using Intechange and figure out another solution, using the PICTURE tag, like in the project above ?

http://picture.responsiveimages.org/

This question is linked to another recent post ("A kind of flash using Interchange"), when I've noticed issues using the "ALT" attribut with Interchange, when testing the site on mobil and tablet. I had to remove the "ALT" attribut because users would have seen it plainly, in full text, while the browser was searching the right image to display. Removing the "ALT" attribut disturbs me. (See the code to check what I did). No "SRC", no "ALT", no indexation ? (Not to speak about validation)

I hope someone will give me advice because images are at the heart of my project.

Audrey

Mandela


```HTML

span.alt {
  display : none;
}


```CSS  

neiljohnson over 5 years ago

This is a great forum & very helpful information thanks Asif .

neiljohnson over 5 years ago

It ia a great article its very helpful for new commers.

Chris Matthias over 5 years ago

@Karl - you can have default content for interchange with HTML content, but not with IMGs, apparently. I guess they were worried about overusage of interchange and loading two times the amount of images if there was a default image.

Karl Ward over 5 years ago

@Charlie: That is not entirely correct. First of all, you are assuming the worlds most advanced search engine does not consider media queries. Second, if Google did not read media queries, the given content would not even get hidden from it.

More importantly, on any device, the combination of visibility classes used will always display a variation of the text/message you are publishing, and Google will therefore also see this. If all your content is hidden on a specific device (or by default), this is a poor strategy from the developer .. you should only be hiding certain parts of content you dont want to display on certain devices. Besides, some would argue that you should not be using visibility classes at all for perceived seo-related content ... It is not usual to want to have a mobile device read an article entirely differently from desktop. Visibility classes should be used for interface elements, or possibly to cut down certain unimportant information.

I would certainly avoid visibility classes if possible, especially for text content, but unless carelessly implemented, it should not have adverse effects. This discussion is about Interchange, where if anything, the risks are greater: There is no default visible content in Interchange like you can use in a setup with visibility classes, besides the fact that Interchange has to load content through Ajax.

Charlie Schliesser over 5 years ago

I'm reading conflicting information in lots of places. I'm not sure that the recommendations above about using visibility classes are the best route – if a search engine sees <div class="hide-for-x">Some awesome SEO content.</div> and correlates that .hide-for-x { display: none; } is happening, I don't think you get credit for that content.

Chris Matthias over 5 years ago

As far as ajax content and Google indexing is concerned-- Google can index certain ajax content like Disqus because Disqus follow's the ajax content guidelines that Google outlines for indexing content.

As outlined at https://developers.google.com/webmasters/ajax-crawling/ -- If your ajax application uses an ajax URL structure like mysite.com/#!contact-page then google will send a request for mysite.com/?_escaped_fragment_=contact-page and it's up to your server to server the right content for that ajax URL when that URL parameter is present.

So, when google visits a page with Disqus on it-- It probably sees that it's an IFRAME and checks, the URL, converts the hashbang in the URL to a _escaped_fragment_ param and indexes that content.

I don't think it's going to work the same way with Interchange. You'll have to keep in mind that your base markup before interchange is triggered is what Google will index. So, make sure all your important content is in the base markup and you only accentuate the experience for the larger viewports. I think that's your best bet.

Karl Ward over 5 years ago

I would say yes, that would be a fair assessment. However, I would take it even further and also use visibility classes to deal with menus (top-bar, off-canvas etc.). One html page, is one request from the clients browser ... using interchange, means multiple requests, and should be avoided ... Even if it means loading a slightly bigger html file, it is more optimal than multiple requests ... For your information, this is the process of a request: http://d.pr/i/4Lew ... A html file, especially if it is Gzipped (which it should be), doesn't really have any impact on loading time or performance.

As long as the element is just html code, I would simply use the visibility classes. I would only use Interchange in combination with any external assets that need to be loaded: images, maps, plugins, video, iframes etc ...

Asif over 5 years ago

Karl,
Perfect, as I see it, would it be fair to set the following guidelines while working with interchange?

  1. Do not use interchange when dealing with Content for SEO. Use foundation's visibility classes instead
  2. Use interchange for images or any components that you want to display differently on large and small screens, like for example: when you want to use the top bar only in medium and large screens and want to use the off canvas in small screens. This way you would optimize the downloads of images and components and your page will not load unwanted stuff.

would that be a fair assessment?

Thanks

Karl Ward over 5 years ago

It certainly is a good question, but I think nobody can give a clear answer to this ... Foundation uses javascript Ajax to load html partials with Interchange. A few years ago, this would have been strictly a no-no in terms of SEO ... However, in recent years, it is evident that Google also executes javascript to some degree and can index the content. Exactly to which degree is unclear ...

I would predict it would be safe to use Interchange because it is a relatively simple process and Google is a smart machine. However, it eludes me how Google would handle the load based on media queries. That is why I would avoid it if possible. The perfect scenario for interchange, is to load different images for different screen sizes ... or different maps etc ... basically the same content, just configured for different screens.

Just as an example, Google now indexes pages with disqus comments content, which are loaded by javascript through a 3rd party service.

Asif over 5 years ago

@Karl
I agree with your solution, but I wanted clarity in the use of Interchange and it's effects on google's indexing and SEO. If we know exactly what is happening we might then be in better position to take an informed decision to weather use interchange or not.
My Example was a simple one, other users might have more complex situations where they would require interchange and where SEO is also a concern.
a clarity on this would be most welcome.

Thanks

Karl Ward over 5 years ago

I think Google is so adapted in 2014, that it won't penalize you for javascript-content. However, I am not 100% sure it will get indexed correctly. Why bother using interchange for this anyway? You should just load a page normally, and toggle certain elements based on device with the Foundation visibility classes. For example:

<h1>Heading</h1>
<p class=lead>Important stuff here</p>
<p>more stuff</p>
<p class=show-for-medium-up>even more stuff here that you want to hide away from small devices</p>
<p class=hide-for-medium-up>oh, and here is some text for only mobile devices if you want that</p>

It doen't cost the client anything to load a document with slightly more text ... In fact, it creates more loading and request when you have to add inline ajax loading, which interchange will use.