Quick fix "Google mobile friendly" Website - consequences?

[Genesis]

This is cheating, but for a quick fix to get a desktop Google approved for mobile friendly it works. It comes with a free version with an ad that doesn't really look that bad, and also a paid version with no ads. I had a responsive Website with Googles "Awesome! This page is mobile-friendly" seal of approval in minutes. The minutes were mostly navigating to cpanel and copy and pasting the javascript. It was just too easy.

All you need to do is put your URL in the Web page below, it then provides you with plenty of options to style it the way you want it. Once you're happy, it then generates javascript that you have to add to the header section of your index page. It works like this:

https://www.dudamobile.com/

Navigate to the section below and input the URL of your Website:

This is then what happens. All mobile devices are directed to the mobile version, including Google Bot :yahoo:

The Website I tried went from Google unfriendly to

Awesome! This page is mobile-friendly!

OK, now from the SEO experts here would like to know what the consequences could be for redirecting to a mobile version with the above method.

 

[Genesis]

OK, just noticed a catch. Not sure which premium feature they are referring to but am probably going to find out soon.

For a serious Website that needs a short-term quick fix for traffic purposes probably affordable.

 

[strokerace]

They are going to do what I am doing now. Change the CSS file

 

[Genesis]

If one doesn't have the time I think this is a good short-term solution for your smaller sites. For longer-term one probably need to do what you and I've been trying. I haven't given up yet. I feel quite proud with the method we've been using that I managed to get past three out of the five Google X's. Only two left - one is page width and the other the links are too close together. At least I aced all of the others through simple CSS and this code in the header section of the index page:

<meta name="viewport" content="width=device-width, initial-scale=1" />

I still have to master the @media CSS coding. Just learned tonight with some further research that quite a large number of mobile phones would be excluded with the media CSS.

Haven't given up on that but was nice to get Googlebot's approval for a change ....

 

[strokerace]

Thats because they want people to pay. What was once free, has turned into a multi-billion dollar industry. I went to a site that said they could make my facebook app into a mobile app. Again, just another ploy to make you spend money. I believe the net is to be free.

Back in the early2000's, I wrote some code to make my site show on phones, it was called WAP

 

[Genesis]

Great point! Did provide temporary light relief though. I'm still working on CSS. Maybe need to think out of the box as well. I.e. create dedicated CSS for hand-held devices instead of trying to work it into the existing CSS.

 

[strokerace]

Hmm, never thought about that one. Sound like it might be a solution

 

[smalpierre]

Well the permanent solution (as permanent as it gets anyway) is to do a mobile first layout, and use media queries to change the styles for larger devices.

A quicker fix for existing sites would be to put a media query for smaller devices in your existing css and restyle it for mobile devices.

This keeps detection / redirection, and external dependencies out of the picture entirely.

 

[Genesis]

Agreed Smalpierre, that's my next step. A separate stylesheet that detects mobile devices.

One thing I've picked up though is that not all android phones can read the media queries. You've got to know your stuff with media queries as you may miss a large percentage of the smart phones to the extreme if you only rely on media queries. Style should probably come first. And media queries that know their stuff. So one probably would need to test a very wide spectrum of phones and other handheld devices if you use media queries for existing desktop styles.

 

[strokerace]

Don't use media queries. Its a cheap hack Use %for width instead of px or em. It will make your sitelook the same on all platforms and easier to fix. Once I am done painting, I will do what they did in the video on my 2005code and show you how it still looks the same on all platforms

 

[smalpierre]

The objective is to make the site look good - not necessarily the same on smaller devices. Media queries aren't a cheap hack, and em has some advantages over percentages - namely that font sizes are larger on smaller devices.

If you have to zoom in on everything to make see it, no good. If now your text overflows the boxes it's in - no good.

They're both relative measures, it's just a difference in what it's relative to.

 

[ogah]

don't use meta viewport if css not support responsive layout, it can make only showing the left side of your webpage in small screen device

 

[Genesis]

don't use meta viewport if css not support responsive layout, it can make only showing the left side of your webpage in small screen device

That may be, but you score on the other Google points. I manage to score half of the Google requirements with viewport. Now I'm looking to create CSS to cover the other half. I need time, but I'm sure it is doable. I'd like to go one step further though. Create a vertical menu bar from the sidebar links.

 

[ogah]

that rights. but we didnt "feeding" the crawler only. we want visitor happy for reading our content

 

[Peter]

I tested adding the viewport meta tag to my site and it makes the Google test page show green, but I reverted the change because I'm not sure it's more user friendly. Half the screen is taken up by the side menu and some pages doesn't get enough space for the content. The width of the site is kind of responsive already but it was not designed for as small sizes as the preview on Google's mobile test page. I think it's OK down to a width of 480px.

On another site I'm working on, adding the viewport meta tag seem to work much better, because it doesn't have a side menu.

 

[Genesis]

@"ogah" Great point Ogah. And VERY well said!

that rights. but we didnt "feeding" the crawler only. we want visitor happy for reading our content

@"Peter" Did you check what happened with the Google Mobile Friendly test when you applied the viewport meta tag?
https://www.google.com/webmasters/tools/mobile-friendly/

Take it before viewport meta tag and then after viewport meta tag just for seeing how Googlebot looks at it?

 

[Peter]

@"Peter" Did you check what happened with the Google Mobile Friendly test when you applied the viewport meta tag?
https://www.google.com/webmasters/tools/mobile-friendly/

Take it before viewport meta tag and then after viewport meta tag just for seeing how Googlebot looks at it?

That's what I meant I did. Without the viewport meta tag it's zoomed out so that the text is too small to read, which is one of the things that is pointed out as the reason why the page is not mobile friendly. If I add the viewport meta tag it passes the test, but as I said it doesn't always give enough space for the main content.

Is the mobile shown on that page below average size? I think if the phone was flipped into landscape mode it would be OK, so maybe I should have the viewport meta tag after all?

If the width is too small, is it easy too zoom out a little? I know that would make the text size smaller but I don't think just a little would hurt because the font size of the main content is not that small to begin with. Will zooming out/in change the logical width or will it add horizontal scroll (or is both features generally supported)? I don't own a mobile device so I don't know how these things usually work.

 

[ogah]

another problem if use the wrong meta viewport

 

[Genesis]

If I add the viewport meta tag it passes the test, but as I said it doesn't always give enough space for the main content.

The same with me. I do slightly better on the test, but the left side bar causes content to slide, although much better than it did before the viewport meta tag. That is as far as I got. I want to find a way where I can make the sidebar into a menu for mobile phones and it is no longer used as part of the page. Not sure whether I'm going to accomplish that as it would require the following:

1. CSS or Javascript or both for being able to detect ALL handheld devices or non-desktop devices in portrait and landscape mode.

2. CSS or Javascript or both for detecting the navigation menu and creating a menu for the handheld device such as below.

3. CSS or Javascript that tells the hand-held device to ignore sidebars.

If the width is too small, is it easy too zoom out a little? I know that would make the text size smaller but I don't think just a little would hurt because the font size of the main content is not that small to begin with. Will zooming out/in change the logical width or will it add horizontal scroll (or is both features generally supported)? I don't own a mobile device so I don't know how these things usually work.

If the text size goes smaller then Googlebot will penalize the site as font size is one of the criteria for mobile friendly test.

 

[strokerace]

In the video, it states you need to move any sidebar content, adjust the test so you don't need to zoom. It also states to adjust your menu tabs so they are easy clickable. Sorry, been away a few days as I lost my laptop and all my data so I can't finish my site change. I have 2 side bars that I need to move or have one ignored altogether. Which, I think I should just remove and put on a seperate page on its own anyways.