Desktop webpages rather that mobile webpages showing up mobile devices after setting up dynamic website

I have developed a forex data website which I had thought was best viewed on a desktop PC since alot of data is arranged in the most concise manner possible so that it may be viewed in one glance for efficiency. It works fine, however, google feels differently and apparently will not boost SEO ratings if the pages doesn’t display well on a mobile device. OK to this end, I redesigned the pages to fit a mobile screen using the dynamic method. That is, not using a separate url, only separate pages, and have implemented the following;

  • put an alternate tag in the index.htm header (and all other pages) pointing to the mobile page which is in a subdirectory of the url home directory. Included the media="only screen and (max-width: 640px)" parameter. I also put in a canonical tag pointing to the index.htm itself and in the mobile pages as well, pointing to their respective desktop pages. A viewport metatag is also in the index header.

  • added a vary HTTP header in the htaccess file as well as RewriteCond %{HTTPS} off to direct all access as secure. However, when I tried to put RewriteCond %(HTTP_HOST) ^www\fxchartdata.com$ [NC], to redirect all www access to the simple url https://fxchartdata.com, the website would not show up on firefox and chrome. It now shows up on chrome but not firefox.

  • have been careful to put respective css and supporting files together in the correct directory as well as a sitemap. Actually this and various other procedural issues are handled automatically by Open Element.

The webpage only shows up for desktop, even though all the proper pages for mobile are sitting in the /mobile directory. I am using Open Element as a web developer tool. It uses a considerable amount of java script which I am not really familiar with, aside from general knowledge from a programming backround. There is also a bit of php which I needed to handle particular situations including proper display of text based data and an email contacts page.

In short, nothing I have done will display the correct page which is fxchartdata.com/mobile/m_Home.htm on a mobile device. I confess to being a somewhat new to web development, although I did all the work myself. I have checked the page references and corrected any inconsistencies which I found, although there remains the possibility that I missed at least one.

Any idea what I might have left out or been careless about ?

desktop index.htm section

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="openElement (1.57.9)" />
  <title> EzPrepForex Trading Preparation</title>
  <meta name="description" content="Foreign currency exchange trading preparation tool. Reduces time needed to study the market for the best forex trades." />
  <meta name="keywords" content="forex trading preparation,forex trading analysis,forex chart data,forex news,forex data" />
  <meta name="copyright" content="2019" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="shortcut icon" href="favicon.oe.ico?v=50491105200" />
  <link id="openElement" rel="stylesheet" type="text/css" href="WEFiles/Css/v02/openElement.css?v=50491105200" />
  <link id="OEBase" rel="stylesheet" type="text/css" href="index.css?v=50491105200" />
  <!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="WEFiles/Css/ie7.css?v=50491105200" />
  <![endif]-->
  <script type="text/javascript">
   var WEInfoPage = {"PHPVersion":"phpOK","OEVersion":"1-57-9","PagePath":"index","Culture":"DEFAULT","LanguageCode":"EN","RelativePath":"","RenderMode":"Export","PageAssociatePath":"index","EditorTexts":null};
  </script>
  <script type="text/javascript" src="WEFiles/Client/jQuery/1.10.2.js?v=50491105200"></script>
  <script type="text/javascript" src="WEFiles/Client/jQuery/migrate.js?v=50491105200"></script>
  <script type="text/javascript" src="WEFiles/Client/Common/oe.min.js?v=50491105200"></script>
  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://fxchartdata.com/mobile/m_Home.htm" >
  <link rel=”canonical” href=”https://fxchartdata.com/index.htm”>
 </head>

htaccess


RewriteEngine On 
RewriteCond %{HTTPS} off 
RewriteRule ^(.*)$ https://%

#Protect .htaccess
<Files .htaccess>
order allow,deny
deny from all
</Files>

# another ver to force https
#RewriteCond %{HTTPS} !=on
#RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

#RewriteCond %(HTTP_HOST) ^www\fxchartdata\.com$ [NC]
#RewriteRule ^(.*)$ https://fxchartdata.com/$1 [L,R=301]

#FreeScript
AddDefaultCharset UTF-8
<IfDefine !Free>
<IfModule  mod_headers.c>
Header set Cache-Control "private, max-age=0, must-revalidate"
Header set X-UA-Compatible "IE=8; IE=9; IE=10"
Header append Vary User-Agent
</IfModule>
</IfDefine>

1 thought on “Desktop webpages rather that mobile webpages showing up mobile devices after setting up dynamic website”

  1. not using a separate url, only separate pages

    Not sure of your definition of a "URL" here, but this is "using a separate URL". /index.htm vs /mobile/m_Home.htm are two different URLs.

    The way to avoid a "separate URL" is to use an entirely responsive design.

    The webpage only shows up for desktop, even though all the proper pages for mobile are sitting in the /mobile directory.

    There’s nothing in what you’ve posted that restricts the "desktop" page (ie. index.htm) only to desktop user-agents. All user-agents will view the desktop page if they request the /index.htm URL, regardless of device/user-agent. Whilst you are setting the Vary: User-Agent, you don’t actually appear to be varying the response based on the requested User-Agent? Since you have separate URLs for desktop and mobile User-Agents you need to actually implement some kind of 302 (temporary) redirect based on the User-Agent.

    Be mindful of the Google crawlers / user-agents as these will also need to be included in the redirection.

    <link rel=”canonical” href=”https://fxchartdata.com/index.htm”>
    

    You are erroneously using curly-quotes in your canonical link tag.

    RewriteCond %{HTTPS} off 
    RewriteRule ^(.*)$ https://%
    

    At the top of your .htaccess file you have "half" a directive that needs to be removed.

    #RewriteCond %(HTTP_HOST) ^www\fxchartdata\.com$ [NC]
    #RewriteRule ^(.*)$ https://fxchartdata.com/$1 [L,R=301]
    

    Curious that you included the same "typo" in your question description (or was this a copy/paste?)… you are missing a literal dot after www\ in the above condition. \f is a form-feed (in regex) so the above will never match – so this directive won’t actually do anything. (Puzzling that you stated that this directive made the site inaccessible on Firefox and Chrome. This is not possible.)

    If you are not implementing HSTS then you should reverse the two canonical redirect directives in order to avoid a double redirect. In other words:

    # www to non-www (and HTTPS)
    RewriteCond %(HTTP_HOST) ^www\. [NC]
    RewriteRule (.*) https://example.com/$1 [L,R=301]
    
    # Force HTTPS
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
    

    google feels differently and apparently will not boost SEO ratings if the pages doesn’t display well on a mobile device

    This is not strictly true. If your pages do not display well on mobile then your pages might not perform so well in mobile search (understandably). However, this won’t necessarily affect ranking on desktop search. But if your pages are not intended for mobile users and you are not expecting mobile users to be searching for your pages then maybe you don’t need to target mobile users – but this is certainly a risk.

    Reply

Leave a Comment