[Resolved] Getting meta viewport below charset

Home Forums Support Getting meta viewport below charset

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1520659
    Maarten

    Dear support,

    Would it be possible to get <meta name=”viewport” content=”width=device-width, initial-scale=1″> below the <meta charset=”UTF-8″> and then <link rel=”profile” href=”gmpg.org/xfn/11″>

    Just to make my <head> be more inline with Bootstrap lines.

    Is there a way to have this happen or do I need to recreate a child theme for that?

    Regards.

    #1520723
    David
    Staff
    Customer Support

    Hi there,

    whats the purpose of moving it below the charset ? The order of those meta and link elements should not make a difference to the site behaviour. Let me know.

    #1525046
    Maarten

    Hi David, excuus for the late reply.

    Well I was working on a Saas idea and used Bootstrap and all for that and after looking at a lot of sites at least 70+ they all have viewport below char meta in head above the title.

    I have no idea if it has any effect for the bots, but it looks a bit better also because it is than on a new line and all this meta data is in the head before any added data by plugins.

    Yeah, that is about it. I think if possible and Tom has some time move it high in the head below char just because it reads a bit better.

    Of course if there is time to do this in the mean time I can just copy header.php to my child so no real problem but if this can be in core theme that would be great, when the time is there of course.

    Oh, I do remember one thing. When I moved it to that place and put my browser in mobile view mode it did pick it up a bit faster. I mean it seems to pick up the responsive part faster then when I put it below all other code but it could also be my eyes of course : )

    Anyway, thanks again for your fast replies and good support!

    Regards.

    #1525084
    David
    Staff
    Customer Support

    Yeah unfortunately it requires a child theme as charset and profile are baked into the head.
    You can move the viewport to immediately after those meta with:

    remove_action( 'wp_head', 'generate_add_viewport' );
    add_action( 'wp_head', 'generate_add_viewport', 0 );
    #1525098
    Maarten

    Wait you say it is possible to just use a function or action in my functions plugin that will move the whole viewport to top and below charset=UTF-8 ?
    That is incredible as now I do not have to keep an eye on new updates to the header.php file from GP.
    I hope this does not slow down my page load so if not than again a million thanks!

    #1525100
    David
    Staff
    Customer Support

    Can’t move it between the two meta tags in the header but it moves them together – so the markup is like so:

    <meta charset="UTF-8">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <meta name="viewport" content="width=device-width, initial-scale=1"><title>GBTestSite โ€“ Just another WordPress site</title>
    #1525108
    Maarten

    Ah, well that is still high enough so the bots will see it as fast and soon as possible.

    But after so many years I still have no idea what to do with rel=profile, I can only really remove the link using preg_replace but I removed it again (turned my function off) as this function does effect my load times.

    I think we should just have title as high in head as possible and UTF-8 should of course be before it and charset below that if possible, as it makes sense HTML5 wise to have it set the UTF encoding and chars and than do the rest of the processing.

    Again it just makes this more logical but I have no proof that it has effect in rankings or load times as I have no idea about it. But yeah I like structure in my work a lot so maybe that’s why I like to see it that way when reading the source code.

    But I will try this function if it does not slow down my pages and still need to find a reason why profile link is still in WordPress after so many years.

    Thanks again David.

    #1525147
    David
    Staff
    Customer Support
    #1530315
    Maarten

    Hi David,

    Thanks again for your code, I have put it in my functions file and I did not even need to copy over the header.php as it puts viewport ineed at the top! I love that.
    But I have 1 more thing. I have the output like this now:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<link rel="profile" href="https://gmpg.org/xfn/11">
    	<meta name="viewport" content="width=device-width, initial-scale=1"><title>Your Site Title</title>
    <meta name='robots' content='noindex,nofollow' />
    <link rel='dns-prefetch' href='//s.w.org' />
    <link rel="alternate" type="application/rss+xml" title="Your Site Title &raquo; Feed" href="http://localtest.site/feed/" />
    <link rel="alternate" type="application/rss+xml" title="Your Site Title &raquo; Reactionfeed" href="http://localtest.site/comments/feed/" />

    Looks very good and I think it does not effect my pageload using your code, still need to test with lighthouse and test Web Vitals, but looks great.

    However would there be a possibility to get <title>Your Site Title</title> on a new line below viewport?
    Can I add a < br / > to the code or would this be hard to get.

    Thanks again for the code.

    #1530323
    Maarten

    To follow-up:

    I think this does not work.

    Here is the output:

    Properly defines charset Error!

    A character encoding declaration is required. It can be done with a <meta> tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more.

    So, yeah I have to wait if Tom likes to move the viewport up in the head some day or if not I have to leave it and hope my app works best without it.

    But maybe he will consider it and that would be great.

    Regards.

    #1531779
    Maarten

    Hi David,

    Is does not seem to work with the code you gave me. It does put the tag in the beginning of the head block but all tests for this tag seem to fail.

    Could you tell me if it is still ok to use a personal child theme even in 2020 if I do have more than 20 functions that are theme specific for GeneratePress and some little CSS.

    (when it comes to speed)

    I do understand that if I just add some CSS it would be overkill to use a child theme but I do have some functions e.g. have my footer point to auto created legal pages on install.

    And my CSS is needed as GP Premium still does not have a option to have hyperlinks in text be underlined. This I need as it improves my conversion rate by more than 30% than without this blue underlined hyperlinks.

    But for viewport I think we should not mess with it without making a copy of header.php in the child theme as this does not seem to work out of the box until Tom moves this tag higher.

    Also without opening a new post about this.

    The latest version of GeneratePress in my case fails to do a Lighthouse test. It will say that the speed cannot be checked and also the default color scheme LH tells me that the colors have negative contrast by default.

    I know we can all change this but this is out-of-box experience.

    I will test it again later this day to make sure what I say is correct of course.

    Anyway, thanks for the support

    #1532993
    David
    Staff
    Customer Support

    I am not sure why moving the viewport meta using that function would cause any issues, it works fine on my clean install dev site – maybe there was good reason for it to be where its place ๐Ÿ™‚

    No issues if you want to use a Child Theme.

    Is there a separate topic regarding the lighthouse issues ?

    #1533872
    Maarten

    Maybe I still need to move header.php into my child theme and then use the function. I cannot test it as I am not able to use my machine at this time but I will test it as soon as possible when my system is ready for that again.

    The issue with GP and Lighthouse I did not make a new topic, I will test it again without any extra plugins and let you know soon.

    Best regards.

    #1534314
    David
    Staff
    Customer Support

    If you’re going to use the Child Theme, then I wouldn’t bother with the function, instead just change the meta order in the header.php template.

    #1534351
    Maarten

    Thanks David. yeah I will copy over the template, might be better for my solution and use-case.
    When I am back at home I will do an other test for this function and let you know if without having a copy of header.php in the child theme the function would give me a error.

    If that happend again I will let you know, same for the error in just using GP and doing a test (Will maybe make a new topic if that would be better for your team)

    Regards.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.