fix: 浏览器体验验收发现的两个问题
- 移动端 (<640px) header 横向溢出 84px:语言切换器在 sm 以下隐藏,三站溢出归零 - 工具详情页 meta description 过短(36ch):改为 tagline+description 组合截断 155ch
This commit is contained in:
@@ -105,7 +105,10 @@ export function ThemeHeader({
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
<LanguageSwitcher />
|
{/* 语言切换器:小屏隐藏(避免 375-420px 视口撑破 header) */}
|
||||||
|
<div className="hidden sm:block">
|
||||||
|
<LanguageSwitcher />
|
||||||
|
</div>
|
||||||
<ModeToggle />
|
<ModeToggle />
|
||||||
<UserMenu />
|
<UserMenu />
|
||||||
|
|
||||||
|
|||||||
@@ -130,11 +130,20 @@ export async function generateMetadata({ params }: ToolDetailPageProps) {
|
|||||||
const description =
|
const description =
|
||||||
locale === "zh" && tool.descriptionZh ? tool.descriptionZh : tool.descriptionEn;
|
locale === "zh" && tool.descriptionZh ? tool.descriptionZh : tool.descriptionEn;
|
||||||
|
|
||||||
|
// meta description:tagline + 描述组合并截断到 ~155ch(SEO 最佳实践)
|
||||||
|
const metaDescBase =
|
||||||
|
[tool.taglineEn, description, tool.descriptionEn]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(". ")
|
||||||
|
.replace(/\.\s*\./g, ".") || `${t("subtitle")} - ${name}`;
|
||||||
|
const metaDescription =
|
||||||
|
metaDescBase.length > 155 ? `${metaDescBase.slice(0, 152)}...` : metaDescBase;
|
||||||
|
|
||||||
return generatePageMetadata({
|
return generatePageMetadata({
|
||||||
locale,
|
locale,
|
||||||
path: `/tools/${slug}`,
|
path: `/tools/${slug}`,
|
||||||
title: `${name} - ${t("title")}`,
|
title: `${name} - ${t("title")}`,
|
||||||
description: tool.taglineEn || description || `${t("subtitle")} - ${name}`,
|
description: metaDescription,
|
||||||
ogImage: tool.coverImageUrl || tool.logoUrl || undefined,
|
ogImage: tool.coverImageUrl || tool.logoUrl || undefined,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user