Osclass 默认模板常因响应式结构重复渲染 H1 标签（如为桌面和移动端分别输出 ），导致 SEO 报错“More Than One H1 Tag”。本文提供安全、语义合规的单 H1 解决方案，兼顾可访问性与搜索引擎友好性。
osclass 默认模板常因响应式结构重复渲染 h1 标签（如为桌面和移动端分别输出 `
`），导致 seo 报错“more than one h1 tag”。本文提供安全、语义合规的单 h1 解决方案，兼顾可访问性与搜索引擎友好性。
在 Osclass 主题开发中，为适配不同设备而对同一内容（如商品标题）分别编写桌面端（.isDesktop / .isTablet）和移动端（.isMobile）两套 HTML 结构，是一种常见但易被忽视的 SEO 风险实践——尤其当两者均包含 <h1></h1> 标签时，将直接违反 HTML5 语义规范与搜索引擎最佳实践（W3C 明确建议每页仅含一个主标题 <h1></h1>）。
您当前采用的修复方式——移除独立的移动端 <h1></h1> 块，统一使用单一 <h1></h1> 容器并移除设备类名限定——是完全正确且推荐的做法。修改后的代码如下：
<div class="basic">
<h1>
<?php if (del_check_category_price(osc_item_category_id())) { ?>
<div class="price mbCl3 p-<?php echo osc_item_price(); ?>x<?php if (osc_item_price() <= 0) { ?> isstring<?php } ?>">
<?php echo osc_item_formated_price(); ?>
</div>
<?php } ?>
<?php echo osc_item_title(); ?>
</h1>
<?php if ($make_offer_enabled) { ?>
<a href="#"
id="mk-offer"
class="make-offer-link"
data-item-id="<?php echo osc_item_id(); ?>"
data-item-currency="<?php echo osc_item_currency(); ?>"
data-ajax-url="<?php echo mo_ajax_url(); ?>&moAjaxOffer=1&itemId=<?php echo osc_item_id(); ?>">
<?php _e('Submit your offer', 'delta'); ?>
</a>
<?php } ?>
</div>✅ 该方案的优势：
-
语义清晰：全设备共用唯一
<h1></h1>，符合 HTML5 规范与 SEO 要求； -
响应式无损：通过 CSS 媒体查询（如
@media (max-width: 767px)）控制.basic h1的字体大小、行高、内边距等样式，即可实现视觉上的移动端适配，无需重复 DOM； - 可访问性增强：屏幕阅读器仅播报一次主标题，避免混淆；
- 维护成本低：逻辑集中，后续修改标题结构或价格展示逻辑只需调整一处。
⚠️ 注意事项：
- 务必同步检查 CSS 中是否仍存在针对
.isMobile h1或.isDesktop h1的强覆盖样式，若有，请迁移至.basic h1并通过媒体查询精细化控制； - 若主题中其他页面（如首页、分类页）也存在类似多 H1 问题，需按相同原则全局排查；
- 使用 WAVE 或 Chrome DevTools 的 Lighthouse 工具重新审计，确认“Heading levels”项显示为 ✅ “Only one h1 element found”。
总结：SEO 友好的页面结构始于语义化 HTML。放弃“为设备写两套标题”的旧思路，拥抱“一套语义结构 + CSS 响应式控制”的现代实践，不仅能解决 H1 冗余问题，更能提升代码健壮性与长期可维护性。
