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 :
-
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. -
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 :
-
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.
-
My URL is displayed as
example.com/my-product-category/my-product-name/?width=1440
How to remove/?width=1343
and display justexample.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
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).
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.
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.