mmenu.js v9.3.0首个面板标题无href属性引发SEO审计问题求助

问题说明 #

使用mmenu.js v9.3.0搭建移动端菜单时，.mm-panels容器内首个.mm-panel下的.mm-navbar__title是不带href属性的<a>标签，触发了SEO审计工具的告警：

搜索引擎偏好带有href属性的a标签链接，请确保页面上所有链接均符合此格式。

对应的生成代码片段：

<div class="mm-panels">
    <div class="mm-panel mm-panel--noanimation mm-panel--opened" id="menu-mobile-menu">
        <div class="mm-navbar">
            <a class="mm-navbar__title" tabindex="-1" aria-hidden="true"><span class="">Menu</span></a> <!-- 此处无href属性 -->
        </div>
        <ul class="nav-menu mm-listview"></ul>
    </div>
</div>

可行解决方案 #

1. 手动添加空href（快速生效） #

直接给该<a>标签加上href="#"，保留原有属性即可，既能满足SEO工具检测要求，又不影响mmenu原有功能：

<a class="mm-navbar__title" href="#" tabindex="-1" aria-hidden="true"><span class="">Menu</span></a>

如果担心点击后页面跳转到顶部，可额外添加点击事件阻止默认行为：

document.querySelector('.mm-navbar__title').addEventListener('click', (e) => e.preventDefault());

2. 通过mmenu配置生成带href的标签（根源解决） #

初始化mmenu时，配置navbar.title.link参数，让插件自动给导航标题添加href属性：

document.querySelector('#menu-mobile-menu').mmenu({
    navbar: {
        title: {
            link: '#'
        }
    }
});

这样插件生成的.mm-navbar__title标签会自带href="#"，无需手动修改DOM。

3. 替换为非链接标签（无交互需求时用） #

如果该导航标题不需要任何点击交互，可将<a>标签替换为<span>，但要保留原有的类名和属性，避免破坏mmenu样式：

<span class="mm-navbar__title" tabindex="-1" aria-hidden="true"><span class="">Menu</span></span>

注意：这种方式需测试是否会影响移动端菜单交互（如手势返回），确认无问题后再使用。

内容的提问来源于stack exchange，提问作者tractanz