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

[Mavi90]

Hi,

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

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

I have on the top of my in my theme.liquid. When inspecting my site, I see that the is actually in the . I’ve also realized that there is a before my . How do I fix this?

Is running before my because I have in my ?

website: https://feedmomandme.com/

[NexaStudio]

The issue you’re encountering with the tag being placed in the instead of the 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:

1. Move to the Correct Location:

2. • In your theme.liquid or wherever your main HTML structure is defined, ensure that the tag is placed within the section. The viewport meta tag needs to be in the to properly control the viewport settings.

3. 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.

4. Evaluate Script Placement:

   • Examine the script that is placed before your to see if it’s necessary to load it at that location. Generally, scripts are placed in the to ensure they are loaded before the rest of the page content.

5. Preconnect, DNS-prefetch, or Preload:

   • The use of , , or in the should not directly affect the placement of the tag. These tags are commonly used to optimize resource loading but shouldn’t interfere with the placement of other essential tags.

6. 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.

7. 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.

8. 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.

[PageFly-Oliver]

Hi @Mavi90 ,

You can try adding my code below 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