Webflow

Resolve “No thumbnail URL” error for background video in Webflow

no thumbnail url

To add a thumbnail for a background video in Advanced Elements in Webflow, you can use the following steps: No thumbnail URL

we give a steps for “no thumbnail url” in 2 minutes

  1. Create a new div block and position it over the background video.
  2. Add an image to the div block.
  3. Style the image to look like a thumbnail.
  4. Hide the div block so that the image can’t be seen.
  5. Once the publishing the site, go to Google Search Console >Indexing > Video pages and validate the fix. 

Background of “No thumbnail URL provided”

'No thumbnail URL provided'

We received an email from the Google Search Console team informing us that some of our videos are not being indexed due to a new reason:
no thumbnail URL provided”.

Impact: If our videos are not indexed, they will not be able to appear in Google search results. This can reduce traffic to our website and impact our SEO performance.

Here is a more detailed explanation of each step:

  1. To create a new div block, go to the Elements panel and click on the Div element. Then, drag and drop the div block onto the page.
  2. To position the div block over the background video, go to the Styles panel and set the Position property to Absolute. Then, set the Top, Left, Bottom, and Right properties to 0.
    resolving No thumbnail URL provided in webflow -  Div Block settings
  3. To add an image to the div block, go to the Elements panel and click on the Image element. Then, drag and drop the image element onto the div block.
    resolving No thumbnail URL provided in webflow -  add image
  4. OPTIONAL STEP: To style the image to look like a thumbnail, you can use the following CSS properties:
    • Width: Set the width of the image to be less than the width of the background video.
    • Height: Set the height of the image to be less than the height of the background video.
    • Object-fit: Set the object-fit property to Cover to ensure that the image fills the entire div block.
  5. Simply hide the Div Block
    resolving No thumbnail URL provided in webflow -  hide div block
  6. To validate the fix for the “No thumbnail URL provided” error in Google Search Console, follow these steps:
    1. Publish your changes to your site.
    2. Open the Google Search Console.
    3. Click on the Video Pages tab in Indexing.
    4. click on the reason ‘No thumbnail URL provided’ and validate the fix.

    If you have successfully added a thumbnail for your background video, you should see the thumbnail image listed in the Videos section.

    Note: It may take some time for Google to crawl and index your site, and for your thumbnail to start appearing in the search results. In our case, it took 3 days to validate the fix.

    No thumbnail URL provided Issue Resolved

    Additional tips: No thumbnail URL

    • You can use the Google Rich Results Test tool to test your structured data.
    • You can use the Google Search Console URL Inspection tool to inspect the URL of your page and see if Google can find and process your structured data.
    • You can use the Google Search Console Site Status report to see if Google has any errors with your site.

If you have successfully added a thumbnail for your background video, you should see the thumbnail image listed in the Videos section.

Reasons why Google has not passed it yet,
and how to fix it!

If you do not see your thumbnail in the Google Search Console or the search results, then there may be a problem with your thumbnail. You can try the following troubleshooting tips:

  • Make sure that you have added the thumbnail URL to the video element in Webflow.
  • Make sure that you have added a video sitemap to your site.
  • Make sure that you have used structured data to specify the thumbnail URL.
  • Make sure that your thumbnail image is at least 1200×630 pixels.
  • Use a high-quality image that is relevant to your video content.
  • Avoid using text or logos on your thumbnail image.
Spandana Andela
About author

Articles

Meet Spandana Andela, a remarkable individual who wears multiple hats with finesse. As an AI Copywriter and Engineer, she navigates the intersection of technology and storytelling, creating a unique fusion that captivates audiences. Beyond her professional pursuits, Spandana is also a passionate storyteller, weaving narratives that resonate on a personal level. What sets her apart is not only her expertise but also her role as a mother, adding depth and richness to her experiences. Dive into the world of Spandana Andela, where innovation, creativity, and the joys of motherhood converge in a truly inspiring journey.
Related posts
Webflow

Webflow vs Pinegrow: Choosing the Ideal Web Design Tool

What is a Pinegrow? What is a Webflow? When to Choose Webflow? When to Choose Pinegrow? Benefits of…
Read more
Webflow

Builder.io vs Webflow: Mastering the Code-Free Design

What is a Builder.io? What is a Webflow? When to Choose Builder.io? When to Choose Webflow? Benefits…
Read more
Webflow

Webflow vs Shopify: Your Ideal Platform for Ecommerce Battle

What is a Shopify? What is a Webflow? When to Choose Webflow? When to Choose Shopify? Benefits of…
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *