NO <Meta Name="Viewport">, Google Lighthouse Error

Mavi90 · ‎01-19-2024

Hi,

I've been trying to optimize my site and came across the following error according to google lighthouse:

Does not have a <meta name="viewport"> tag with width or initial-scale No `<meta name="viewport">` tag found

I have <meta> on the top of my <head> in my theme.liquid. When inspecting my site, I see that the <meta> is actually in the <body>. I've also realized that there is a <script> before my <head>. How do I fix this?

Is <script> running before my <head> because I have <link rel="preconnect, dns-prefetch, or preload"> in my <head>?

website: https://feedmomandme.com/

NexaStudio · ‎01-20-2024

The issue you're encountering with the <meta name="viewport"> tag being placed in the <body> instead of the <head> could be related to how your theme is structured and how the scripts are loaded.

Here are steps to troubleshoot and potentially fix the issue:

Move <meta name="viewport"> to the Correct Location:
- In your theme.liquid or wherever your main HTML structure is defined, ensure that the <meta name="viewport"> tag is placed within the <head> section. The viewport meta tag needs to be in the <head> to properly control the viewport settings.
Check Theme Files:
- Inspect your theme files, especially the theme.liquid file, to confirm that there are no unusual placements of scripts or meta tags.
Evaluate Script Placement:
- Examine the script that is placed before your <head> to see if it's necessary to load it at that location. Generally, scripts are placed in the <head> to ensure they are loaded before the rest of the page content.
Preconnect, DNS-prefetch, or Preload:
- The use of <link rel="preconnect">, <link rel="dns-prefetch">, or <link rel="preload"> in the <head> should not directly affect the placement of the <meta name="viewport"> tag. These tags are commonly used to optimize resource loading but shouldn't interfere with the placement of other essential tags.
Check for Theme or App Scripts:
- Some themes or third-party apps may include scripts that can impact the order of elements in the HTML. If you have recently added or updated any apps, consider reviewing their documentation or support resources to ensure they are not causing the issue.
Inspect Browser Console:
- Open your browser's developer tools and check the console for any errors or warnings. This can provide additional information about potential issues with script execution or HTML structure.
Testing:
- After making changes, run your site through Google Lighthouse again to verify if the issue has been resolved.

Remember to make changes in a controlled environment or during low-traffic periods to avoid any disruptions to your live site. If you're unsure about specific modifications, consider reaching out to your theme developer or Shopify support for assistance.

Without direct access to your site's code, it's challenging to provide a precise solution, but these steps should guide you in troubleshooting and fixing the issue.

Nexa Studio

PageFly-Oliver · ‎01-20-2024

Hi @Mavi90 ,

You can try adding my code below <head> element

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

NO <Meta Name="Viewport">, Google Lighthouse Error

NO <Meta Name="Viewport">, Google Lighthouse Error

Community Blog Articles