Fixing Video outside the viewport page indexing error

What is Viewport?

                It's a term that is becoming increasingly familiar in modern web design, yet it is still a concept that needs to be understood. In this article, we will explore the definition and usage of the viewport in web design, how it can be used to create a better browsing experience, and its potential pitfalls.

Video Outside the Viewport issue

                The viewport is the web page area the user can see. It is the part of the page that the user interacts with – the part of the page that they can scroll through, the part of the page that they can click on, and the part of the page that displays information and images. All the elements of a website are laid out within the viewport. 

                In most web designs, the viewport is a fixed size, meaning the same amount of information is visible regardless of the device size. This means that if the user is viewing the website on a small device, such as a mobile phone, then the same amount of content will be visible as if they were viewing the website on a larger device, such as a laptop or desktop computer. This can lead to an unsatisfactory browsing experience, as the website may need to be optimized for the user’s device size.

               To ensure that the user can view the website in its entirety regardless of the device size, the viewport can be set to scale to the device size. This allows the website to be responsive, so the entire website can be viewed regardless of the device's size.

Video indexing specific issues-Google

               Google Search Console has upgraded its indexing report to provide more specific actions and explanations concerning any issues related to videos not appearing in the Google search results. This new report version identifies three reasons for the "Google could not determine the prominent video on the page" error. With this improvement, Google hopes to enhance users' understanding and troubleshooting capabilities.

            Google added these three new reasons for Indexing specific issues:

            Video outside the viewport: Reposition the video on the page so that the entire video is inside the renderable area of the page and can be seen when the page loads.

Video Outside the Viewport indexing error
            Video too small: Increase the height of the video so that it’s larger than 140px or the width of the video so that it’s larger than 140px and at least a third of the page’s width.

              Video too tall: Decrease the height of the video so that it’s smaller than 1080px.

Establishing the Viewport:

            The viewport is pivotal in web design, as it sets the size and scale of a webpage's content. Adjusting the viewport allows users to effectively access website content across various devices, such as desktop/laptops, tabs and mobile phones. To ensure an optimal viewing experience, set the appropriate width, height, initial-scale parameters. This will create a sturdier framework for presenting your content on any device.

            A standard mobile-friendly website typically includes the following syntax:

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

            Note: The meta tag should be added in the <head tag> in HTML document.

            This provides browsers with directives regarding managing the page's dimensions and scaling. The width=device-width command sets the page's width to follow that of the device's width (which varies depending on the device). The initial-scale=1.0 orders set the initial zoom level when the browser loads the page. This is a familiar viewport setting that is utilized by many mobile-friendly websites.

            Note: You can see the Video Tutorial on Fixing Video page indexing error in Google Search Console 2024 here.

            To add this meta tag to your Blogger theme, first navigate to the 'Theme' section of the Blogger Dashboard. 

            Click on the right triangle icon under Customize to open a list of options. Before making any changes, it is advisable to download a “backup” of your current theme in case anything goes wrong during the editing process.

            Once you have a back-up saved, click on 'Edit HTML' and search for the <head> tag. 

click edit HTML


            Paste the following syntax just below <head> tag: 

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

            After pasting this code in the correct spot, be sure to click 'Save'. This will ensure that your meta tag is properly added.

Enhance your blog post with Schema by following these simple steps:

            Step 1: After conducting a Rich Results Test for my blog post.

Check Video Schema in Rich  Results Test



             I have noticed that only two valid items were detected and that a video schema was not present. 

            Step 2: Begin your journey to optimized video content by navigating to the Video Schema website.

            Step 3: Copy and paste the URL of your video into the designated space, then proceed to generate its Schema. 

Video Schema in Micro data
            Copy the micro-data from the generated code and paste it into the HTML version of your blog post. 
            
            Step 4: After saving, publish your post and check for Video Schema in Google's Rich Results test.

            Step 5: After conducting a Rich Results Test for my blog post.

Video Schema added to my blog post


            It appears that three valid items were detected and that a video schema is present.

            The presence of video schema also adds another layer to your content as users are more likely to engage with video than text-only posts. As such, incorporating relevant multimedia into your content can help increase user engagement and improve SEO ranking.

            Step 6: Enhance your visibility with optimized videos that adhere to web standards.


In order to address this page indexing error, please take the following steps:

            1. Navigate to Google Search Console.

            2. Go to the “Video Pages” section and click on the “Validate Fix” button. 

click Validate fix to start validation

            3. Please allow some time for Google's crawling process in order for the modified web pages to be indexed successfully.

            4. Once complete, review your results in the “Index Coverage” report in Search Console and verify whether or not your issue has been resolved.

            In summary, by following the outlined steps, one can swiftly resolve this issue in Google Search Console.

 





Post a Comment

0 Comments