vkicm

Site URL: https://www.indianclassicalmusic.com

There are certain words that the search bar finds and shows the page it is on. But it cannot find certain pages at all. How  can I style my content in such a way that the search bar will find words and the pages containing them? I've noticed it doesn't find H3 headings.

Site URL: https://www.indianclassicalmusic.com/glossary

I have a glossary page on our website that has around hundred words on it. Each word is an html of the form

<h4 id="TheWord">The Word
    <a href="javascript:sayGlossaryTerm('theword')">
        <i class="fas fa-volume-up"></i> <!-- this is a font awesome speaker icon. The href javascript gets the audio element by id and calls .play() on it. The js function is in the page header settings. -->
    </a>
</h4>
<audio id="theword">
    <source src="/s/TheWord.m4a" > <!-- this file is uploaded in square space link editor. -->
</audio>
<p>The meaning of The Word.</p>

For a long html page should I be creating a single html block for all the content on the page, in this case the above html a hundred times or should I be creating an independent html code block for each word?

Another side effect of this editing this html is that whenever I edit the audio file name. There's some trigger on the keypress that loads all the 100 audio files (They are all short 2 second files) and gives a 429 error. 

Please advise. Thanks.