Announcement

Collapse
No announcement yet.

Viewport Meta Tag Location

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Viewport Meta Tag Location

    I'm using a Google "Is you web page mobile-friendly" test...to test my website running vBulletin 4.2.5.

    One of the errors this test is indicating is "Viewport not set". I have the following viewport meta tag at the top of both of my header & headinclude vBulletin templates:

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    What can possibly be wrong? Are neither of these templates the proper place for this viewport meta tag? If this is the correct place...why is the Google Mobile-Friendly test giving me this error?

    Thanks

    p.s. I've run this test via a 2nd testing site as well...and I'm getting the same error as the Google Test mentioned above.

  • #2
    1. take it out of header

    2. leave it in headinclude but it looks like you have magic quotes in your version of the tag and if it's at the very top you need to move it down below the meta tags.

    Copy and paste this:

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    Psychlinks Web Services Affordable Web Design & Site Management
    Specializing in Small Businesses and vBulletin/Xenforo Forums

    Comment


    • #3
      Thanks very much for the info.

      * I removed the viewport meta tag from the header template...and now it's only in the headinclude template.
      * I also moved the viewport meta tag as far down as I could (below all other meta tags).

      I ran the Google "Is you web page mobile-friendly" test again...and it's still saying the viewport tag is missing.

      It was mentioned that I had "magic quotes" in the viewport meta tag I'm using. If there's another way to do it...I'm certainly willing to give it a try. I used that viewport meta tag version since it's what I seem to see most commonly on the internet.

      Thanks

      p.s. I noticed the viewport meta tag code you gave me to copy & paste is exactly the same as mentioned in post #1...wasn't sure if it was supposed to be different.

      Comment


      • #4
        The default style of vBulletin 4.2.5 is not mobile friendly.

        It has a separate limited Mobile Style that can be identified under Settings -> Options -> Style & Language Settings. If you have the Mobile Style set and Google sends the appropriate Device Detection, then a mobile style will be shown. You shouldn't have to change anything in the templates. The problem with Device Detection is that it is easy to become out of date. vBulletin 4 was first released in 2009. The detection is based on best practices in 2009.

        vBulletin 5 fixes this issue by using a single responsive style that uses capability detection and reformats the display based on screen-size, not a specific device or user agent string.

        p.s. I noticed the viewport meta tag code you gave me to copy & paste is exactly the same as mentioned in post #1...wasn't sure if it was supposed to be different.
        The tag in post #2 doesn't have "Curly Quotes" which would break the tag.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • #5
          Originally posted by Wayne Luke View Post
          The default style of vBulletin 4.2.5 is not mobile friendly.

          The problem with Device Detection is that it is easy to become out of date. vBulletin 4 was first released in 2009. The detection is based on best practices in 2009.
          Yes understand that 4.2.5 is not so mobile friendly. I'm definitely not an expert...but was mostly trying to do as much as I could from an SEO standpoint to make the crawlers as happy as possible.

          I'm currently getting 3 serious errors from this Google mobile friendliness test...and one of them is "No Viewport Meta tag". I figured adding a Viewport Meta Tag should be super easy to do...thus thought I would do it. But then was surprised that the Viewport Test was saying I don't have one...even after adding it.

          Originally posted by Wayne Luke View Post
          The tag in post #2 doesn't have "Curly Quotes" which would break the tag.
          Is there something different between the Viewport tag in post #1 and tag in post #2. They look the same to me...but maybe I'm missing something. If they are different...please let me know what it is...and how to correct it.

          Thanks much.

          Comment


          • #6
            Ok...I got it. I didn't realize that the Viewport Meta tag code that DJ provided in post #2 was slightly different (different quotes). I should have copied & pasted it right away like DJ said.

            I ran the Google Viewport test again...and now the "No Viewport Meta tag" error has disappeared (awesome)!

            One last question please.

            If I'm using incorrect quotes in some of the other meta tags...will this mess them up as well? Like the meta keywords, meta description, etc tags?

            Thanks very much.

            Comment


            • #7
              I'm all good now guys. I fixed a 2nd meta tag that had the same quote error (curly quotes).

              Thanks very very much for the help!

              Comment


              • #8
                The straight quotes are ASCII symbols and allowed in the HTML code. The curly quotes are UTF-8 and can break tags. Generally it is best to use a text editor, i.e. Visual Studio Code, to write out HTML code as these will insert the proper characters from your keyboard.

                https://practicaltypography.com/stra...ly-quotes.html
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API - Full / Mobile
                Vote for your favorite feature requests and the bugs you want to see fixed.

                Comment


                • #9
                  Originally posted by Wayne Luke View Post
                  The straight quotes are ASCII symbols and allowed in the HTML code. The curly quotes are UTF-8 and can break tags. Generally it is best to use a text editor, i.e. Visual Studio Code, to write out HTML code as these will insert the proper characters from your keyboard.
                  I do use Visual Studio Code when I'm doing some coding (although I am no coding expert by any means). Lol

                  I'm guessing the error I may have encountered with this Viewport meta tag was...I may have simply copied the complete Viewport meta tag code from one of the many website articles on the internet...and maybe the code I copied (and then pasted into my headinclude template)...may have had curly quotes incorrectly in them...causing the problem.

                  I also researched things...and see it is possible to type "straight quotes" or "dumb quotes" (as some folks call them) directly from a regular keyboard without any special app...and that it's a 3-key combination on my setup.

                  I guess the "Lesson of The Day" for me was...when it comes to html...the type of quotes used is very very important!

                  Thanks for all the help!

                  Comment


                  • #10
                    I just did some quick testing. And it looks like my vB site running 4.2.5 looks better on mobile devices without the viewport tag than it does with the Viewport tag.

                    Comment


                    • #11
                      vBulletin 4.2.5 wasn't really designed for mobile devices and uses outdated XHTML.
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud demonstration site.
                      vBulletin 5 API - Full / Mobile
                      Vote for your favorite feature requests and the bugs you want to see fixed.

                      Comment


                      • #12
                        Originally posted by Wayne Luke View Post
                        vBulletin 4.2.5 wasn't really designed for mobile devices and uses outdated XHTML.
                        I hear ya...and I better understand...now that I'm actually seeing things in action.

                        Thanks very much again for the help.

                        p.s. On a positive note...our discussion in this thread did help me with one of the other meta tags that had "curly quotes" in it...and probably wasn't working properly before today.

                        Comment

                        Related Topics

                        Collapse

                        Working...
                        X