4

Is the below code problematic in respect to SEO and Google?

This is a small sample of how I intend to change my non-mobile friendly website into mobile friendly using CSS media queries and javascript.

The reason why I want to opt for this type of code is to of course avoid duplicate content in respect to both HTML and code maintenance. The code for the mobile version of the website will be "extracted" from the desktop version, injected in placeholders.

This will allow me to keep the desktop version untouched, add a number of placeholders for the mobile version and populate them in the below way.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>
@media (max-width: 360px)
{
    #ul-desktop
    {
        display: none;
    }
}
</style>

<html>
    <ul id="ul-desktop">
        <li>Bullet #1</li>
        <li>Bullet #2</li>
        <li>Bullet #3</li>
        <li>Bullet #4</li>
    </ul>

    <ul id="ul-mobile"></ul>

    <script type="text/javascript">
        if($(window).width()<=360)
        {
            $("#ul-desktop li").each
            (
                function (index)
                {
                    $("#ul-mobile").append("<li>" + $(this).html() + "</li>");
                }
            );
        }
    </script>
</html>


Edit

Of course I might as well decide to have two different versions of the page, one for desktop and one for mobile with a big advantage being that mobile users will not have to download my big CSS/JS files used by desktop, they will download a much, much lighter version of my pages.

But I have server restrictions, such as that I cannot implement user-agent redirections on the server side. So I need some help:

  1. Is there any difference between mobile.mydomain.com compared to mydomain.com/mobile, again, in respect to SEO? Due to server restrictions, I'm afraid I can only opt for the latter.

  2. Would a window.location redirection work in my case? I was thinking about using the matchMedia() JavaScript function, hide all content and show a small indicator with "Loading mobile version" and do the redirection. But wouldn't this solution download two versions of the pages, the desktop and the mobile one after the redirection is complete?

Improve this question

3 Answers 3

Reset to default
6

The idea to make a site mobile friendly is excellent, but I don't think your method is best, especially if later you decide to monetize your website with adsense for these reasons:

  1. You're scripting your site so that text is hidden if a screen resolution is under a specific value. Google may think you're playing games when you use this technique and might make your site lower in its index as a result.

  2. The number of bytes required to process the page will include too many unnecessary ones because the client has to download everything including the hidden text in order for the page load to be complete. If the hidden text becomes huge, then mobile users might have a big bill to pay depending on their plan.

There are two ways to solve your situation.

  1. Either create a separate page for desktop users and a separate page for mobile users and send the users to the appropriate page via web browser detection techniques. (There are scripts for this on the net).

Or. 2. Follow your method but only change object properties instead of user readable text. For example, display the same text for both mobile and desktop users, and set an image so the source of it is different for mobile in comparison to desktop. You could do the same with the size of the image too if you want.

Improve this answer
1
  • But if I create a separate page for all my pages that would mean having to maintain two sets of pages for every page, example: article-100.html as well as article-100-mobile.html. Also wouldn't that mean having the same content on multiple pages, hence duplicate content all over the place? What I described in my original post is for ALL pages of my website, it's a sports news website currently having more than 2,000 articles. Granted, they are dynamically generated, but there are other pages like sub homepages which are all unique.
    – WPRookie82
    Mar 20, 2015 at 20:28
5

Maybe it's just your simplified example, but your example can be rewritten to use just CSS and media queries only, no JavaScript is required here and no change to the source.

You are "half" using a media query to hide the desktop HTML and using JavaScript to copy the contents of the desktop HTML (in its entirety) into a mobile container - which is presumably styled for mobile. Unless you are actually going to change the HTML markup of the mobile version (in some radical way) then you can simply use CSS and media queries to style it...

<style>
#ul-desktop
{
    /* Default style for desktop */
}
@media (max-width: 360px)
{
    #ul-desktop
    {
        /* Override style for mobile */
    }
}
</style>

<html>
    <ul id="ul-desktop">
        <li>Bullet #1</li>
        <li>Bullet #2</li>
        <li>Bullet #3</li>
        <li>Bullet #4</li>
    </ul>
</html>

But maybe your actual code is not actually like your example and too involved to be manipulated with CSS?

Likewise, your example code is probably going to be OK SEO-wise since the desktop and mobile content is the same. That statement was perhaps a bit hasty / oversimplified. If search engines simply look at the HTML source (as they used to and some still do) then the desktop and mobile content would be seen as the same - the source HTML is the same. However, some will attempt to interpret the CSS and "maybe" JavaScript (to some extent) and this is where problems could arise in your original example.

In your example, if a SE bot was able to process your CSS media queries (which hides the desktop content) but failed to process your JavaScript (either because it simply doesn't process JS, or because the JS is too complex for it to process completely) then you are in danger of having no content at all on your mobile site.

Improve this answer
5
  • Thats a good idea, but full HTML should be used on every webpage that goes live. this means include the head tag, body tag, and to make more web browsers happy, add the type="text/css" parameter to the style tag.
    – Mike -- No longer here
    Mar 21, 2015 at 5:17
  • @w3d, yes, that's right, mine is a simplified example to keep everything clear and simple in my original post. Reason why I also omitted important tags such as <head> as Mike correctly pointed out. So your assumption is perfectly correct, the actual code is much "bigger" and cannot be modified simply with CSS. So if I understood correctly, as long as the desktop and mobile content is the same - and in my case it is - SEO-wise I should be safe, correct?
    – WPRookie82
    Mar 21, 2015 at 8:07
  • 1
    @WPRookie82 Sorry, I was perhaps a bit hasty in my comment regarding SEO. In your example, where you have essentially half a media query and JavaScript to rebuild the content then I think you could have problems SEO-wise (I've updated my answer). "and in my case it is" - I'm a bit confused, are you saying that just in your example the desktop/mobile content is the same OR on the live site as well? Even if your example is greatly simplified it should still serve to illustrate the actual problem. If the actual HTML can't be manipulated with CSS alone then the example shouldn't be able to either.
    – MrWhite
    Mar 21, 2015 at 12:03
  • Apologies for not making myself clear. The approach I highlighted in my original post will be used (if I decide to go ahead with this solution) in my LIVE website as well, yes. In theory the desktop version will stay untouched, I will then add a number of <div> and other HTML elements on the page which will be populated from the content of the desktop website. And then I will show/hide accordingly based on the screen.width of the user. So the ending result for the mobile version will be a lot of empty DIVs, ULs, etc. which will be populated through Jquery, from the content of the desktop site.
    – WPRookie82
    Mar 21, 2015 at 12:07
  • 2
    This seems like a perfect place to use media-queries, for example, toggling "display: none" depending on the width that the user sees.
    – John Mueller
    Mar 25, 2015 at 8:28
2

This is an answer to WPRookie82's second question above:

I have two versions of my site as separate pages, but I generate them using PHP so that I don't need separate html pages. But if the content is yours, then paraphrase it somewhat, but most importantly, change the title tag and meta description tags to show that its the mobile version.

Below is an example of what I mean. I made it ridiculously simple for people to understand.

Desktop site HTML code:

<html>
<head>
<title>Sports site</title>
<meta name="description" content="This sports site for your desktop computer is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your desktop computer. bla bla bla .....
</body>
</html>

Mobile site HTML code:

<html>
<head>
<title>Sports site - Mobile Edition</title>
<meta name="description" content="This sports site for your mobile device is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your cell phone or smartphone. bla bla bla .....
</body>
</html>
Improve this answer
5
  • But do they share the same URL?
    – WPRookie82
    Mar 20, 2015 at 20:39
  • no. it would be two separate URLs, and in many cases, the URLs would be coming from different domains. back in the day, websites used the "m" sub-domain to indicate mobile site.
    – Mike -- No longer here
    Mar 20, 2015 at 20:41
  • With their respective rel=”alternate” and rel=”canonical” I presume. And how is the redirection to the correct version of the page being made?
    – WPRookie82
    Mar 20, 2015 at 20:43
  • and the redirection is made based on what the user agent is. you'll have to look into apache's mod_rewrite or use PHP or another server-side scripting technique to compare user agents. This info can be found online in various places.
    – Mike -- No longer here
    Mar 20, 2015 at 20:44
  • Mike, I like your approach as well, I edited my original question with some questions.
    – WPRookie82
    Mar 21, 2015 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.