Search code examples
htmlgoogle-assistant

Why can't Google Assistant read some pages aloud?


I hope it's the right channel to ask this question. I've searched a lot unsuccessfully.

I've noticed that Google Assistant is sometimes unable to read some web pages. Here is a basic one that fails:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="Description" CONTENT="Sample for Google assistant">
    <title>Sample for Google assistant</title>
  </head>
<body>
    <h1>A title</h1>
<p>
    Here is an text sample.
</p>
</body>
</html>

Do you know which criteria should be met for Google Assistant to be able to read a page? Is it related to the structure of the page, the domain name or something else?

Many thanks in advance!

Best, Pat


Solution

  • I'm glad someone finally asked.

    The page must have at least 2 paragraphs and the first paragraph must be at least 270 chars long it seems. I just did rigorous testing and discovered this.

    the below will work

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="Description" CONTENT="Sample for Google assistant">
        <title>Sample for Google assistant</title>
    </head>
    
    <body>
        <h1>A title</h1>
        <p>
        Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.
        </p>
        <p>
            Here is an text sample.
        </p>
    
    </body>
    
    </html>
    

    In addition even though you didn't ask this: Google assist also seems to not be able to read content that is more than 4 divs deep. For example I had to comment out the below divs to get my own webpage to work, not exactly sure why but i assume its the div depth.

    <html lang="en">
       <body class="bg-light">
          <div class=" ">
             <div class="content">
                <div class="container container-small bg-white Pa_50px rounded my-2">
                   <div style="" class="row">
                      <!-- <div style="" class="Wi_100Per   BoSi_BoBo"> -->
                         <!-- <div style="vertical-align:top;" class="Wi_100Per    d-inline-block"> -->
                            <!-- <div class="p-2"> -->
                              <!-- <pre style="white-space: pre-wrap;"> -->
                                <p>
                                  Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.Here is an text sample.
                                </p>
                                <p>
                                  Here is an text sample.
                                </p>
                              <!-- </pre> -->
                            <!-- </div> -->
                         <!-- </div> -->
                      <!-- </div> -->
                   </div>
                </div>
             </div>
          </div>
       </body>
    </html>
    

    Footnote: of course make sure you're using Chrome to start with. Also I acknowledge that you experienced that you only need one paragraph.