Alternative Hashbang ?

Bonjour,

J'ai actuellement une page HTML qui utilise ce type de codes :

 <ul class="header-main-menu" id="header-main-menu">
                            <li><a class="active" href="#accueil"><i class="fas fa-home"></i> Accueil</a></li>
                            <li><a href="#contact"><i class="fas fa-user"></i>Contact</a></li>
                        </ul> 

                    <section id="accueil" class="sub-page start-page"> </section>
                    <section id="contact" class="sub-page"> </section>

Sur la page, j'ai un menu (ici composé de "accueil" et "contact"). Lorsque je clique sur "contact" toute la section "accueil" disparait et inversement.

Mon problème est le suivant : google ne référence pas ma page car il n'aime plus les #. Par conséquent il ne prend en compte que ma page d'accueil.

J'ai créé mon site sans savoir ça, et mtn je me retrouve bien embêté.

Je cherche depuis quelques jours activement comment remédier à ce problème en passant par d'autres formules mais je n'y arrive pas.
Notamment avec "history.pushState" par exemple.

Auriez-vous une solution pour moi ? Ou le lien d'un tutoriel adéquat pour un débutant ?
Je souhaite garder ce système de "single page", je le trouve très intuitif et réactif.

J'ai commencé le développement Web par le "code" depuis vraiment très peu de temps.

Merci d'avance pour vos réponses et votre indulgence.

Maxime