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