skip to Main Content

I am using the following JavaScript to detect screen-width and use it as a constant across my template files through conditional statements to display / not-display portions of my site. While it has nothing much to do with my questions, but just in case… Yes I am using WordPress. Also I am already using mobiledetect PHP Library.

function getLayoutWidth() {

        if (isset($_GET['width'])) {
          define( "SCREEN_WIDTH", $_GET['width']);
        } else {
          echo "<script language='javascript'>n";
          echo "  location.href="${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
                        . "&width=" + screen.width;n";
          echo "</script>n";
          exit();
        }
    }

Important :

  1. Please don’t suggest Media Queries solutions as such techniques do not resolve my issue. Let’s assume if my site is 2MB in size, it will still load 2MB of content and then hide 1.5MB of it on mobile devices by using CSS properties like display:none; Whereas I don’t want that template part to load itself, thus not needing to hide anything. For Example — @1200px I want only 1 Sidebar to be displayed. @1600px I want 2 Sidebars to be displayed and over 1600px I want 3 Sidebars to be displayed.

  2. I am not looking to load an entire JavaScript library like jQuery or so to do this because location.href="${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=" + screen.width; is the only JavaScript in my entire site. Rest everything is pure PHP, HTML and CSS based. I even disabled jQuery of WordPress in the front-end template.

My questions :

  1. Is this a good / correct way to do from SEO stand point? If not why? The content that I don’t want to load is anyway not required to be indexed.

  2. My URL is displayed as example.com/my-product-category/my-product-name/?width=1440 How to remove /?width=1343 and display just example.com/my-product-category/my-product-name part?

Please don’t post suggestions as answers. Let others with proper answers do it. Kindly post suggestions in Comment Section.

2

Answers


  1. You can’t. You can’t get the width from a get parameter and also not have the get parameter set. You could however store it in a cookie.

    Also, I’d suggest that this sounds like a strange thing to do and there is probably a better way (like mobile detect).

    Login or Signup to reply.
  2. Is this a good / correct way to do from SEO stand point? If not why?
    The content that I don’t want to load is anyway not required to be
    indexed.

    Yes. This will cause problems for SEO.

    Consider that some (poorly designed) websites have URLs like www.example.com/index.php?page=homepage where the page parameter actually determines the entire content of the page. For this reason, search engines must consider each unique URL to be a distinct page even if a parameter only affects the layout of the page.

    If someone were to link to the page in question unknowingly including the width parameter, that specific URL gets credit for the backlink without giving credit to the other URLs with otherwise identical content.

    If for some reason you can’t fix these issues – at least use some canonical URLs.

    Further, the page presumably returns with an HTTP 200 status code indicating that the page is correct. But you then decide to redirect the user to a different page using Javascript. For good SEO (and programming practices in general) your webpages must provide an accurate status code. When you redirect a user, you need a 3XX status code.

    My URL is displayed as
    example.com/my-product-category/my-product-name/?width=1440 How to
    remove /?width=1343 and display just
    example.com/my-product-category/my-product-name part?

    You could possibly use a session to store the data between requests, but that still requires a separate $_GET or $_POST request to give PHP access to the data for the first time. This leaves the problems I described above around.


    For some reason, you feel the need to let PHP control the page layout. This is a very bad practice. PHP is designed to interpret incoming HTTP requests and provide the proper content for the page. Providing PHP with information about the viewport’s width is forcing PHP to make layout decisions. PHP should not be used to control page layout- that is the job of CSS.

    If you want good SEO and good programming practices, let each component do the job it was meant to do.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search