diff --git a/docs/GLOSSARY.md b/docs/GLOSSARY.md
index 0bb21d7c..a99ba409 100644
--- a/docs/GLOSSARY.md
+++ b/docs/GLOSSARY.md
@@ -82,6 +82,8 @@ impact_score = priority_weight + (gsc_clicks × 10) + (ga4_sessions × 5)
 
 Priority weights: Critical = 1000, High = 100, Medium = 10, Low = 1.
 
+**UI hints:** Metric explanations in the app (circled **?** tooltips on KPIs, table headers, and chart titles) are sourced from `web/src/strings.json` under `metricHelp`. Shared keys live in `metricHelp.shared.*` (e.g. `metricHelp.shared.impactScore`); view-specific keys under `metricHelp.views.{viewId}.*`. Keep glossary definitions and `metricHelp` copy aligned when changing formulas or data sources.
+
 ---
 
 ## Provenance badges
diff --git a/web/src/components/ChartCard.tsx b/web/src/components/ChartCard.tsx
new file mode 100644
index 00000000..9b25c131
--- /dev/null
+++ b/web/src/components/ChartCard.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import HelpHint, { normalizeHintContent, type HelpHintContent } from './HelpHint';
+
+export interface ChartCardProps {
+  title: string;
+  hint?: HelpHintContent;
+  ariaLabel?: string;
+  heightClass?: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export default function ChartCard({
+  title,
+  hint,
+  ariaLabel,
+  heightClass = 'h-56',
+  children,
+  className = '',
+}: ChartCardProps) {
+  const hintContent = normalizeHintContent(hint);
+
+  return (
+    <div className={`bg-brand-800 border border-default rounded-xl p-4 ${className}`.trim()}>
+      <div className="flex items-start gap-1.5 mb-1">
+        <h3 className="text-sm font-bold text-foreground min-w-0">{title}</h3>
+        {hintContent ? (
+          <HelpHint title={hintContent.title} ariaLabel={`About ${title}`}>
+            {hintContent.body}
+          </HelpHint>
+        ) : null}
+      </div>
+      <div className={heightClass} role="img" aria-label={ariaLabel}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/HelpHint.tsx b/web/src/components/HelpHint.tsx
new file mode 100644
index 00000000..bb20c2a8
--- /dev/null
+++ b/web/src/components/HelpHint.tsx
@@ -0,0 +1,238 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { CircleHelp } from 'lucide-react';
+import { metricHelpHint } from '@/lib/metricHelp';
+
+const VIEWPORT_PAD = 8;
+const GAP = 8;
+const TOOLTIP_Z = 9999;
+
+export interface HelpHintProps {
+  title?: string;
+  children: ReactNode;
+  side?: 'top' | 'bottom';
+  className?: string;
+  /** Accessible label for the trigger button. Defaults to "More information". */
+  ariaLabel?: string;
+}
+
+type TooltipCoords = { top: number; left: number };
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export default function HelpHint({
+  title,
+  children,
+  side = 'top',
+  className = '',
+  ariaLabel = 'More information',
+}: HelpHintProps) {
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<TooltipCoords | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const id = useId();
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setCoords(null);
+  }, []);
+
+  const updatePosition = useCallback(() => {
+    const trigger = buttonRef.current;
+    const tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const maxLeft = vw - tooltipRect.width - VIEWPORT_PAD;
+    const maxTop = vh - tooltipRect.height - VIEWPORT_PAD;
+
+    let top =
+      side === 'top'
+        ? triggerRect.top - tooltipRect.height - GAP
+        : triggerRect.bottom + GAP;
+
+    // Flip vertically when clipped
+    if (top < VIEWPORT_PAD) {
+      top = triggerRect.bottom + GAP;
+    }
+    if (top > maxTop) {
+      top = triggerRect.top - tooltipRect.height - GAP;
+    }
+    top = clamp(top, VIEWPORT_PAD, Math.max(VIEWPORT_PAD, maxTop));
+
+    // Prefer centered on trigger, then clamp to viewport
+    let left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+    left = clamp(left, VIEWPORT_PAD, Math.max(VIEWPORT_PAD, maxLeft));
+
+    // Near right edge: align tooltip's right edge to trigger (keeps content readable)
+    if (triggerRect.right > vw - VIEWPORT_PAD - 48) {
+      left = triggerRect.right - tooltipRect.width;
+      left = clamp(left, VIEWPORT_PAD, Math.max(VIEWPORT_PAD, maxLeft));
+    }
+
+    // Near left edge: align tooltip's left edge to trigger
+    if (triggerRect.left < VIEWPORT_PAD + 48) {
+      left = triggerRect.left;
+      left = clamp(left, VIEWPORT_PAD, Math.max(VIEWPORT_PAD, maxLeft));
+    }
+
+    setCoords({ top, left });
+  }, [side]);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePosition();
+    const raf = requestAnimationFrame(updatePosition);
+    return () => cancelAnimationFrame(raf);
+  }, [open, updatePosition, title, children]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [open, close]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) close();
+    };
+    const onReposition = () => updatePosition();
+    document.addEventListener('pointerdown', onPointerDown);
+    window.addEventListener('resize', onReposition);
+    window.addEventListener('scroll', onReposition, true);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      window.removeEventListener('resize', onReposition);
+      window.removeEventListener('scroll', onReposition, true);
+    };
+  }, [open, close, updatePosition]);
+
+  const tooltipStyle: CSSProperties = coords
+    ? { position: 'fixed', top: coords.top, left: coords.left, zIndex: TOOLTIP_Z }
+    : { position: 'fixed', top: -9999, left: -9999, zIndex: TOOLTIP_Z, visibility: 'hidden' as const };
+
+  const tooltip = open ? (
+    <div
+      id={id}
+      ref={tooltipRef}
+      role="tooltip"
+      style={tooltipStyle}
+      className="w-72 max-w-[min(18rem,calc(100vw-1rem))] bg-brand-800 border border-default rounded-xl shadow-2xl p-3 pointer-events-none normal-case tracking-normal font-normal text-left"
+    >
+      {title ? <div className="font-semibold text-bright text-sm mb-1">{title}</div> : null}
+      <div className="text-xs text-muted-foreground leading-relaxed">{children}</div>
+    </div>
+  ) : null;
+
+  return (
+    <span ref={rootRef} className={`relative inline-flex items-center ${className}`.trim()}>
+      <button
+        ref={buttonRef}
+        type="button"
+        className="rounded-full p-0.5 text-muted-foreground hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 align-middle"
+        aria-expanded={open}
+        aria-describedby={open ? id : undefined}
+        aria-label={ariaLabel}
+        onClick={() => setOpen((v) => !v)}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        onBlur={(e) => {
+          if (!rootRef.current?.contains(e.relatedTarget as Node)) close();
+        }}
+      >
+        <CircleHelp className="h-3.5 w-3.5" aria-hidden />
+      </button>
+      {mounted && tooltip ? createPortal(tooltip, document.body) : null}
+    </span>
+  );
+}
+
+export type HelpHintContent = string | { title?: string; body: string };
+
+/** Normalize hint prop from string or structured object. */
+export function normalizeHintContent(hint: HelpHintContent | undefined): {
+  title?: string;
+  body: string;
+} | undefined {
+  if (hint == null) return undefined;
+  if (typeof hint === 'string') return { body: hint };
+  return { title: hint.title, body: hint.body };
+}
+
+/** Chart/card title with ? hint (replaces title + paragraph hint pattern). */
+export function ChartTitleWithHint({
+  title,
+  helpKey,
+  hint,
+  as = 'h3',
+  className = '',
+}: {
+  title: string;
+  helpKey?: string;
+  hint?: HelpHintContent;
+  as?: 'h2' | 'h3';
+  className?: string;
+}) {
+  const hintContent = normalizeHintContent(hint ?? (helpKey ? metricHelpHint(helpKey) : undefined));
+  const Tag = as;
+  return (
+    <div className={`flex items-start gap-1.5 mb-3 ${className}`.trim()}>
+      <Tag className="text-sm font-bold text-foreground min-w-0">{title}</Tag>
+      {hintContent ? (
+        <HelpHint title={hintContent.title} ariaLabel={`About ${title}`}>
+          {hintContent.body}
+        </HelpHint>
+      ) : null}
+    </div>
+  );
+}
+
+/** Label text plus ? from metricHelp dot path (e.g. `shared.clicks`). */
+export function LabelWithHint({
+  label,
+  helpKey,
+  className = '',
+}: {
+  label: ReactNode;
+  helpKey: string;
+  className?: string;
+}) {
+  const hintContent = normalizeHintContent(metricHelpHint(helpKey));
+  return (
+    <span className={`inline-flex items-center gap-1.5 ${className}`.trim()}>
+      {label}
+      {hintContent ? (
+        <HelpHint title={hintContent.title} ariaLabel={`About ${typeof label === 'string' ? label : 'metric'}`}>
+          {hintContent.body}
+        </HelpHint>
+      ) : null}
+    </span>
+  );
+}
diff --git a/web/src/components/SectionHeader.tsx b/web/src/components/SectionHeader.tsx
new file mode 100644
index 00000000..0776640d
--- /dev/null
+++ b/web/src/components/SectionHeader.tsx
@@ -0,0 +1,46 @@
+import type { LucideIcon } from 'lucide-react';
+import HelpHint, { normalizeHintContent, type HelpHintContent } from './HelpHint';
+import { metricHelpHint } from '@/lib/metricHelp';
+
+export interface SectionHeaderProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  hint?: HelpHintContent;
+  helpKey?: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export default function SectionHeader({
+  icon: Icon,
+  title,
+  description,
+  hint,
+  helpKey,
+  size = 'md',
+  className = '',
+}: SectionHeaderProps) {
+  const hintContent = normalizeHintContent(hint ?? (helpKey ? metricHelpHint(helpKey) : undefined));
+  const iconClass = size === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
+  const titleClass = size === 'sm' ? 'text-base' : 'text-lg';
+  const descClass = size === 'sm' ? 'text-xs' : 'text-sm';
+  const wrapClass = size === 'sm' ? 'pb-3 mb-1' : 'pb-4';
+
+  return (
+    <div className={`${wrapClass} ${className}`.trim()}>
+      <div className="flex items-center gap-2">
+        <Icon className={`${iconClass} text-link shrink-0`} aria-hidden />
+        <h2 className={`${titleClass} font-bold text-bright`}>{title}</h2>
+        {hintContent ? (
+          <HelpHint title={hintContent.title} ariaLabel={`About ${title}`}>
+            {hintContent.body}
+          </HelpHint>
+        ) : null}
+      </div>
+      {description ? (
+        <p className={`mt-1 ${descClass} text-muted-foreground leading-relaxed max-w-3xl`}>{description}</p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/StatCard.tsx b/web/src/components/StatCard.tsx
index d2abaab6..dfade8ff 100644
--- a/web/src/components/StatCard.tsx
+++ b/web/src/components/StatCard.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import HelpHint, { normalizeHintContent, type HelpHintContent } from './HelpHint';
 import Card from './Card';
 
 export interface StatCardProps {
@@ -6,6 +7,7 @@ export interface StatCardProps {
   value: ReactNode;
   sub?: ReactNode;
   icon?: ReactNode;
+  hint?: HelpHintContent;
   size?: 'md' | 'lg';
   className?: string;
   shadow?: boolean;
@@ -16,17 +18,24 @@ export default function StatCard({
   value,
   sub,
   icon,
+  hint,
   size = 'md',
   className = '',
   shadow = false,
 }: StatCardProps) {
   const valueClass = size === 'lg' ? 'text-3xl font-bold text-bright' : 'text-2xl font-bold text-bright tabular-nums';
+  const hintContent = normalizeHintContent(hint);
 
   return (
     <Card padding="tight" shadow={shadow} className={className}>
-      <p className="text-xs text-muted-foreground uppercase tracking-wider font-bold mb-1 flex items-center gap-2">
+      <p className="text-xs text-muted-foreground uppercase tracking-wider font-bold mb-1 flex items-center gap-1.5">
         {icon}
-        {label}
+        <span className="min-w-0">{label}</span>
+        {hintContent ? (
+          <HelpHint title={hintContent.title} className="normal-case tracking-normal font-normal">
+            {hintContent.body}
+          </HelpHint>
+        ) : null}
       </p>
       <p className={valueClass}>{value ?? '—'}</p>
       {sub ? <p className="text-xs text-muted-foreground mt-1">{sub}</p> : null}
diff --git a/web/src/components/Table.tsx b/web/src/components/Table.tsx
index 8c3f9ef3..ac2170c0 100644
--- a/web/src/components/Table.tsx
+++ b/web/src/components/Table.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import HelpHint, { normalizeHintContent, type HelpHintContent } from './HelpHint';
 
 interface TableProps {
   children?: ReactNode;
@@ -31,9 +32,32 @@ export const TableHead = ({ children, sticky = false }: TableHeadProps) => (
   </thead>
 );
 
-export const TableHeadCell = ({ children, className = '', title }: { children?: ReactNode; className?: string; title?: string }) => (
-  <th className={`px-4 py-3.5 whitespace-nowrap ${className}`.trim()} title={title}>{children}</th>
-);
+export const TableHeadCell = ({
+  children,
+  className = '',
+  title,
+  hint,
+}: {
+  children?: ReactNode;
+  className?: string;
+  /** @deprecated Use hint for metric explanations; reserve title for native browser tooltip on truncation. */
+  title?: string;
+  hint?: HelpHintContent;
+}) => {
+  const hintContent = normalizeHintContent(hint);
+  return (
+    <th className={`px-4 py-3.5 whitespace-nowrap ${className}`.trim()} title={title}>
+      <div className="inline-flex items-center gap-1 normal-case">
+        {children}
+        {hintContent ? (
+          <HelpHint title={hintContent.title} className="normal-case">
+            {hintContent.body}
+          </HelpHint>
+        ) : null}
+      </div>
+    </th>
+  );
+};
 
 interface TableBodyProps {
   children?: ReactNode;
diff --git a/web/src/components/backlinks/GscLinksSummaryCards.tsx b/web/src/components/backlinks/GscLinksSummaryCards.tsx
index 6476b6ef..3775aa50 100644
--- a/web/src/components/backlinks/GscLinksSummaryCards.tsx
+++ b/web/src/components/backlinks/GscLinksSummaryCards.tsx
@@ -1,4 +1,5 @@
 import SummaryCard from '@/components/google/SummaryCard';
+import { metricHelpHint } from '@/lib/metricHelp';
 import type { GscLinksReportData } from '@/types/report';
 import { summaryCounts } from './backlinksTableUtils';
 
@@ -16,10 +17,26 @@ export default function GscLinksSummaryCards({ data, labels }: GscLinksSummaryCa
   const counts = summaryCounts(data);
   return (
     <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
-      <SummaryCard label={labels.referringDomains} value={counts.referringDomains.toLocaleString()} />
-      <SummaryCard label={labels.linkedPages} value={counts.linkedPages.toLocaleString()} />
-      <SummaryCard label={labels.sampleLinks} value={counts.sampleLinks.toLocaleString()} />
-      <SummaryCard label={labels.latestLinks} value={counts.latestLinks.toLocaleString()} />
+      <SummaryCard
+        label={labels.referringDomains}
+        value={counts.referringDomains.toLocaleString()}
+        hint={metricHelpHint('shared.referringDomains')}
+      />
+      <SummaryCard
+        label={labels.linkedPages}
+        value={counts.linkedPages.toLocaleString()}
+        hint={metricHelpHint('views.backlinks.linkedPages')}
+      />
+      <SummaryCard
+        label={labels.sampleLinks}
+        value={counts.sampleLinks.toLocaleString()}
+        hint={metricHelpHint('shared.sampleLinks')}
+      />
+      <SummaryCard
+        label={labels.latestLinks}
+        value={counts.latestLinks.toLocaleString()}
+        hint={metricHelpHint('views.backlinks.latestLinks')}
+      />
     </div>
   );
 }
diff --git a/web/src/components/compare/CompareCharts.tsx b/web/src/components/compare/CompareCharts.tsx
index e968d34e..152e9335 100644
--- a/web/src/components/compare/CompareCharts.tsx
+++ b/web/src/components/compare/CompareCharts.tsx
@@ -31,6 +31,7 @@ import {
   getChartTitleColor,
   getChartLegendLabelColor,
 } from '@/utils/chartJsDefaults';
+import ChartCard from '@/components/ChartCard';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend);
 
@@ -39,26 +40,6 @@ const COLOR_CURRENT = '#3b82f6';
 
 type CompareChartStrings = (typeof import('@/lib/strings').strings)['views']['compare'];
 
-function ChartCard({
-  title,
-  hint,
-  children,
-}: {
-  title: string;
-  hint?: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className="bg-brand-800 border border-default rounded-xl p-4">
-      <h3 className="text-sm font-bold text-foreground mb-0.5">{title}</h3>
-      {hint ? <p className="text-xs text-muted-foreground mb-3">{hint}</p> : <div className="mb-3" />}
-      <div className="h-52 sm:h-56" role="img" aria-label={title}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
 function useChartOptions() {
   return useMemo(() => {
     const grid = getGridColor();
diff --git a/web/src/components/compare/CompareTabPanels.tsx b/web/src/components/compare/CompareTabPanels.tsx
index f1b1ce09..1a1eff12 100644
--- a/web/src/components/compare/CompareTabPanels.tsx
+++ b/web/src/components/compare/CompareTabPanels.tsx
@@ -14,6 +14,7 @@ const ComparePerformanceCharts = dynamic(
 import type { IssueDeltaRow } from '@/lib/reportCompareExtras';
 import { ScoreDelta } from '@/components/charts/ScoreDelta';
 import type { CompareMetricRow, ReportCompareSummary } from '@/lib/reportCompare';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, Badge } from '@/components';
 import { CompareMetricCard } from './CompareDeltaBadge';
 import AiSuggestionButton from '@/components/ai/AiSuggestionButton';
@@ -296,8 +297,8 @@ export function ComparePerformancePanel({
                 <TableHeadCell>URL</TableHeadCell>
                 <TableHeadCell>Perf Δ</TableHeadCell>
                 <TableHeadCell>SEO Δ</TableHeadCell>
-                <TableHeadCell>{vc.colCurrent}</TableHeadCell>
-                <TableHeadCell>{vc.colBaseline}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.compare.currentValue')}>{vc.colCurrent}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.compare.baselineValue')}>{vc.colBaseline}</TableHeadCell>
               </TableRow>
             </TableHead>
             <TableBody striped>
@@ -383,8 +384,8 @@ export function CompareContentPanel({ compare, searchQuery, vc, emptyLabel }: Pa
               <TableRow>
                 <TableHeadCell>{vc.colKind}</TableHeadCell>
                 <TableHeadCell>Representative URL</TableHeadCell>
-                <TableHeadCell>{vc.colCurrent}</TableHeadCell>
-                <TableHeadCell>{vc.colBaseline}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.compare.currentValue')}>{vc.colCurrent}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.compare.baselineValue')}>{vc.colBaseline}</TableHeadCell>
               </TableRow>
             </TableHead>
             <TableBody striped>
@@ -453,9 +454,9 @@ export function CompareLinksPanel({ compare, searchQuery, vc, emptyLabel }: Pane
           <TableRow>
             <TableHeadCell>URL</TableHeadCell>
             <TableHeadCell>{vc.colMetric}</TableHeadCell>
-            <TableHeadCell>{vc.colBaseline}</TableHeadCell>
-            <TableHeadCell>{vc.colCurrent}</TableHeadCell>
-            <TableHeadCell>Δ</TableHeadCell>
+            <TableHeadCell hint={metricHelpHint('views.compare.baselineValue')}>{vc.colBaseline}</TableHeadCell>
+            <TableHeadCell hint={metricHelpHint('views.compare.currentValue')}>{vc.colCurrent}</TableHeadCell>
+            <TableHeadCell hint={metricHelpHint('views.compare.metricDelta')}>Δ</TableHeadCell>
           </TableRow>
         </TableHead>
         <TableBody striped>
diff --git a/web/src/components/google/GoogleChartCard.tsx b/web/src/components/google/GoogleChartCard.tsx
index 22578ff8..d331472f 100644
--- a/web/src/components/google/GoogleChartCard.tsx
+++ b/web/src/components/google/GoogleChartCard.tsx
@@ -1,21 +1,9 @@
 'use client';
 
+import ChartCard from '@/components/ChartCard';
 import type { GoogleChartCardProps } from '@/types/components';
 
-export default function GoogleChartCard({
-  title,
-  hint,
-  ariaLabel,
-  heightClass = 'h-56',
-  children,
-}: GoogleChartCardProps) {
-  return (
-    <div className="bg-brand-800 border border-default rounded-xl p-4">
-      <h3 className="text-sm font-bold text-foreground mb-1">{title}</h3>
-      {hint && <p className="text-xs text-muted-foreground mb-3">{hint}</p>}
-      <div className={heightClass} role="img" aria-label={ariaLabel}>
-        {children}
-      </div>
-    </div>
-  );
+/** Google chart wrapper — uses shared ChartCard with ? hint popover. */
+export default function GoogleChartCard(props: GoogleChartCardProps) {
+  return <ChartCard {...props} />;
 }
diff --git a/web/src/components/google/SortablePaginatedTable.tsx b/web/src/components/google/SortablePaginatedTable.tsx
index 68e271a8..5d269421 100644
--- a/web/src/components/google/SortablePaginatedTable.tsx
+++ b/web/src/components/google/SortablePaginatedTable.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useMemo, useEffect } from 'react';
 import { format } from '../../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
+import HelpHint, { normalizeHintContent } from '../HelpHint';
 import { Button } from '../index';
 import { PAGE_SIZE, paginateSlice } from './tableUtils';
 import type { PaginationLabels, TableColumn } from '@/types/components';
@@ -71,18 +73,40 @@ export default function SortablePaginatedTable({
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-default">
-              {columns.map((col) => (
+              {columns.map((col) => {
+                const hintContent = normalizeHintContent(
+                  col.hint == null
+                    ? undefined
+                    : typeof col.hint === 'string'
+                      ? metricHelpHint(col.hint)
+                      : col.hint,
+                );
+                return (
                 <th
                   key={col.key}
                   onClick={() => toggle(col.key)}
                   className="px-3 py-2 text-left text-xs font-bold text-muted-foreground uppercase tracking-wider cursor-pointer select-none hover:text-foreground whitespace-nowrap"
                 >
-                  {col.label}
+                  <span className="inline-flex items-center gap-1 normal-case">
+                    {col.label}
+                    {hintContent ? (
+                      <span
+                        className="inline-flex"
+                        onClick={(e) => e.stopPropagation()}
+                        onKeyDown={(e) => e.stopPropagation()}
+                      >
+                        <HelpHint title={hintContent.title} ariaLabel={`About ${col.label}`}>
+                          {hintContent.body}
+                        </HelpHint>
+                      </span>
+                    ) : null}
+                  </span>
                   {sortKey === col.key && (
                     <span className="ml-1">{sortDir === 'asc' ? '↑' : '↓'}</span>
                   )}
                 </th>
-              ))}
+              );
+              })}
             </tr>
           </thead>
           <tbody>
diff --git a/web/src/components/google/SummaryCard.tsx b/web/src/components/google/SummaryCard.tsx
index c1e87d0d..8fc6b9f6 100644
--- a/web/src/components/google/SummaryCard.tsx
+++ b/web/src/components/google/SummaryCard.tsx
@@ -1,15 +1,18 @@
 import type { ReactNode } from 'react';
 import StatCard from '../StatCard';
+import type { HelpHintContent } from '../HelpHint';
 
 /** @deprecated Use StatCard from @/components */
 export default function SummaryCard({
   label,
   value,
   sub,
+  hint,
 }: {
   label: ReactNode;
   value: ReactNode;
   sub?: ReactNode;
+  hint?: HelpHintContent;
 }) {
-  return <StatCard label={label} value={value} sub={sub} size="md" />;
+  return <StatCard label={label} value={value} sub={sub} hint={hint} size="md" />;
 }
diff --git a/web/src/components/index.ts b/web/src/components/index.ts
index d2f27cdb..ce1db9f0 100644
--- a/web/src/components/index.ts
+++ b/web/src/components/index.ts
@@ -5,6 +5,10 @@ export { default as Button } from './Button';
 export { default as Badge } from './Badge';
 export { default as AlertBanner } from './AlertBanner';
 export { default as StatCard } from './StatCard';
+export { default as HelpHint, normalizeHintContent, LabelWithHint, ChartTitleWithHint } from './HelpHint';
+export type { HelpHintProps, HelpHintContent } from './HelpHint';
+export { default as ChartCard } from './ChartCard';
+export { default as SectionHeader } from './SectionHeader';
 export { default as Select, SELECT_CLASS } from './Select';
 export { default as ViewTabs } from './ViewTabs';
 export type { ViewTabItem } from './ViewTabs';
diff --git a/web/src/components/issues/IssueTaskBoard.tsx b/web/src/components/issues/IssueTaskBoard.tsx
index 009ab323..871655d2 100644
--- a/web/src/components/issues/IssueTaskBoard.tsx
+++ b/web/src/components/issues/IssueTaskBoard.tsx
@@ -5,6 +5,7 @@ import { apiUrl } from '@/lib/publicBase';
 import { strings } from '@/lib/strings';
 import type { ReportIssue } from '@/types';
 import UrlInspectorButton from '@/components/UrlInspectorButton';
+import { LabelWithHint } from '@/components';
 import IssueAiFixButton from '@/components/issues/IssueAiFixButton';
 import { useReadOnlySession } from '@/hooks/useReadOnlySession';
 
@@ -107,7 +108,8 @@ export default function IssueTaskBoard({ propertyId, reportId, issues }: IssueTa
   return (
     <div className="space-y-3">
       <p className="text-xs text-muted-foreground">
-        {vi.taskBoardHint || 'Sorted by Search Console clicks to affected URLs when available.'}
+        {vi.taskBoardHint || 'Sorted by Search Console clicks to affected URLs when available.'}{' '}
+        <LabelWithHint label="Impact score" helpKey="shared.impactScore" />
       </p>
       {sorted.map((item, i) => {
         const msg = item.issue.message || '';
@@ -133,6 +135,12 @@ export default function IssueTaskBoard({ propertyId, reportId, issues }: IssueTa
                   GSC clicks: {item.clicks!.toLocaleString()}
                 </p>
               )}
+              {item.issue.impact_score != null && Number(item.issue.impact_score) > 0 ? (
+                <p className="text-xs text-muted-foreground mt-1 tabular-nums">
+                  <LabelWithHint label="Impact score" helpKey="shared.impactScore" />:{' '}
+                  <span className="font-semibold text-foreground">{Number(item.issue.impact_score).toLocaleString()}</span>
+                </p>
+              ) : null}
               {(item.issue.llm_recommendation || item.issue.recommendation) ? (
                 <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
                   {item.issue.llm_recommendation || item.issue.recommendation}
diff --git a/web/src/components/keywordsExplorer/KeywordExplorerChrome.tsx b/web/src/components/keywordsExplorer/KeywordExplorerChrome.tsx
index 6a4a101c..e5b485a5 100644
--- a/web/src/components/keywordsExplorer/KeywordExplorerChrome.tsx
+++ b/web/src/components/keywordsExplorer/KeywordExplorerChrome.tsx
@@ -18,7 +18,7 @@ import {
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { strings, format } from '../../lib/strings';
-import { Card } from '../index';
+import { Card, LabelWithHint } from '../index';
 import type { KeywordTabId } from './keywordTabMeta';
 
 interface KeywordExplorerChromeProps {
@@ -55,6 +55,7 @@ interface KpiDef {
   value: string;
   sub: string;
   accent: string;
+  helpKey: string;
 }
 
 function KeywordKpiTile({
@@ -93,7 +94,7 @@ function KeywordKpiTile({
         />
       </div>
       <p className="text-[10px] sm:text-xs text-muted-foreground uppercase tracking-wider font-bold leading-tight">
-        {def.label}
+        <LabelWithHint label={def.label} helpKey={def.helpKey} />
       </p>
       <p className="text-xl sm:text-2xl font-bold text-bright tabular-nums mt-0.5">{def.value}</p>
       <p className="text-[11px] sm:text-xs text-muted-foreground mt-1 line-clamp-2">{def.sub}</p>
@@ -129,6 +130,7 @@ export default function KeywordExplorerChrome({
       value: kpis.totalDisplay,
       sub: format(k.totalSub, { n: kpis.sourceCount }),
       accent: 'bg-blue-500/15 text-blue-400',
+      helpKey: 'views.keywordsExplorer.totalKeywords',
     },
     {
       key: 'gsc',
@@ -138,6 +140,7 @@ export default function KeywordExplorerChrome({
       value: kpis.gscCount.toLocaleString(),
       sub: k.gscSub,
       accent: 'bg-emerald-500/15 text-emerald-400',
+      helpKey: 'views.keywordsExplorer.gscKeywords',
     },
     {
       key: 'quickwins',
@@ -147,6 +150,7 @@ export default function KeywordExplorerChrome({
       value: kpis.quickWins.toLocaleString(),
       sub: k.quickWinsSub,
       accent: 'bg-amber-500/15 text-amber-400',
+      helpKey: 'views.keywordsExplorer.quickWins',
     },
     {
       key: 'cannib',
@@ -156,6 +160,7 @@ export default function KeywordExplorerChrome({
       value: kpis.cannib.toLocaleString(),
       sub: k.cannibSub,
       accent: 'bg-red-500/15 text-red-400',
+      helpKey: 'views.keywordsExplorer.cannibalisation',
     },
   ];
 
@@ -168,6 +173,7 @@ export default function KeywordExplorerChrome({
       value: kpis.lostClicks.toLocaleString(),
       sub: k.lostClicksSub,
       accent: 'bg-orange-500/15 text-orange-400',
+      helpKey: 'views.keywordsExplorer.lostClicks',
     },
     {
       key: 'questions',
@@ -177,6 +183,7 @@ export default function KeywordExplorerChrome({
       value: kpis.questions.toLocaleString(),
       sub: k.questionsSub,
       accent: 'bg-violet-500/15 text-violet-400',
+      helpKey: 'views.keywordsExplorer.questions',
     },
   ];
 
diff --git a/web/src/components/keywordsExplorer/KeywordTableColumns.tsx b/web/src/components/keywordsExplorer/KeywordTableColumns.tsx
index 1b9def52..8ce1d533 100644
--- a/web/src/components/keywordsExplorer/KeywordTableColumns.tsx
+++ b/web/src/components/keywordsExplorer/KeywordTableColumns.tsx
@@ -138,9 +138,10 @@ export function buildKeywordColumns(
     cols.push({
       key: 'serp_estimated_competition',
       label: ke.table.serpCompetition,
+      hint: 'views.keywords.serpCompetition',
       render: (v) =>
         v != null && typeof v === 'number' ? (
-          <span className="tabular-nums text-orange-700 dark:text-orange-300 font-semibold" title={ke.table.serpCompetitionHint}>
+          <span className="tabular-nums text-orange-700 dark:text-orange-300 font-semibold">
             {v}
           </span>
         ) : (
@@ -149,6 +150,21 @@ export function buildKeywordColumns(
     });
   }
 
+  const showOnSiteFreq = allRows.some((r) => r.on_site_frequency != null);
+  if (showOnSiteFreq) {
+    cols.push({
+      key: 'on_site_frequency',
+      label: ke.table.onSiteFrequency,
+      hint: 'shared.onSiteFrequency',
+      render: (v) =>
+        v != null && typeof v === 'number' ? (
+          <span className="tabular-nums">{Number(v).toLocaleString()}</span>
+        ) : (
+          '—'
+        ),
+    });
+  }
+
   cols.push(
     {
       key: 'difficulty',
@@ -163,6 +179,7 @@ export function buildKeywordColumns(
     {
       key: 'gsc_position',
       label: ke.table.position,
+      hint: 'views.keywords.gscPosition',
       render: (v, row) => {
         const r = row as KeywordRow | undefined;
         const kw = String(r?.keyword ?? '');
@@ -178,18 +195,21 @@ export function buildKeywordColumns(
     {
       key: 'gsc_impressions',
       label: ke.table.impressions,
+      hint: 'views.keywords.gscImpressions',
       render: (v) =>
         v != null ? <span className="tabular-nums">{Number(v).toLocaleString()}</span> : '—',
     },
     {
       key: 'gsc_clicks',
       label: ke.table.clicks,
+      hint: 'views.keywords.gscClicks',
       render: (v) =>
         v != null ? <span className="tabular-nums">{Number(v).toLocaleString()}</span> : '—',
     },
     {
       key: 'gsc_ctr',
       label: ke.table.ctr,
+      hint: 'views.keywords.gscCtr',
       render: (v) => <span className="tabular-nums">{formatGscCtr(v as number | null | undefined)}</span>,
     },
     {
diff --git a/web/src/components/lighthouse/ThresholdBar.tsx b/web/src/components/lighthouse/ThresholdBar.tsx
index d865a3b0..8e3c92a8 100644
--- a/web/src/components/lighthouse/ThresholdBar.tsx
+++ b/web/src/components/lighthouse/ThresholdBar.tsx
@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
+import HelpHint from '../HelpHint';
 import { METRIC_THRESHOLDS, metricStatus, formatMetric } from '../../utils/lighthouseUtils';
 
 export interface ThresholdBarProps {
@@ -8,9 +9,7 @@ export interface ThresholdBarProps {
 
 export default function ThresholdBar({ metricKey, value }: ThresholdBarProps) {
   const t = METRIC_THRESHOLDS[metricKey];
-  const [hovered, setHovered] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const barRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const id = setTimeout(() => setMounted(true), 50);
@@ -37,15 +36,16 @@ export default function ThresholdBar({ metricKey, value }: ThresholdBarProps) {
         : 'text-red-600 dark:text-red-400';
   const refVal = t.good * 1.5;
   const pct = Math.min(100, (v / refVal) * 100);
+  const hintBody = `${t.desc} Good: ≤${formatMetric(metricKey, t.good)}. Needs improvement: ≤${formatMetric(metricKey, t.warn)}.`;
 
   return (
-    <div
-      className="flex items-center gap-4 px-5 py-4 hover:bg-brand-800 transition-colors relative"
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      ref={barRef}
-    >
-      <span className="text-foreground text-sm w-44 shrink-0">{t.label}</span>
+    <div className="flex items-center gap-4 px-5 py-4 hover:bg-brand-800 transition-colors">
+      <span className="text-foreground text-sm w-44 shrink-0 inline-flex items-center gap-1">
+        {t.label}
+        <HelpHint title={t.label} ariaLabel={`About ${t.label}`}>
+          {hintBody}
+        </HelpHint>
+      </span>
       <div className="flex-1 flex items-center gap-3">
         <div className="flex-1 bg-track rounded-full h-2.5 overflow-hidden">
           <div
@@ -60,21 +60,6 @@ export default function ThresholdBar({ metricKey, value }: ThresholdBarProps) {
           {formatMetric(metricKey, v)}
         </span>
       </div>
-
-      {hovered && (
-        <div className="absolute left-0 bottom-full mb-2 ml-4 z-50 bg-brand-800 border border-default rounded-xl shadow-2xl p-3 w-72 pointer-events-none">
-          <div className="font-semibold text-bright text-sm mb-1">{t.label}</div>
-          <p className="text-xs text-muted-foreground mb-2">{t.desc}</p>
-          <div className="flex gap-4 text-xs">
-            <span><span className="text-muted-foreground">Value:</span> <span className={textColor}>{formatMetric(metricKey, v)}</span></span>
-            <span><span className="text-muted-foreground">Good:</span> <span className="text-green-700 dark:text-green-400">≤{formatMetric(metricKey, t.good)}</span></span>
-            <span><span className="text-muted-foreground">Warn:</span> <span className="text-yellow-800 dark:text-yellow-400">≤{formatMetric(metricKey, t.warn)}</span></span>
-          </div>
-          <div className={`mt-2 text-xs font-semibold ${textColor}`}>
-            {status === 'good' ? '✓ Good' : status === 'warn' ? '⚠ Needs improvement' : '✕ Poor'}
-          </div>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/web/src/components/links/InlinksMetricCell.tsx b/web/src/components/links/InlinksMetricCell.tsx
index 6244de6a..9fea4e4c 100644
--- a/web/src/components/links/InlinksMetricCell.tsx
+++ b/web/src/components/links/InlinksMetricCell.tsx
@@ -30,11 +30,6 @@ export default function InlinksMetricCell({
       ) : null}
       <span
         className={`order-1 sm:order-2 shrink-0 inline-flex items-center justify-end gap-1.5 text-sm tabular-nums ${inlinksTextClass(inl, maxInSection)}`}
-        title={
-          maxInSection > 0 && inl > 0
-            ? `${Math.round(pct)}% of the strongest inlinks count in this view (${maxInSection}).`
-            : undefined
-        }
       >
         {showIcon ? <Link2 className="h-3.5 w-3.5 shrink-0 opacity-70 hidden sm:inline" aria-hidden /> : null}
         {inl.toLocaleString()}
diff --git a/web/src/components/links/LinkAttributesCharts.tsx b/web/src/components/links/LinkAttributesCharts.tsx
index b6754d5d..67099bb9 100644
--- a/web/src/components/links/LinkAttributesCharts.tsx
+++ b/web/src/components/links/LinkAttributesCharts.tsx
@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import { Bar, Doughnut } from 'react-chartjs-2';
 import type { TooltipItem } from 'chart.js';
-import { Card } from '@/components';
+import { Card, ChartTitleWithHint } from '@/components';
 import { ChartAccessibleFallback } from '@/components/charts';
 import { strings } from '@/lib/strings';
 import type { InlinkAnchorRow, LinkRelSummary } from '@/types/report';
@@ -155,8 +155,7 @@ export default function LinkAttributesCharts({ summary, anchors, labels }: LinkA
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 min-w-0">
       {scopeChart ? (
         <Card padding="tight" shadow className="min-w-0 overflow-hidden">
-          <h2 className="text-sm font-bold text-foreground mb-1">{vl.chartLinkScopeTitle}</h2>
-          <p className="text-xs text-muted-foreground mb-3">{vl.chartLinkScopeHint}</p>
+          <ChartTitleWithHint as="h2" title={vl.chartLinkScopeTitle} helpKey="views.links.chartLinkScope" />
           <div className="h-56 flex items-center justify-center">
             <div className="w-full max-w-[260px] h-48">
               <ChartAccessibleFallback
@@ -185,8 +184,7 @@ export default function LinkAttributesCharts({ summary, anchors, labels }: LinkA
 
       {internalAttrsChart ? (
         <Card padding="tight" shadow className="min-w-0 overflow-hidden">
-          <h2 className="text-sm font-bold text-foreground mb-1">{vl.chartInternalAttrsTitle}</h2>
-          <p className="text-xs text-muted-foreground mb-3">{vl.chartInternalAttrsHint}</p>
+          <ChartTitleWithHint as="h2" title={vl.chartInternalAttrsTitle} helpKey="views.links.chartInternalAttrs" />
           <div className="h-56 flex items-center justify-center">
             <div className="w-full max-w-[260px] h-48">
               <ChartAccessibleFallback
@@ -215,8 +213,7 @@ export default function LinkAttributesCharts({ summary, anchors, labels }: LinkA
 
       {topAnchors.length > 0 ? (
         <Card padding="tight" shadow className="min-w-0 overflow-hidden">
-          <h2 className="text-sm font-bold text-foreground mb-1">{vl.chartTopAnchorsTitle}</h2>
-          <p className="text-xs text-muted-foreground mb-3">{vl.chartTopAnchorsHint}</p>
+          <ChartTitleWithHint as="h2" title={vl.chartTopAnchorsTitle} helpKey="views.links.chartTopAnchors" />
           <div className="relative h-72 min-w-0 w-full overflow-hidden">
             <ChartAccessibleFallback
               summary={formatCompositionAria(
@@ -246,8 +243,7 @@ export default function LinkAttributesCharts({ summary, anchors, labels }: LinkA
 
       {topTargets.length > 0 ? (
         <Card padding="tight" shadow className="min-w-0 overflow-hidden">
-          <h2 className="text-sm font-bold text-foreground mb-1">{vl.chartTopTargetsTitle}</h2>
-          <p className="text-xs text-muted-foreground mb-3">{vl.chartTopTargetsHint}</p>
+          <ChartTitleWithHint as="h2" title={vl.chartTopTargetsTitle} helpKey="views.links.chartTopTargets" />
           <div className="relative h-72 min-w-0 w-full overflow-hidden">
             <ChartAccessibleFallback
               summary={formatCompositionAria(
diff --git a/web/src/components/links/SortTh.tsx b/web/src/components/links/SortTh.tsx
index af39feb8..1eacdfd5 100644
--- a/web/src/components/links/SortTh.tsx
+++ b/web/src/components/links/SortTh.tsx
@@ -1,4 +1,5 @@
 import { ChevronDown, ChevronUp, ArrowUpDown } from 'lucide-react';
+import HelpHint, { normalizeHintContent, type HelpHintContent } from '../HelpHint';
 
 export interface SortThProps {
   label: string;
@@ -7,10 +8,12 @@ export interface SortThProps {
   sortDesc: boolean;
   onSort: (field: string) => void;
   className?: string;
+  hint?: HelpHintContent;
 }
 
-export default function SortTh({ label, field, sortBy, sortDesc, onSort, className = '' }: SortThProps) {
+export default function SortTh({ label, field, sortBy, sortDesc, onSort, className = '', hint }: SortThProps) {
   const active = sortBy === field;
+  const hintContent = normalizeHintContent(hint);
   return (
     <th
       className={`px-4 py-4 cursor-pointer select-none hover:text-bright transition-colors ${active ? 'text-bright' : 'text-muted-foreground'} ${className}`}
@@ -18,6 +21,17 @@ export default function SortTh({ label, field, sortBy, sortDesc, onSort, classNa
     >
       <div className="flex items-center gap-1">
         {label}
+        {hintContent ? (
+          <span
+            className="inline-flex"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <HelpHint title={hintContent.title} ariaLabel={`About ${label}`}>
+              {hintContent.body}
+            </HelpHint>
+          </span>
+        ) : null}
         {active
           ? (sortDesc ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />)
           : <ArrowUpDown className="h-3 w-3 opacity-30" />}
diff --git a/web/src/components/links/explorer/LinksExplorerSummaryCharts.tsx b/web/src/components/links/explorer/LinksExplorerSummaryCharts.tsx
new file mode 100644
index 00000000..7d9fd731
--- /dev/null
+++ b/web/src/components/links/explorer/LinksExplorerSummaryCharts.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Bar } from 'react-chartjs-2';
+import type { ReportLink } from '@/types';
+import { Card, ChartTitleWithHint } from '@/components';
+import { ChartPanel } from '@/components/charts';
+import { barOptsVertical } from '@/components/overview/chartUtils';
+import { strings } from '@/lib/strings';
+import { statusDistributionFromLinks } from '@/lib/statusDistribution';
+import { PALETTE_CATEGORICAL } from '@/utils/chartPalette';
+import { registerChartJsBase } from '@/utils/chartJsDefaults';
+
+registerChartJsBase();
+
+const WC_BUCKETS = [
+  { label: '< 300 words', min: 0, max: 299 },
+  { label: '300–999 words', min: 300, max: 999 },
+  { label: '1000+ words', min: 1000, max: Infinity },
+] as const;
+
+function wordCountBandsFromLinks(links: ReportLink[]): { labels: string[]; values: number[] } | null {
+  const counts = WC_BUCKETS.map(() => 0);
+  for (const link of links) {
+    const wc = link.word_count ?? 0;
+    const idx = WC_BUCKETS.findIndex((b) => wc >= b.min && wc <= b.max);
+    if (idx >= 0) counts[idx] += 1;
+  }
+  if (counts.every((c) => c === 0)) return null;
+  return {
+    labels: WC_BUCKETS.map((b) => b.label),
+    values: counts,
+  };
+}
+
+export interface LinksExplorerSummaryChartsProps {
+  links: ReportLink[];
+}
+
+export function LinksExplorerSummaryCharts({ links }: LinksExplorerSummaryChartsProps) {
+  const vl = strings.views.links;
+  const vo = strings.views.overview;
+
+  const statusChart = useMemo(() => statusDistributionFromLinks(links), [links]);
+  const wcChart = useMemo(() => wordCountBandsFromLinks(links), [links]);
+
+  if (!statusChart && !wcChart) return null;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 min-w-0">
+      {statusChart ? (
+        <Card padding="tight" shadow className="min-w-0 overflow-hidden">
+          <ChartTitleWithHint as="h2" title={vl.chartStatusTitle} helpKey="views.links.chartStatus" />
+          <ChartPanel heightClass="h-52">
+            <div className="h-full w-full" role="img" aria-label={statusChart.aria}>
+              <Bar
+                data={{
+                  labels: statusChart.labels,
+                  datasets: [
+                    {
+                      label: vo.chartUrls,
+                      data: statusChart.values,
+                      backgroundColor: PALETTE_CATEGORICAL[0],
+                      borderRadius: 4,
+                    },
+                  ],
+                }}
+                options={barOptsVertical(vo.chartUrls, statusChart.aria)}
+              />
+            </div>
+          </ChartPanel>
+        </Card>
+      ) : null}
+      {wcChart ? (
+        <Card padding="tight" shadow className="min-w-0 overflow-hidden">
+          <ChartTitleWithHint as="h2" title={vl.chartWcTitle} helpKey="views.links.chartWc" />
+          <ChartPanel heightClass="h-52">
+            <Bar
+              data={{
+                labels: wcChart.labels,
+                datasets: [
+                  {
+                    label: vo.chartPages,
+                    data: wcChart.values,
+                    backgroundColor: PALETTE_CATEGORICAL[2],
+                    borderRadius: 4,
+                  },
+                ],
+              }}
+              options={barOptsVertical(vo.chartPages, 'Word count bands across all crawled URLs')}
+            />
+          </ChartPanel>
+        </Card>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/links/explorer/LinksExplorerTableTab.tsx b/web/src/components/links/explorer/LinksExplorerTableTab.tsx
index b8e2f78d..aa15535f 100644
--- a/web/src/components/links/explorer/LinksExplorerTableTab.tsx
+++ b/web/src/components/links/explorer/LinksExplorerTableTab.tsx
@@ -4,6 +4,8 @@ import { type MouseEvent, type RefObject } from 'react';
 import { Search, ExternalLink } from 'lucide-react';
 import type { ReportLink } from '@/types';
 import { strings, format } from '@/lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
+import HelpHint, { normalizeHintContent } from '@/components/HelpHint';
 import { Card, Badge, Button } from '@/components';
 import { formatMs, rtColor, formatPageHrefLines } from '@/utils/linkUtils';
 import { linkHasBrowserErrors } from '@/lib/browserErrors';
@@ -13,6 +15,7 @@ import SavedCrawlFiltersBar from '@/components/links/SavedCrawlFiltersBar';
 import type { LinksFilterValues } from '@/components/links/LinksFilterBar';
 import type { LinkSortKey } from './types';
 import { LinksExplorerTabPanel } from './LinksExplorerTabPanel';
+import { LinksExplorerSummaryCharts } from './LinksExplorerSummaryCharts';
 
 export interface LinksExplorerTableTabProps {
   filterValues: LinksFilterValues;
@@ -69,6 +72,8 @@ export function LinksExplorerTableTab({
   const sj = strings.common;
   const hasCustomExtract = links.some((l) => l.custom_extract);
   const customFieldKeys = collectCustomFieldKeys(links);
+  const customExtractHint = normalizeHintContent(metricHelpHint('views.links.explorerExtract'));
+  const jsErrorsHint = normalizeHintContent(metricHelpHint('views.links.explorerJsErrors'));
 
   return (
     <LinksExplorerTabPanel tabId="urls" className="flex flex-col gap-4">
@@ -86,6 +91,8 @@ export function LinksExplorerTableTab({
         />
       ) : null}
 
+      <LinksExplorerSummaryCharts links={links} />
+
       <Card overflowHidden padding="none" className="flex flex-col min-h-[min(500px,70vh)] sm:min-h-[500px]">
         <div
           className="overflow-x-auto overflow-y-visible touch-pan-x overscroll-x-contain relative scroll-smooth"
@@ -113,8 +120,22 @@ export function LinksExplorerTableTab({
                   onSort={onToggleSort}
                   className="px-3 sm:px-6 sticky left-0 z-30 bg-brand-900 border-r border-default shadow-[4px_0_16px_-8px_rgba(0,0,0,0.55)]"
                 />
-                <SortTh label={vl.thStatus} field="status" sortBy={sortBy} sortDesc={sortDesc} onSort={onToggleSort} />
-                <SortTh label={vl.thLinksIn} field="inlinks" sortBy={sortBy} sortDesc={sortDesc} onSort={onToggleSort} />
+                <SortTh
+                  label={vl.thStatus}
+                  field="status"
+                  sortBy={sortBy}
+                  sortDesc={sortDesc}
+                  onSort={onToggleSort}
+                  hint={metricHelpHint('views.links.explorerStatus')}
+                />
+                <SortTh
+                  label={vl.thLinksIn}
+                  field="inlinks"
+                  sortBy={sortBy}
+                  sortDesc={sortDesc}
+                  onSort={onToggleSort}
+                  hint={metricHelpHint('views.links.explorerInlinks')}
+                />
                 <SortTh
                   label={vl.thCrawlDepth}
                   field="depth"
@@ -122,8 +143,16 @@ export function LinksExplorerTableTab({
                   sortDesc={sortDesc}
                   onSort={onToggleSort}
                   className="hidden md:table-cell"
+                  hint={metricHelpHint('views.links.explorerDepth')}
+                />
+                <SortTh
+                  label={vl.thLoadTime}
+                  field="response_time_ms"
+                  sortBy={sortBy}
+                  sortDesc={sortDesc}
+                  onSort={onToggleSort}
+                  hint={metricHelpHint('views.links.explorerLoadTime')}
                 />
-                <SortTh label={vl.thLoadTime} field="response_time_ms" sortBy={sortBy} sortDesc={sortDesc} onSort={onToggleSort} />
                 <SortTh
                   label={vl.thWords}
                   field="word_count"
@@ -131,10 +160,18 @@ export function LinksExplorerTableTab({
                   sortDesc={sortDesc}
                   onSort={onToggleSort}
                   className="hidden md:table-cell"
+                  hint={metricHelpHint('views.links.explorerWords')}
                 />
                 {hasCustomExtract ? (
                   <th className="hidden lg:table-cell px-4 py-4 text-muted-foreground uppercase text-xs whitespace-nowrap">
-                    {vl.thCustomExtract}
+                    <span className="inline-flex items-center gap-1 normal-case">
+                      {vl.thCustomExtract}
+                      {customExtractHint ? (
+                        <HelpHint title={customExtractHint.title} ariaLabel={`About ${vl.thCustomExtract}`}>
+                          {customExtractHint.body}
+                        </HelpHint>
+                      ) : null}
+                    </span>
                   </th>
                 ) : null}
                 {customFieldKeys.map((key) => (
@@ -146,7 +183,14 @@ export function LinksExplorerTableTab({
                   </th>
                 ))}
                 <th className="hidden lg:table-cell px-4 py-4 text-muted-foreground uppercase text-xs whitespace-nowrap">
-                  {vl.thJsErrors}
+                  <span className="inline-flex items-center gap-1 normal-case">
+                    {vl.thJsErrors}
+                    {jsErrorsHint ? (
+                      <HelpHint title={jsErrorsHint.title} ariaLabel={`About ${vl.thJsErrors}`}>
+                        {jsErrorsHint.body}
+                      </HelpHint>
+                    ) : null}
+                  </span>
                 </th>
                 <th className="px-3 sm:px-4 py-4 text-center text-muted-foreground uppercase text-xs whitespace-nowrap">
                   {vl.thActions}
diff --git a/web/src/components/links/explorer/index.ts b/web/src/components/links/explorer/index.ts
index c3ce7477..295e972f 100644
--- a/web/src/components/links/explorer/index.ts
+++ b/web/src/components/links/explorer/index.ts
@@ -1,4 +1,5 @@
 export type { LinkSortKey } from './types';
+export { LinksExplorerSummaryCharts } from './LinksExplorerSummaryCharts';
 export type { LinksExplorerTabId } from './LinksExplorerTabPanel';
 export { LinksExplorerAnchorsTab } from './LinksExplorerAnchorsTab';
 export { LinksExplorerTabPanel } from './LinksExplorerTabPanel';
diff --git a/web/src/components/links/tabs/ContentTab.tsx b/web/src/components/links/tabs/ContentTab.tsx
index ed110c80..335a2e42 100644
--- a/web/src/components/links/tabs/ContentTab.tsx
+++ b/web/src/components/links/tabs/ContentTab.tsx
@@ -1,10 +1,10 @@
-import { useMemo, useState, createElement, type ComponentType } from 'react';
+import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, type TooltipItem } from 'chart.js';
 import { BookOpen, BarChart2, Check, FileText, Layers, Share2, Tag, X } from 'lucide-react';
 import type { LinkDetail } from '@/types/report';
 import { useReport } from '../../../context/useReport';
-import { Card } from '../../../components';
+import { Card, SectionHeader, LabelWithHint, ChartTitleWithHint } from '../../../components';
 import { RatioBar, RankedBarChart } from '../../../components/charts';
 import { wcLabel, readingLabel, parseKeywords, normaliseKw } from '../../../utils/linkUtils';
 import { PALETTE_CATEGORICAL } from '../../../utils/chartPalette';
@@ -101,26 +101,6 @@ function h1QualityIndex(count: number | string | undefined): number {
   return 2;
 }
 
-interface SectionHeaderProps {
-  icon: ComponentType<{ className?: string }>;
-  title: string;
-  description?: string;
-}
-
-function SectionHeader({ icon, title, description }: SectionHeaderProps) {
-  return (
-    <div className="flex items-start gap-3 border-b border-muted pb-3 mb-1">
-      <div className="p-2 bg-brand-800 border border-default rounded-lg shrink-0">
-        {createElement(icon, { className: 'h-4 w-4 text-link' })}
-      </div>
-      <div className="min-w-0">
-        <h2 className="text-base font-bold text-bright">{title}</h2>
-        {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
-      </div>
-    </div>
-  );
-}
-
 function QualityStatusRow({
   label,
   detail,
@@ -249,7 +229,8 @@ export default function ContentTab({ link }: ContentTabProps) {
       <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
         <Card shadow className="!p-4">
           <div className="text-muted-foreground text-[10px] font-bold uppercase tracking-wider mb-1 flex items-center gap-1.5">
-            <BookOpen className="h-3.5 w-3.5" /> {lc.kpiWords}
+            <BookOpen className="h-3.5 w-3.5" />
+            <LabelWithHint label={lc.kpiWords} helpKey="shared.wordCount" />
           </div>
           <div className={`text-2xl font-bold tabular-nums ${wcInfo.color}`}>{wc.toLocaleString()}</div>
           <div className="text-[10px] text-muted-foreground mt-0.5">{wcInfo.label}</div>
@@ -262,7 +243,8 @@ export default function ContentTab({ link }: ContentTabProps) {
         </Card>
         <Card shadow className="!p-4">
           <div className="text-muted-foreground text-[10px] font-bold uppercase tracking-wider mb-1 flex items-center gap-1.5">
-            <FileText className="h-3.5 w-3.5" /> {lc.kpiReading}
+            <FileText className="h-3.5 w-3.5" />
+            <LabelWithHint label={lc.kpiReading} helpKey="shared.readingLevel" />
           </div>
           <div className={`text-2xl font-bold tabular-nums ${rlInfo.color}`}>
             {rl > 0 ? format(lo.readingGrade, { n: rl }) : sj.emDash}
@@ -276,7 +258,8 @@ export default function ContentTab({ link }: ContentTabProps) {
         </Card>
         <Card shadow className="!p-4">
           <div className="text-muted-foreground text-[10px] font-bold uppercase tracking-wider mb-1 flex items-center gap-1.5">
-            <Layers className="h-3.5 w-3.5" /> {lc.kpiDepth}
+            <Layers className="h-3.5 w-3.5" />
+            <LabelWithHint label={lc.kpiDepth} helpKey="shared.crawlDepth" />
           </div>
           <div className="text-2xl font-bold text-bright tabular-nums">{link.depth != null ? link.depth : sj.emDash}</div>
           <div className="text-[10px] text-muted-foreground mt-0.5">{lc.crawlDepth}</div>
@@ -291,11 +274,10 @@ export default function ContentTab({ link }: ContentTabProps) {
       </div>
 
       <div className="space-y-4">
-        <SectionHeader icon={BarChart2} title={lc.vsSiteTitle} description={lc.vsSiteDesc} />
+        <SectionHeader icon={BarChart2} title={lc.vsSiteTitle} description={lc.vsSiteDesc} size="sm" />
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <Card padding="tight">
-            <h3 className="text-sm font-bold text-foreground mb-1">{lc.wordCountComparison}</h3>
-            <p className="text-xs text-muted-foreground mb-2">{lc.vsSiteAggregates}</p>
+            <ChartTitleWithHint title={lc.wordCountComparison} hint={lc.vsSiteAggregates} />
             <div className="h-56">
               {compareBarData.values.length > 0 ? (
                 <RankedBarChart
@@ -327,7 +309,7 @@ export default function ContentTab({ link }: ContentTabProps) {
 
       {kwSorted.length > 0 && (
         <div className="space-y-4">
-          <SectionHeader icon={BarChart2} title={lc.topKeywordsPage} description={lc.freqThisUrl} />
+          <SectionHeader icon={BarChart2} title={lc.topKeywordsPage} description={lc.freqThisUrl} size="sm" />
           <Card padding="tight">
             <div className="h-56">
               <RankedBarChart
@@ -345,7 +327,7 @@ export default function ContentTab({ link }: ContentTabProps) {
       )}
 
       <div className="space-y-4">
-        <SectionHeader icon={Tag} title={lc.onPageSignalsTitle} description={lc.onPageSignalsDesc} />
+        <SectionHeader icon={Tag} title={lc.onPageSignalsTitle} description={lc.onPageSignalsDesc} size="sm" />
         <Card padding="tight" className="divide-y divide-muted/50 space-y-0">
           <div className="py-4 first:pt-0 last:pb-0">
             <QualityStatusRow
@@ -392,7 +374,7 @@ export default function ContentTab({ link }: ContentTabProps) {
 
       {link.content_excerpt && String(link.content_excerpt).trim() && (
         <div className="space-y-4">
-          <SectionHeader icon={FileText} title={lc.contentExcerpt} description={lc.contentExcerptHint} />
+          <SectionHeader icon={FileText} title={lc.contentExcerpt} description={lc.contentExcerptHint} size="sm" />
           <Card padding="tight">
             <p className="text-xs text-foreground whitespace-pre-wrap break-words max-h-72 overflow-y-auto leading-relaxed">
               {String(link.content_excerpt).trim()}
@@ -402,7 +384,7 @@ export default function ContentTab({ link }: ContentTabProps) {
       )}
 
       <div className="space-y-4">
-        <SectionHeader icon={Share2} title={lc.socialMetaTitle} description={lc.socialMetaDesc} />
+        <SectionHeader icon={Share2} title={lc.socialMetaTitle} description={lc.socialMetaDesc} size="sm" />
         <Card padding="tight">
           <SocialCheckItem label={vca.openGraph} present={hasOg} />
           <SocialCheckItem label={vca.twitterCard} present={hasTw} />
diff --git a/web/src/components/links/tabs/OverviewTab.tsx b/web/src/components/links/tabs/OverviewTab.tsx
index 861f42b2..4385e210 100644
--- a/web/src/components/links/tabs/OverviewTab.tsx
+++ b/web/src/components/links/tabs/OverviewTab.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Check, ChevronRight, Gauge, X } from 'lucide-react';
-import { Badge } from '../../index';
+import { Badge, LabelWithHint } from '../../index';
 import type { LinkDetail, LinkLighthouseData, PageAnalysis } from '@/types/report';
 import { useReport } from '../../../context/useReport';
 import { strings, format } from '../../../lib/strings';
@@ -86,17 +86,19 @@ export default function OverviewTab({ link, lhData, onOpenTab }: OverviewTabProp
   const sslExp = (data?.site_ssl_expires_at || null) as string | null;
 
   const crawlStats = [
-    { label: o.statStatus, value: <Badge value={link.status ?? ''} />, raw: true },
+    { key: 'status', label: o.statStatus, value: <Badge value={link.status ?? ''} />, raw: true },
     {
-      label: o.statResponseTime,
+      key: 'responseTime',
+      label: <LabelWithHint label={o.statResponseTime} helpKey="shared.responseTime" />,
       value: <span className={`font-bold ${rtColor(link.response_time_ms)}`}>{formatMs(link.response_time_ms)}</span>,
       raw: true,
     },
-    { label: o.statDepth, value: link.depth != null ? link.depth : sj.emDash },
-    { label: o.statInlinks, value: link.inlinks ?? 0 },
-    { label: o.statOutlinks, value: link.outlinks ?? 0 },
+    { key: 'depth', label: <LabelWithHint label={o.statDepth} helpKey="shared.crawlDepth" />, value: link.depth != null ? link.depth : sj.emDash },
+    { key: 'inlinks', label: <LabelWithHint label={o.statInlinks} helpKey="shared.inlinks" />, value: link.inlinks ?? 0 },
+    { key: 'outlinks', label: <LabelWithHint label={o.statOutlinks} helpKey="shared.outlinks" />, value: link.outlinks ?? 0 },
     {
-      label: o.statWords,
+      key: 'words',
+      label: <LabelWithHint label={o.statWords} helpKey="shared.wordCount" />,
       value:
         wc > 0 ? (
           <span className={wcInfo.color}>
@@ -108,7 +110,8 @@ export default function OverviewTab({ link, lhData, onOpenTab }: OverviewTabProp
       raw: true,
     },
     {
-      label: o.statReadingLevel,
+      key: 'readingLevel',
+      label: <LabelWithHint label={o.statReadingLevel} helpKey="shared.readingLevel" />,
       value:
         rl > 0 ? (
           <span className={rlInfo.color}>
@@ -120,6 +123,7 @@ export default function OverviewTab({ link, lhData, onOpenTab }: OverviewTabProp
       raw: true,
     },
     {
+      key: 'redirects',
       label: o.statRedirects,
       value:
         (link.redirect_chain_length ?? 0) > 0 ? (
@@ -158,8 +162,8 @@ export default function OverviewTab({ link, lhData, onOpenTab }: OverviewTabProp
       <div>
         <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3">{o.crawlHeading}</h3>
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-          {crawlStats.map(({ label, value, raw }) => (
-            <div key={label} className="bg-brand-900 border border-default rounded-xl p-3">
+          {crawlStats.map(({ key, label, value, raw }) => (
+            <div key={key} className="bg-brand-900 border border-default rounded-xl p-3">
               <div className="text-xs text-muted-foreground mb-1">{label}</div>
               <div className="text-sm font-semibold">
                 {raw ? value : <span className="text-bright">{value}</span>}
diff --git a/web/src/components/overview/OverviewChartsTab.tsx b/web/src/components/overview/OverviewChartsTab.tsx
index 176f84b4..13ec940c 100644
--- a/web/src/components/overview/OverviewChartsTab.tsx
+++ b/web/src/components/overview/OverviewChartsTab.tsx
@@ -3,7 +3,8 @@
 import { BarChart3 } from 'lucide-react';
 import { Bar } from 'react-chartjs-2';
 import { strings, format } from '@/lib/strings';
-import { Card, StatCard } from '@/components';
+import { Card, StatCard, ChartTitleWithHint } from '@/components';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { StatusDistributionChart, LighthouseScoreGrid } from '@/components/charts';
 import { ChartPanel } from '@/components/charts';
 import { barOptionsHorizontal } from '@/utils/chartJsDefaults';
@@ -72,29 +73,25 @@ export function OverviewChartsTab({ charts, depth }: OverviewChartsTabProps) {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-w-0">
             {statusDistribution && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.statusDist}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.statusDistHint}</p>
+                <ChartTitleWithHint title={vo.statusDist} helpKey="views.overview.statusDistChart" />
                 <StatusDistributionChart distribution={statusDistribution} />
               </Card>
             )}
             {wordCountChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.contentDepth}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.contentDepthHint}</p>
+                <ChartTitleWithHint title={vo.contentDepth} helpKey="views.overview.contentDepthChart" />
                 <OverviewBarChart chart={wordCountChart} yTitle={vo.chartPages} />
               </Card>
             )}
             {responseTimeChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.serverLatency}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.serverLatencyHint}</p>
+                <ChartTitleWithHint title={vo.serverLatency} helpKey="views.overview.serverLatencyChart" />
                 <OverviewBarChart chart={responseTimeChart} yTitle={vo.chartUrls} />
               </Card>
             )}
             {depthChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.crawlDepth}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.crawlDepthHint}</p>
+                <ChartTitleWithHint title={vo.crawlDepth} helpKey="views.overview.crawlDepthChart" />
                 <div className="text-xs text-muted-foreground mb-2 tabular-nums">
                   {format(vo.depthSummaryLine, {
                     maxDepth: depth.max_depth ?? sj.emDash,
@@ -110,8 +107,7 @@ export function OverviewChartsTab({ charts, depth }: OverviewChartsTabProps) {
             )}
             {titleMetaChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.titleMetaHealth}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.titleMetaHint}</p>
+                <ChartTitleWithHint title={vo.titleMetaHealth} helpKey="views.overview.titleMetaChart" />
                 <ChartPanel heightClass="h-64">
                   <div className="h-full w-full" role="img" aria-label={titleMetaChart.aria}>
                     <Bar data={titleMetaChart.data} options={barOptsGrouped(vo.chartPages)} />
@@ -121,53 +117,62 @@ export function OverviewChartsTab({ charts, depth }: OverviewChartsTabProps) {
             )}
             {socialStats && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.socialPreview}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.socialPreviewHint}</p>
+                <ChartTitleWithHint title={vo.socialPreview} hint={vo.socialPreviewHint} />
                 <div className="grid grid-cols-1 sm:grid-cols-3 gap-3" role="group" aria-label={socialStats.aria}>
                   {socialStats.og != null && (
-                    <StatCard label={vo.socialLabelsOg} value={`${socialStats.og.toFixed(1)}%`} sub={pct} />
+                    <StatCard
+                      label={vo.socialLabelsOg}
+                      value={`${socialStats.og.toFixed(1)}%`}
+                      sub={pct}
+                      hint={metricHelpHint('views.overview.ogCoverage')}
+                    />
                   )}
                   {socialStats.twitter != null && (
-                    <StatCard label={vo.socialLabelsTwitter} value={`${socialStats.twitter.toFixed(1)}%`} sub={pct} />
+                    <StatCard
+                      label={vo.socialLabelsTwitter}
+                      value={`${socialStats.twitter.toFixed(1)}%`}
+                      sub={pct}
+                      hint={metricHelpHint('views.overview.twitterCoverage')}
+                    />
                   )}
                   {socialStats.ogImage != null && (
-                    <StatCard label={vo.socialLabelsOgImage} value={`${socialStats.ogImage.toFixed(1)}%`} sub={pct} />
+                    <StatCard
+                      label={vo.socialLabelsOgImage}
+                      value={`${socialStats.ogImage.toFixed(1)}%`}
+                      sub={pct}
+                      hint={metricHelpHint('views.overview.ogImageCoverage')}
+                    />
                   )}
                 </div>
               </Card>
             )}
             {readingLevelChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.readingLevel}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.readingLevelHint}</p>
+                <ChartTitleWithHint title={vo.readingLevel} hint={vo.readingLevelHint} />
                 <OverviewBarChart chart={readingLevelChart} yTitle={vo.chartPages} />
               </Card>
             )}
             {mimeChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.topMime}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.topMimeHint}</p>
+                <ChartTitleWithHint title={vo.topMime} helpKey="views.overview.mimeChart" />
                 <OverviewBarChart chart={mimeChart} yTitle={vo.chartUrls} />
               </Card>
             )}
             {outlinksChart && (
               <Card shadow>
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.outlinksTitle}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.outlinksHint}</p>
+                <ChartTitleWithHint title={vo.outlinksTitle} helpKey="views.overview.outlinksChart" />
                 <OverviewBarChart chart={outlinksChart} yTitle={vo.chartUrls} />
               </Card>
             )}
             {domainsChart && (
               <Card shadow className="lg:col-span-2">
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.topDomains}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.topDomainsHint}</p>
+                <ChartTitleWithHint title={vo.topDomains} helpKey="views.overview.topDomainsChart" />
                 <OverviewBarChart chart={domainsChart} yTitle={vo.chartUrls} />
               </Card>
             )}
             {lighthouseScores && (
               <Card shadow className="lg:col-span-2">
-                <h3 className="text-sm font-bold text-foreground mb-1">{vo.lhCategoryScores}</h3>
-                <p className="text-xs text-muted-foreground mb-3">{vo.lhCategoryHint}</p>
+                <ChartTitleWithHint title={vo.lhCategoryScores} helpKey="views.overview.lhCategoryChart" />
                 <LighthouseScoreGrid
                   scores={lighthouseScores.scores}
                   categoryLabels={lhLabels}
diff --git a/web/src/components/overview/OverviewPagesTab.tsx b/web/src/components/overview/OverviewPagesTab.tsx
index 1984c10b..9bc06c9f 100644
--- a/web/src/components/overview/OverviewPagesTab.tsx
+++ b/web/src/components/overview/OverviewPagesTab.tsx
@@ -3,6 +3,7 @@
 import { ExternalLink, Medal, TrendingUp } from 'lucide-react';
 import type { ReportTopPage } from '@/types';
 import { strings, format } from '@/lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { formatPageHrefLines } from '@/utils/linkUtils';
 import {
   Card,
@@ -66,8 +67,12 @@ function TopPagesTable({ pages }: { pages: ReportTopPage[] }) {
             <TableHeadCell className="text-left sticky left-14 top-0 z-30 min-w-[min(200px,55vw)] max-w-[min(280px,78vw)] bg-brand-900 border-r border-default shadow-[4px_0_12px_-4px_rgba(0,0,0,0.45)]">
               {vo.thPage}
             </TableHeadCell>
-            <TableHeadCell className="text-right min-w-0">{vo.thImportance}</TableHeadCell>
-            <TableHeadCell className="text-right min-w-0">{vo.thConnections}</TableHeadCell>
+            <TableHeadCell className="text-right min-w-0" hint={metricHelpHint('views.overview.linkScore')}>
+              {vo.thImportance}
+            </TableHeadCell>
+            <TableHeadCell className="text-right min-w-0" hint={metricHelpHint('views.overview.connections')}>
+              {vo.thConnections}
+            </TableHeadCell>
           </tr>
         </TableHead>
         <TableBody striped>
diff --git a/web/src/components/overview/OverviewSummaryTab.tsx b/web/src/components/overview/OverviewSummaryTab.tsx
index 80864535..96d7809b 100644
--- a/web/src/components/overview/OverviewSummaryTab.tsx
+++ b/web/src/components/overview/OverviewSummaryTab.tsx
@@ -21,9 +21,10 @@ import {
 import type { ReportPayload } from '@/types';
 import type { DataSourceId } from '@/lib/dataProvenance';
 import { strings, format } from '@/lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { crawledUrlCount } from '@/lib/crawlCounts';
 import { googleSnapshotStatus } from '@/lib/googleSnapshot';
-import { Card, AlertBanner, StatCard } from '@/components';
+import { Card, AlertBanner, StatCard, LabelWithHint } from '@/components';
 import { DataSourceBadgeRow } from '@/components/DataSourceBadge';
 import LlmDisclosure from '@/components/LlmDisclosure';
 import { OverviewTabPanel } from './OverviewTabPanel';
@@ -218,14 +219,30 @@ export function OverviewSummaryTab({ data, exportHref, compareHref, reportCount
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
             {googleData.gsc ? (
               <>
-                <StatCard label={vo.gscClicksCard} value={googleData.gsc.summary?.clicks?.toLocaleString()} />
-                <StatCard label={vo.gscImpressionsCard} value={googleData.gsc.summary?.impressions?.toLocaleString()} />
+                <StatCard
+                  label={vo.gscClicksCard}
+                  value={googleData.gsc.summary?.clicks?.toLocaleString()}
+                  hint={metricHelpHint('shared.clicks')}
+                />
+                <StatCard
+                  label={vo.gscImpressionsCard}
+                  value={googleData.gsc.summary?.impressions?.toLocaleString()}
+                  hint={metricHelpHint('shared.impressions')}
+                />
               </>
             ) : null}
             {googleData.ga4 ? (
               <>
-                <StatCard label={vo.ga4SessionsCard} value={googleData.ga4.summary?.sessions?.toLocaleString()} />
-                <StatCard label={vo.ga4UsersCard} value={googleData.ga4.summary?.activeUsers?.toLocaleString()} />
+                <StatCard
+                  label={vo.ga4SessionsCard}
+                  value={googleData.ga4.summary?.sessions?.toLocaleString()}
+                  hint={metricHelpHint('shared.sessions')}
+                />
+                <StatCard
+                  label={vo.ga4UsersCard}
+                  value={googleData.ga4.summary?.activeUsers?.toLocaleString()}
+                  hint={metricHelpHint('shared.activeUsers')}
+                />
               </>
             ) : null}
           </div>
@@ -252,20 +269,20 @@ export function OverviewSummaryTab({ data, exportHref, compareHref, reportCount
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
         <Card shadow>
           <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <Globe className="h-4 w-4" /> {vo.totalUrls}
+            <Globe className="h-4 w-4" /> <LabelWithHint label={vo.totalUrls} helpKey="views.overview.totalUrls" />
           </div>
           <div className="text-3xl font-bold text-bright">{crawledCount.toLocaleString()}</div>
           <div className="text-xs text-muted-foreground mt-2">{s.avg_outlinks ?? 0} {vo.avgOutlinks}</div>
         </Card>
         <Card shadow>
           <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <CheckCircle className="h-4 w-4 text-green-500" /> {vo.successRate}
+            <CheckCircle className="h-4 w-4 text-green-500" /> <LabelWithHint label={vo.successRate} helpKey="shared.successRate" />
           </div>
           <div className="text-3xl font-bold text-green-700 dark:text-green-400">{s.success_rate ?? 0}%</div>
         </Card>
         <Card shadow className="border-red-900/30 ring-1 ring-red-500/20">
           <div className="text-red-700 dark:text-red-400/90 text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <AlertTriangle className="h-4 w-4" /> {vo.broken}
+            <AlertTriangle className="h-4 w-4" /> <LabelWithHint label={vo.broken} helpKey="views.overview.brokenLinks" />
           </div>
           <div className="text-3xl font-bold text-red-500">{brokenCount}</div>
           <div className="text-xs text-muted-foreground mt-2">
@@ -274,7 +291,7 @@ export function OverviewSummaryTab({ data, exportHref, compareHref, reportCount
         </Card>
         <Card shadow>
           <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <FileCode className="h-4 w-4" /> {vo.missingH1s}
+            <FileCode className="h-4 w-4" /> <LabelWithHint label={vo.missingH1s} helpKey="views.overview.missingH1" />
           </div>
           <div className="text-3xl font-bold text-yellow-500">{h1Zero}</div>
         </Card>
@@ -283,7 +300,7 @@ export function OverviewSummaryTab({ data, exportHref, compareHref, reportCount
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
         <Card shadow>
           <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <BookOpen className="h-4 w-4" /> {vo.medianWordCount}
+            <BookOpen className="h-4 w-4" /> <LabelWithHint label={vo.medianWordCount} helpKey="shared.medianWords" />
           </div>
           <div className="text-3xl font-bold text-bright">
             {data.content_analytics?.word_count_stats?.median != null
@@ -294,7 +311,7 @@ export function OverviewSummaryTab({ data, exportHref, compareHref, reportCount
         </Card>
         <Card shadow>
           <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <Share className="h-4 w-4 text-link" /> {vo.ogCoverage}
+            <Share className="h-4 w-4 text-link" /> <LabelWithHint label={vo.ogCoverage} helpKey="views.overview.ogCoverage" />
           </div>
           <div className="text-3xl font-bold text-link">
             {data.social_coverage?.og_coverage_pct != null ? `${data.social_coverage.og_coverage_pct}%` : sj.emDash}
@@ -312,7 +329,7 @@ export function OverviewSummaryTab({ data, exportHref, compareHref, reportCount
         </Card>
         <Card shadow>
           <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <Timer className="h-4 w-4 text-amber-700 dark:text-amber-400" /> {vo.responseP50}
+            <Timer className="h-4 w-4 text-amber-700 dark:text-amber-400" /> <LabelWithHint label={vo.responseP50} helpKey="views.overview.responseP50" />
           </div>
           <div className="text-3xl font-bold text-amber-700 dark:text-amber-400">
             {data.response_time_stats?.p50 != null ? `${Math.round(data.response_time_stats.p50)}ms` : sj.emDash}
diff --git a/web/src/components/portfolio/PortfolioPropertyCard.tsx b/web/src/components/portfolio/PortfolioPropertyCard.tsx
index a7ee4f3e..95fa2571 100644
--- a/web/src/components/portfolio/PortfolioPropertyCard.tsx
+++ b/web/src/components/portfolio/PortfolioPropertyCard.tsx
@@ -8,7 +8,7 @@ import {
   Timer,
   Trash2,
 } from 'lucide-react';
-import { Card } from '@/components';
+import { Card, LabelWithHint } from '@/components';
 import Sparkline, { type SparklineMode } from '@/components/Sparkline';
 import { DataSourceBadgeRow } from '@/components/DataSourceBadge';
 import { PRIORITY_CONFIG } from '@/lib/issuePriority';
@@ -42,18 +42,22 @@ export interface PortfolioPropertyCardProps {
 
 function PortfolioTrendCell({
   label,
+  helpKey,
   values,
   displayValue,
   mode,
 }: {
   label: string;
+  helpKey?: string;
   values: number[];
   displayValue: string;
   mode: SparklineMode;
 }) {
   return (
     <div className="min-w-0 flex-1 rounded-md border border-default/60 bg-brand-900/25 px-2 py-1.5">
-      <p className="text-[10px] uppercase tracking-wider text-muted-foreground truncate">{label}</p>
+      <p className="text-[10px] uppercase tracking-wider text-muted-foreground truncate">
+        {helpKey ? <LabelWithHint label={label} helpKey={helpKey} /> : label}
+      </p>
       <div className="flex items-end justify-between gap-1 mt-1 min-h-[22px]">
         <Sparkline values={values} mode={mode} width={92} height={22} />
         <span className="text-sm font-semibold tabular-nums text-foreground shrink-0 leading-none pb-0.5">
@@ -145,7 +149,11 @@ export default function PortfolioPropertyCard({
               </div>
               <div className="text-right shrink-0">
                 <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
-                  {group.crawlOnly ? vh.titleCoverageLabel : vh.healthScoreLabel}
+                  {group.crawlOnly ? (
+                    <LabelWithHint label={vh.titleCoverageLabel} helpKey="shared.titleCoverage" />
+                  ) : (
+                    <LabelWithHint label={vh.healthScoreLabel} helpKey="shared.healthScore" />
+                  )}
                 </p>
                 <div className="flex items-center justify-end gap-1.5">
                   {group.crawlOnly && trends.titleTrend.length >= 1 ? (
@@ -267,13 +275,17 @@ export default function PortfolioPropertyCard({
               <div className="rounded-md bg-brand-900/35 px-2 py-1.5 border border-default space-y-2">
                 <div className="grid grid-cols-2 gap-2">
                   <div className="min-w-0">
-                    <p className="text-[10px] uppercase tracking-wider text-muted-foreground">{vh.urlCountLabel}</p>
+                    <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                      <LabelWithHint label={vh.urlCountLabel} helpKey="views.home.urlCount" />
+                    </p>
                     <p className="text-lg leading-none font-semibold text-bright tabular-nums mt-1">
                       {group.urlCount.toLocaleString()}
                     </p>
                   </div>
                   <div className="min-w-0 text-right">
-                    <p className="text-[10px] uppercase tracking-wider text-muted-foreground">{vh.titleCoverageLabel}</p>
+                    <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                      <LabelWithHint label={vh.titleCoverageLabel} helpKey="shared.titleCoverage" />
+                    </p>
                     <p className="text-lg leading-none font-semibold text-foreground tabular-nums mt-1">
                       {group.titleCoverage != null ? `${group.titleCoverage}%` : sj.emDash}
                     </p>
@@ -319,7 +331,9 @@ export default function PortfolioPropertyCard({
 
               <div className="grid grid-cols-3 gap-2">
                 <div className="rounded-md bg-brand-900/35 px-2 py-1.5 border border-default">
-                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">{vh.urlCountLabel}</p>
+                  <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+                    <LabelWithHint label={vh.urlCountLabel} helpKey="views.home.urlCount" />
+                  </p>
                   <p className="text-lg font-semibold text-bright tabular-nums mt-1">{group.urlCount.toLocaleString()}</p>
                   {group.medianWordCount != null ? (
                     <p className="text-[10px] text-muted-foreground mt-1 tabular-nums">
@@ -335,7 +349,7 @@ export default function PortfolioPropertyCard({
                 <div className="rounded-md bg-brand-900/35 px-2 py-1.5 border border-default">
                   <p className="text-[10px] uppercase tracking-wider text-muted-foreground flex items-center gap-1">
                     <AlertTriangle className="h-3 w-3" aria-hidden />
-                    {vh.totalIssuesLabel}
+                    <LabelWithHint label={vh.totalIssuesLabel} helpKey="views.home.totalIssues" />
                   </p>
                   <p className="text-lg font-semibold text-bright tabular-nums mt-1">{group.totalIssues.toLocaleString()}</p>
                   <div className="flex flex-wrap gap-1 mt-1">
@@ -360,11 +374,15 @@ export default function PortfolioPropertyCard({
                   </p>
                   <div className="mt-1 space-y-0.5">
                     <p className="text-sm font-semibold tabular-nums">
-                      <span className="text-[10px] text-muted-foreground uppercase mr-1">{vh.perfScoreLabel}</span>
+                      <span className="text-[10px] text-muted-foreground uppercase mr-1">
+                        <LabelWithHint label={vh.perfScoreLabel} helpKey="views.home.perfScore" />
+                      </span>
                       {group.perfScore ?? sj.emDash}
                     </p>
                     <p className="text-sm font-semibold tabular-nums">
-                      <span className="text-[10px] text-muted-foreground uppercase mr-1">{vh.seoScoreLabel}</span>
+                      <span className="text-[10px] text-muted-foreground uppercase mr-1">
+                        <LabelWithHint label={vh.seoScoreLabel} helpKey="views.home.seoScore" />
+                      </span>
                       {group.seoScore ?? sj.emDash}
                     </p>
                   </div>
@@ -430,6 +448,7 @@ export default function PortfolioPropertyCard({
                   />
                   <PortfolioTrendCell
                     label={vh.trendTitleCoverageLabel}
+                    helpKey="shared.titleCoverage"
                     values={trends.titleTrend}
                     displayValue={group.titleCoverage != null ? `${group.titleCoverage}%` : sj.emDash}
                     mode="higher-better"
@@ -452,24 +471,28 @@ export default function PortfolioPropertyCard({
                 <div className="grid grid-cols-2 gap-1.5">
                   <PortfolioTrendCell
                     label={vh.trendHealthLabel}
+                    helpKey="views.home.trendHealth"
                     values={trends.healthTrend}
                     displayValue={String(group.healthScore)}
                     mode="higher-better"
                   />
                   <PortfolioTrendCell
                     label={vh.trendIssuesLabel}
+                    helpKey="views.home.trendIssues"
                     values={trends.issuesTrend}
                     displayValue={group.totalIssues.toLocaleString()}
                     mode="lower-better"
                   />
                   <PortfolioTrendCell
                     label={vh.perfScoreLabel}
+                    helpKey="views.home.perfScore"
                     values={trends.perfTrend}
                     displayValue={group.perfScore != null ? String(group.perfScore) : sj.emDash}
                     mode="higher-better"
                   />
                   <PortfolioTrendCell
                     label={vh.seoScoreLabel}
+                    helpKey="views.home.seoScore"
                     values={trends.seoTrend}
                     displayValue={group.seoScore != null ? String(group.seoScore) : sj.emDash}
                     mode="higher-better"
diff --git a/web/src/components/searchPerformance/GscCharts.tsx b/web/src/components/searchPerformance/GscCharts.tsx
index a0990fce..4c6fbecf 100644
--- a/web/src/components/searchPerformance/GscCharts.tsx
+++ b/web/src/components/searchPerformance/GscCharts.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, type ReactNode } from 'react';
+import { useMemo } from 'react';
 import type { ChartOptions, TooltipItem } from 'chart.js';
 import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement, Title, Tooltip, Legend } from 'chart.js';
 import { Bar, Scatter } from 'react-chartjs-2';
@@ -14,7 +14,7 @@ import {
 import { strings } from '../../lib/strings';
 import { buildPositionBuckets } from './gscTableUtils';
 import { truncateLabel } from '../google/tableUtils';
-import GoogleChartCard from '../google/GoogleChartCard';
+import ChartCard from '../ChartCard';
 import GoogleTimeSeriesChart from '../google/GoogleTimeSeriesChart';
 import type { GscDailyRow, GscPageRow, GscQueryRow, ScatterPoint } from '@/types/components';
 
@@ -24,26 +24,6 @@ ChartJS.register(PointElement);
 const TOP_N = 10;
 const SCATTER_MAX = 50;
 
-interface ChartCardProps {
-  title: string;
-  hint?: string;
-  ariaLabel: string;
-  heightClass?: string;
-  children?: ReactNode;
-}
-
-function ChartCard({ title, hint, ariaLabel, heightClass = 'h-56', children }: ChartCardProps) {
-  return (
-    <div className="bg-brand-800 border border-default rounded-xl p-4">
-      <h3 className="text-sm font-bold text-foreground mb-1">{title}</h3>
-      {hint && <p className="text-xs text-muted-foreground mb-3">{hint}</p>}
-      <div className={heightClass} role="img" aria-label={ariaLabel}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
 function useTopBarChart(
   rows: Array<Record<string, unknown>> | null | undefined,
   labelKey: string,
@@ -199,14 +179,14 @@ export function GscDailyTrendChart({ daily }: GscDailyTrendChartProps) {
   ];
   if (!daily?.length) return null;
   return (
-    <GoogleChartCard
+    <ChartCard
       title={sp.charts.dailyTitle}
       hint={sp.charts.dailyHint}
       ariaLabel={sp.charts.dailyAria}
       heightClass="h-64"
     >
       <GoogleTimeSeriesChart rows={daily} xKey="date" series={series} dualAxis />
-    </GoogleChartCard>
+    </ChartCard>
   );
 }
 
diff --git a/web/src/components/siteStructure/PathTreeTable.tsx b/web/src/components/siteStructure/PathTreeTable.tsx
index 8d67f290..07325de0 100644
--- a/web/src/components/siteStructure/PathTreeTable.tsx
+++ b/web/src/components/siteStructure/PathTreeTable.tsx
@@ -3,6 +3,7 @@ import { ChevronRight, ChevronDown, Folder, Home, FileText } from 'lucide-react'
 import Table, { TableHead, TableHeadCell, TableBody, TableRow, TableCell } from '../Table';
 import InlinksMetricCell from '../links/InlinksMetricCell';
 import { rtColor } from '../../utils/linkUtils';
+import { metricHelpHint } from '@/lib/metricHelp';
 import type { PathTreeTableRow } from '@/types/report';
 
 interface ComparePairBarProps {
@@ -256,26 +257,40 @@ export default function PathTreeTable({
     <Table wrapperClassName={tableWrapperClassName}>
       <TableHead sticky>
         <TableRow>
-          <TableHeadCell className="min-w-[200px] sticky left-0 z-20 bg-brand-900 border-r border-muted/60 shadow-[2px_0_8px_-4px_rgba(0,0,0,0.35)]">
+          <TableHeadCell className="min-w-[200px] sticky left-0 z-20 bg-brand-900 border-r border-muted/60 shadow-[2px_0_8px_-4px_rgba(0,0,0,0.35)]" hint={metricHelpHint('views.siteStructure.colPath')}>
             {s.colPath}
           </TableHeadCell>
-          <TableHeadCell className="text-right whitespace-nowrap">{s.colPages}</TableHeadCell>
+          <TableHeadCell className="text-right whitespace-nowrap" hint={metricHelpHint('views.siteStructure.colPages')}>
+            {s.colPages}
+          </TableHeadCell>
           {hasCompare && showCompareCharts ? (
-            <TableHeadCell className="w-14 px-2 text-center" title={s.changePagesHint}>
+            <TableHeadCell className="w-14 px-2 text-center" hint={metricHelpHint('views.siteStructure.changePages')}>
               Δ
             </TableHeadCell>
           ) : null}
-          <TableHeadCell className="text-right whitespace-nowrap">{s.colInlinks}</TableHeadCell>
+          <TableHeadCell className="text-right whitespace-nowrap" hint={metricHelpHint('views.siteStructure.colInlinks')}>
+            {s.colInlinks}
+          </TableHeadCell>
           {hasCompare && showCompareCharts ? (
-            <TableHeadCell className="w-14 px-2 text-center" title={s.changeInlinksHint}>
+            <TableHeadCell className="w-14 px-2 text-center" hint={metricHelpHint('views.siteStructure.changeInlinks')}>
               Δ
             </TableHeadCell>
           ) : null}
-          <TableHeadCell className="hidden md:table-cell text-right whitespace-nowrap">{s.colOutlinks}</TableHeadCell>
-          <TableHeadCell className="hidden lg:table-cell text-right whitespace-nowrap">{s.colAvgWords}</TableHeadCell>
-          <TableHeadCell className="text-right whitespace-nowrap">{s.colAvgRt}</TableHeadCell>
-          <TableHeadCell className="hidden sm:table-cell text-right whitespace-nowrap">{s.colPerf}</TableHeadCell>
-          <TableHeadCell className="hidden lg:table-cell text-right whitespace-nowrap">{s.colSeo}</TableHeadCell>
+          <TableHeadCell className="hidden md:table-cell text-right whitespace-nowrap" hint={metricHelpHint('shared.outlinks')}>
+            {s.colOutlinks}
+          </TableHeadCell>
+          <TableHeadCell className="hidden lg:table-cell text-right whitespace-nowrap" hint={metricHelpHint('shared.avgWords')}>
+            {s.colAvgWords}
+          </TableHeadCell>
+          <TableHeadCell className="text-right whitespace-nowrap" hint={metricHelpHint('shared.responseTime')}>
+            {s.colAvgRt}
+          </TableHeadCell>
+          <TableHeadCell className="hidden sm:table-cell text-right whitespace-nowrap" hint={metricHelpHint('views.siteStructure.avgPerf')}>
+            {s.colPerf}
+          </TableHeadCell>
+          <TableHeadCell className="hidden lg:table-cell text-right whitespace-nowrap" hint={metricHelpHint('views.siteStructure.colSeo')}>
+            {s.colSeo}
+          </TableHeadCell>
         </TableRow>
       </TableHead>
       <TableBody>
diff --git a/web/src/lib/metricHelp.test.ts b/web/src/lib/metricHelp.test.ts
new file mode 100644
index 00000000..6f3e2dab
--- /dev/null
+++ b/web/src/lib/metricHelp.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { getMetricHelp, getMetricHelpBody, metricHelpHint } from '@/lib/metricHelp';
+
+describe('getMetricHelp', () => {
+  it('returns shared metric entries', () => {
+    const clicks = getMetricHelp('shared.clicks');
+    expect(clicks?.body).toContain('Search Console');
+  });
+
+  it('returns view-specific entries', () => {
+    const linkScore = getMetricHelp('views.overview.linkScore');
+    expect(linkScore?.body).toMatch(/internal|link/i);
+    expect(getMetricHelp('views.keywordsExplorer.quickWins')?.body).toMatch(/position/i);
+    expect(getMetricHelp('views.jsErrors.consoleTotal')?.body).toMatch(/console/i);
+    expect(getMetricHelp('views.links.chartStatus')?.body).toMatch(/filter/i);
+    expect(getMetricHelp('views.contentAnalytics.wordCountDist')?.body).toBeTruthy();
+  });
+
+  it('returns undefined for unknown paths', () => {
+    expect(getMetricHelp('shared.notARealMetric')).toBeUndefined();
+    expect(getMetricHelp('')).toBeUndefined();
+  });
+
+  it('getMetricHelpBody returns body string only', () => {
+    expect(getMetricHelpBody('shared.ctr')).toContain('click');
+  });
+
+  it('metricHelpHint returns string when no title', () => {
+    const hint = metricHelpHint('shared.sessions');
+    expect(typeof hint === 'string' || (hint && 'body' in hint)).toBe(true);
+  });
+});
+
+describe('normalizeHintContent', () => {
+  it('parses string and object hints', async () => {
+    const { normalizeHintContent } = await import('@/components/HelpHint');
+    expect(normalizeHintContent('plain')).toEqual({ body: 'plain' });
+    expect(normalizeHintContent({ title: 'T', body: 'B' })).toEqual({ title: 'T', body: 'B' });
+    expect(normalizeHintContent(undefined)).toBeUndefined();
+  });
+});
diff --git a/web/src/lib/metricHelp.ts b/web/src/lib/metricHelp.ts
new file mode 100644
index 00000000..74138e28
--- /dev/null
+++ b/web/src/lib/metricHelp.ts
@@ -0,0 +1,33 @@
+import { strings } from '@/lib/strings';
+
+export type MetricHelpEntry = { title?: string; body: string };
+
+type MetricHelpNode = MetricHelpEntry | { [key: string]: MetricHelpNode };
+
+function isEntry(node: MetricHelpNode | undefined): node is MetricHelpEntry {
+  return node != null && typeof node === 'object' && 'body' in node && typeof node.body === 'string';
+}
+
+/** Lookup metric help by dot path, e.g. `shared.clicks` or `views.overview.linkScore`. */
+export function getMetricHelp(key: string): MetricHelpEntry | undefined {
+  const parts = key.split('.').filter(Boolean);
+  let node: MetricHelpNode | undefined = (strings as { metricHelp?: MetricHelpNode }).metricHelp;
+  for (const part of parts) {
+    if (node == null || typeof node !== 'object' || isEntry(node)) return undefined;
+    node = node[part];
+  }
+  return isEntry(node) ? node : undefined;
+}
+
+/** Shorthand: returns body only, or undefined. */
+export function getMetricHelpBody(key: string): string | undefined {
+  return getMetricHelp(key)?.body;
+}
+
+/** For StatCard / table headers: string or structured hint. */
+export function metricHelpHint(key: string): string | MetricHelpEntry | undefined {
+  const entry = getMetricHelp(key);
+  if (!entry) return undefined;
+  if (entry.title) return entry;
+  return entry.body;
+}
diff --git a/web/src/lib/statusDistribution.ts b/web/src/lib/statusDistribution.ts
index b3f8e035..1653e95b 100644
--- a/web/src/lib/statusDistribution.ts
+++ b/web/src/lib/statusDistribution.ts
@@ -94,3 +94,25 @@ export function statusDistributionFromCounts(
 
   return buildFromBuckets(buckets);
 }
+
+/** From per-URL link rows (Link Explorer — full crawl list, ignores table filters). */
+export function statusDistributionFromLinks(
+  links: Array<{ status?: string | number | null }>,
+): StatusDistribution | null {
+  if (!links.length) return null;
+
+  const buckets: Record<keyof typeof STATUS_GROUP_LABELS, number> = {
+    ok2xx: 0,
+    redirect3xx: 0,
+    client4xx: 0,
+    server5xx: 0,
+    error: 0,
+  };
+
+  for (const link of links) {
+    const group = classifyStatusCode(String(link.status ?? '').trim());
+    if (group) buckets[group] += 1;
+  }
+
+  return buildFromBuckets(buckets);
+}
diff --git a/web/src/strings.json b/web/src/strings.json
index 0bd0f082..2974f04b 100644
--- a/web/src/strings.json
+++ b/web/src/strings.json
@@ -1,4 +1,662 @@
 {
+  "metricHelp": {
+    "shared": {
+      "clicks": {
+        "title": "Clicks",
+        "body": "Total clicks from Google Search Console for the selected date range and property. Organic search traffic only."
+      },
+      "impressions": {
+        "title": "Impressions",
+        "body": "How often pages from this site appeared in Google Search results during the selected date range."
+      },
+      "ctr": {
+        "title": "CTR",
+        "body": "Click-through rate: clicks divided by impressions, shown as a percentage. Higher means more searchers clicked after seeing your result."
+      },
+      "position": {
+        "title": "Average position",
+        "body": "Mean ranking position in Google Search for the selected queries or pages. Lower numbers are better (1 is top)."
+      },
+      "sessions": {
+        "title": "Sessions",
+        "body": "GA4 sessions: grouped visits to your site during the selected date range. One user can have multiple sessions."
+      },
+      "activeUsers": {
+        "title": "Active users",
+        "body": "GA4 active users: distinct people who engaged with your site during the selected date range."
+      },
+      "inlinks": {
+        "title": "Inlinks",
+        "body": "Internal links pointing to this URL discovered in this crawl. Counts all qualifying anchor links in scope."
+      },
+      "outlinks": {
+        "title": "Outlinks",
+        "body": "Links from this URL to other URLs (internal or external) found in this crawl."
+      },
+      "linkEdges": {
+        "title": "Link edges",
+        "body": "All discovered anchor relationships in this crawl, including rel attributes (nofollow, sponsored, etc.)."
+      },
+      "healthScore": {
+        "title": "Site health",
+        "body": "Score from 0–100 based on issue category weights in this audit. Higher is better. Reflects technical SEO health, not Google rankings."
+      },
+      "impactScore": {
+        "title": "Impact score",
+        "body": "Prioritization score: priority weight + (GSC clicks × 10) + (GA4 sessions × 5). Weights: Critical 1000, High 100, Medium 10, Low 1. Higher means fix sooner."
+      },
+      "statusCode": {
+        "title": "HTTP status",
+        "body": "Response code returned when this URL was crawled (e.g. 200 OK, 301 redirect, 404 not found)."
+      },
+      "successRate": {
+        "title": "2xx rate",
+        "body": "Share of crawled URLs that returned a successful HTTP 2xx response."
+      },
+      "referringDomains": {
+        "title": "Referring domains",
+        "body": "Domains linking to your site from a Google Search Console Links export. This is a sample, not a complete backlink index."
+      },
+      "sampleLinks": {
+        "title": "Sample links",
+        "body": "Example external links to your site from GSC Links CSV import. Google provides a sample, not all backlinks."
+      },
+      "onSiteFrequency": {
+        "title": "On-site frequency",
+        "body": "Heuristic count estimated from this crawl (page occurrences, anchors, etc.). Not Google search volume."
+      },
+      "fetchMethod": {
+        "title": "Fetch method",
+        "body": "How this URL was retrieved: static HTTP fetch or rendered with a browser (JavaScript). Depends on crawl render mode."
+      },
+      "readingLevel": {
+        "title": "Reading level",
+        "body": "Flesch-Kincaid grade level estimated from visible text on the page. Higher grades mean more advanced reading."
+      },
+      "wordCount": {
+        "title": "Word count",
+        "body": "Visible words extracted from main content in this crawl. Used for thin-content checks."
+      },
+      "crawlDepth": {
+        "title": "Crawl depth",
+        "body": "Minimum number of link hops from the start URL to reach this page in the crawl graph."
+      },
+      "responseTime": {
+        "title": "Response time",
+        "body": "Server response time in milliseconds when this URL was fetched during the crawl."
+      },
+      "lighthouseScore": {
+        "title": "Lighthouse score",
+        "body": "Lab performance or category score from 0–100 from a Lighthouse run on this URL. Not the same as CrUX field data."
+      },
+      "titleCoverage": {
+        "title": "Title coverage",
+        "body": "Percentage of crawled URLs that have a non-empty HTML title element."
+      },
+      "thinPages": {
+        "title": "Thin pages",
+        "body": "URLs flagged as thin content based on word count and body-text thresholds in this audit."
+      },
+      "medianWords": {
+        "title": "Median words",
+        "body": "Median visible word count across crawled pages in this audit."
+      },
+      "avgWords": {
+        "title": "Average words",
+        "body": "Mean visible word count across crawled pages in this audit."
+      },
+      "pageViews": {
+        "title": "Page views",
+        "body": "GA4 screen page views: total times pages were viewed during the selected date range."
+      }
+    },
+    "views": {
+      "home": {
+        "totalBrands": {
+          "body": "Number of properties (client sites) in your portfolio."
+        },
+        "totalUrls": {
+          "body": "Total URLs crawled across all properties in the portfolio summary."
+        },
+        "avgHealth": {
+          "body": "Average site health score (0–100) across properties with audit data."
+        },
+        "urlCount": {
+          "body": "URLs discovered in the latest crawl for this property."
+        },
+        "totalIssues": {
+          "body": "Total issues flagged in the latest audit for this property."
+        },
+        "perfScore": {
+          "body": "Lighthouse performance category score averaged or summarized for this property."
+        },
+        "seoScore": {
+          "body": "Lighthouse SEO category score for this property."
+        },
+        "trendHealth": {
+          "body": "Site health score over recent audit runs for this property."
+        },
+        "trendIssues": {
+          "body": "Total issue count trend across recent audit runs."
+        },
+        "trendUrgent": {
+          "body": "Count of Critical + High priority issues over recent audits."
+        }
+      },
+      "overview": {
+        "linkScore": {
+          "title": "Link score",
+          "body": "Internal link importance from this crawl's link graph (PageRank-style). The bar shows share of the top page in this table. Not a Google ranking signal."
+        },
+        "connections": {
+          "title": "Inlinks + outlinks",
+          "body": "Total internal link connections for this page in the crawl graph (indegree plus outdegree where available)."
+        },
+        "totalUrls": {
+          "body": "URLs included in this audit report from the crawl."
+        },
+        "brokenLinks": {
+          "body": "Internal links pointing to URLs that returned 4xx or 5xx in this crawl."
+        },
+        "missingH1": {
+          "body": "Pages missing an H1 heading or with multiple H1s, per audit rules."
+        },
+        "ogCoverage": {
+          "body": "Share of pages with Open Graph meta tags for social sharing."
+        },
+        "responseP50": {
+          "body": "Median (50th percentile) server response time across crawled URLs."
+        },
+        "urlJoinMatched": {
+          "body": "URLs present in both this crawl and Google Search Console data for the selected property."
+        },
+        "urlJoinCrawlOnly": {
+          "body": "URLs found in the crawl but not in GSC data for the date range (may be non-indexed or low traffic)."
+        },
+        "urlJoinGscOnly": {
+          "body": "URLs with GSC data but not reached in this crawl (outside scope, blocked, or crawl limit)."
+        },
+        "urlJoinGa4Only": {
+          "body": "URLs with GA4 traffic but not matched to crawl or GSC rows in the join."
+        },
+        "twitterCoverage": {
+          "body": "Share of crawled pages with Twitter Card meta tags (twitter:card, twitter:title, etc.)."
+        },
+        "ogImageCoverage": {
+          "body": "Share of crawled pages with an og:image tag for social link previews."
+        },
+        "statusDistChart": {
+          "body": "HTTP status code distribution for all URLs in this crawl (2xx, 3xx, 4xx, 5xx)."
+        },
+        "contentDepthChart": {
+          "body": "Pages grouped by visible word-count bands — used to spot thin content at a glance."
+        },
+        "serverLatencyChart": {
+          "body": "Histogram of server response times (TTFB) measured during the crawl."
+        },
+        "crawlDepthChart": {
+          "body": "How many clicks from the start URL each page sits in the internal link graph."
+        },
+        "titleMetaChart": {
+          "body": "Title and meta description length buckets vs SEO best-practice ranges."
+        },
+        "readingLevelChart": {
+          "body": "Flesch-Kincaid grade-level distribution across crawled page text."
+        },
+        "mimeChart": {
+          "body": "Most common MIME types returned by crawled URLs."
+        },
+        "outlinksChart": {
+          "body": "External outlink counts bucketed per page — links leaving your site."
+        },
+        "topDomainsChart": {
+          "body": "Most-linked external domains from your pages in this crawl."
+        },
+        "lhCategoryChart": {
+          "body": "Average Lighthouse category scores (0–100) across audited sample URLs."
+        }
+      },
+      "links": {
+        "explorerStatus": {
+          "body": "HTTP status code returned when this URL was crawled."
+        },
+        "explorerInlinks": {
+          "body": "Count of internal links pointing to this URL in this crawl. Bar width is relative to the highest count in the current results."
+        },
+        "explorerDepth": {
+          "body": "Shortest path length from the crawl start URL to this page via internal links."
+        },
+        "explorerLoadTime": {
+          "body": "Time to first byte or total fetch time recorded during crawl, in milliseconds."
+        },
+        "explorerWords": {
+          "body": "Extracted visible word count used for content-quality checks."
+        },
+        "explorerExtract": {
+          "body": "Share of page content successfully extracted for analysis (text vs boilerplate)."
+        },
+        "explorerJsErrors": {
+          "body": "JavaScript console errors captured when the page was rendered (if JS crawl mode was used)."
+        },
+        "chartStatus": {
+          "body": "Full crawled URL list by HTTP status — ignores table filters above."
+        },
+        "chartWc": {
+          "body": "Word-count bands matching the word-count filter dropdown in Link Explorer."
+        },
+        "chartLinkScope": {
+          "body": "All link edges discovered in this crawl — internal vs external."
+        },
+        "chartInternalAttrs": {
+          "body": "Internal link rel attributes (nofollow, sponsored, ugc, etc.) from this crawl."
+        },
+        "chartTopAnchors": {
+          "body": "Most-used anchor text on internal links pointing into your site."
+        },
+        "chartTopTargets": {
+          "body": "Pages receiving the most internal inlinks in this crawl."
+        }
+      },
+      "siteStructure": {
+        "urlsInView": {
+          "body": "Total crawled pages under the selected path prefix or site root."
+        },
+        "pathPrefixes": {
+          "body": "Distinct URL path segments (folders) in the structure tree."
+        },
+        "totalInlinks": {
+          "body": "Sum of internal inlinks to pages in the current structure view."
+        },
+        "avgPerf": {
+          "body": "Average Lighthouse performance score for pages in this path segment."
+        },
+        "changePages": {
+          "body": "Change in page count under this path vs the baseline audit in Compare mode."
+        },
+        "changeInlinks": {
+          "body": "Change in total inlinks under this path vs the baseline audit."
+        },
+        "colPath": {
+          "body": "URL path prefix in the crawl tree. Expand folders to drill into nested segments."
+        },
+        "colPages": {
+          "body": "Number of crawled pages rolled up under this path prefix."
+        },
+        "colInlinks": {
+          "body": "Sum of internal inlinks to all pages under this path prefix."
+        },
+        "colSeo": {
+          "body": "Average Lighthouse SEO category score for pages under this path."
+        },
+        "avgResponse": {
+          "body": "Mean server response time in milliseconds across pages in the current structure view."
+        }
+      },
+      "content": {
+        "duplicateCluster": {
+          "body": "Duplicate-content cluster ID from near-duplicate detection in this crawl."
+        },
+        "duplicateRepresentative": {
+          "body": "Canonical or chosen representative URL for this duplicate cluster."
+        },
+        "duplicateUrlCount": {
+          "body": "Number of URLs grouped as near-duplicates of the representative page."
+        },
+        "metaDescLength": {
+          "body": "Meta description length in characters. Short or long descriptions may hurt CTR in search."
+        },
+        "h1Count": {
+          "body": "Number of H1 headings on the page. SEO best practice is exactly one H1."
+        },
+        "contentLength": {
+          "body": "Visible body text length in characters. Used to flag thin-content pages."
+        }
+      },
+      "contentAnalytics": {
+        "twitterCoverage": {
+          "body": "Share of crawled pages with Twitter Card meta tags for social previews."
+        },
+        "crawlHealth": {
+          "body": "HTTP status mix and response-time distribution from this crawl — not Google rankings."
+        },
+        "onPageQuality": {
+          "body": "On-page SEO issue counts, optimal-range coverage, and thin-content signals from the crawl."
+        },
+        "contentMetrics": {
+          "body": "Word counts, reading levels, HTML-to-text ratio, and on-site keyword frequency from extracted page text."
+        },
+        "onPageSignals": {
+          "body": "Title tag, meta description, and H1 heading quality buckets across crawled pages."
+        },
+        "socialMetaCoverage": {
+          "body": "Open Graph and Twitter Card tag coverage for social sharing previews."
+        },
+        "siteArchitecture": {
+          "body": "How pages are distributed by crawl depth — hops from the start URL via internal links."
+        },
+        "thinSmallBody": {
+          "body": "Pages flagged as thin by visible character count thresholds (separate from the under-300-word list)."
+        },
+        "wordCountDist": {
+          "body": "Pages grouped by visible word-count bands from extracted crawl text."
+        },
+        "readingLevelDist": {
+          "body": "Pages grouped by Flesch-Kincaid reading grade estimated from visible text."
+        },
+        "contentHtmlRatio": {
+          "body": "Pages grouped by ratio of visible text to total HTML size — low ratios may indicate boilerplate-heavy pages."
+        },
+        "topKeywords": {
+          "body": "Most frequent on-site keywords from extracted page text in this crawl — not Google search volume."
+        },
+        "wordCountLadder": {
+          "body": "Word-count percentiles across crawled pages (min through max) to show content depth spread."
+        },
+        "wordCountPercentiles": {
+          "body": "Statistical word-count summary (min, quartiles, median, mean, max) across crawled pages."
+        },
+        "urlsByStatus": {
+          "body": "HTTP status code mix for all URLs in this crawl."
+        },
+        "responseTimeDist": {
+          "body": "Pages grouped by server response-time buckets measured during the crawl."
+        },
+        "issuesByType": {
+          "body": "Count of crawled URLs flagged for each on-page SEO issue category."
+        },
+        "seoOptimalRanges": {
+          "body": "Share of pages whose title, meta description, and H1 fall in recommended length or count ranges."
+        },
+        "thinSignals": {
+          "body": "Comparison of thin-content signals: under 300 words vs small visible body character count."
+        },
+        "h1Dist": {
+          "body": "Pages grouped by H1 heading count — SEO best practice is exactly one H1 per page."
+        },
+        "titleTagQuality": {
+          "body": "Title tag length buckets (too short, optimal, too long) across crawled pages."
+        },
+        "metaDescQuality": {
+          "body": "Meta description length buckets across crawled pages."
+        },
+        "titleVsMetaBuckets": {
+          "body": "Combined title and meta description quality buckets for on-page SEO coverage."
+        },
+        "seoOptimalVsGapCounts": {
+          "body": "Pages meeting vs missing optimal title, meta, and H1 ranges side by side."
+        },
+        "missingSocialCompare": {
+          "body": "Pages missing Open Graph or Twitter Card tags compared to pages that have them."
+        },
+        "crawlDepthDist": {
+          "body": "Pages grouped by crawl depth — link hops from the start URL in the internal link graph."
+        }
+      },
+      "gallery": {
+        "uniqueImages": {
+          "body": "Distinct image URLs discovered in this crawl (on-page, Open Graph, and Twitter images combined)."
+        },
+        "shownFiltered": {
+          "body": "Images currently visible after source-type and header search filters."
+        }
+      },
+      "network": {
+        "legendOk": {
+          "body": "Crawled pages that returned a successful HTTP 2xx response."
+        },
+        "legendBroken": {
+          "body": "Crawled pages that returned HTTP 4xx or 5xx errors."
+        },
+        "legendLink": {
+          "body": "Internal anchor link between two pages in the crawl graph."
+        }
+      },
+      "indexation": {
+        "crawled": {
+          "body": "URLs successfully crawled in this audit."
+        },
+        "sitemap": {
+          "body": "URLs listed in the site's XML sitemap(s) discovered during the audit."
+        },
+        "gscPages": {
+          "body": "URLs with impressions in Google Search Console for the selected period."
+        },
+        "sitemapOnly": {
+          "body": "URLs in the sitemap but not found in the crawl (orphaned sitemap entries)."
+        }
+      },
+      "subdomains": {
+        "apex": {
+          "body": "Primary registered domain (apex) for this property's subdomain inventory."
+        },
+        "inScopeHosts": {
+          "body": "Hosts included in this audit scope (crawl and/or GSC data)."
+        },
+        "gscNotCrawled": {
+          "body": "Hosts with GSC data but no URLs reached in this crawl — often separate subdomains or out-of-scope properties."
+        },
+        "outOfScope": {
+          "body": "Hosts discovered via certificate transparency or DNS but excluded from this crawl."
+        },
+        "colHost": {
+          "body": "Subdomain or hostname discovered for this property."
+        },
+        "colSources": {
+          "body": "Where this host was seen: crawl, GSC, certificate transparency (crt.sh), etc."
+        },
+        "colCrawl": {
+          "body": "Whether any URL on this host was reached in the latest crawl."
+        },
+        "colGsc": {
+          "body": "Whether Search Console reports data for this host."
+        },
+        "colCrawlUrls": {
+          "body": "Count of crawled URLs on this host in the latest audit."
+        },
+        "colGscUrls": {
+          "body": "Count of URLs with GSC impressions on this host in the selected period."
+        }
+      },
+      "keywords": {
+        "serpCompetition": {
+          "body": "Estimated SERP competition from optional SerpAPI overlay. Heuristic, not official keyword difficulty."
+        },
+        "gscClicks": {
+          "body": "Search Console clicks attributed to this query or query–page pair in the selected range."
+        },
+        "gscImpressions": {
+          "body": "Search Console impressions for this query in the selected date range."
+        },
+        "gscCtr": {
+          "body": "Click-through rate from Search Console for this query (clicks ÷ impressions)."
+        },
+        "gscPosition": {
+          "body": "Average ranking position in Google Search for this query. Lower is better."
+        }
+      },
+      "keywordsExplorer": {
+        "totalKeywords": {
+          "body": "All keywords in this audit from crawl seeds, expansion sources, and Search Console."
+        },
+        "gscKeywords": {
+          "body": "Keywords with measured ranking data from Google Search Console in the selected range."
+        },
+        "quickWins": {
+          "body": "Keywords in positions 4–20 with meaningful estimated click upside if improved to top 3."
+        },
+        "cannibalisation": {
+          "body": "Queries ranking on multiple URLs — consolidate or canonicalise to one primary page."
+        },
+        "lostClicks": {
+          "body": "Keywords that lost clicks compared to the prior Search Console period."
+        },
+        "questions": {
+          "body": "Question-style queries (who, what, how, etc.) useful for FAQ and content ideas."
+        }
+      },
+      "lighthouse": {
+        "categoryScores": {
+          "body": "Lighthouse category scores (Performance, Accessibility, Best Practices, SEO) from 0–100 for audited URLs."
+        },
+        "cruxLcp": {
+          "body": "Largest Contentful Paint from Chrome UX Report field data (real users). Good: ≤2.5s."
+        },
+        "cruxInp": {
+          "body": "Interaction to Next Paint from CrUX field data. Good: ≤200ms."
+        },
+        "cruxCls": {
+          "body": "Cumulative Layout Shift from CrUX field data. Good: ≤0.1."
+        }
+      },
+      "compare": {
+        "metricDelta": {
+          "body": "Difference between baseline and current audit values. Positive or negative depends on the metric."
+        },
+        "currentValue": {
+          "body": "Value from the latest (current) audit in this comparison."
+        },
+        "baselineValue": {
+          "body": "Value from the baseline audit you selected for comparison."
+        },
+        "newUrls": {
+          "body": "URLs present in the current crawl but not in the baseline audit."
+        },
+        "removedUrls": {
+          "body": "URLs in the baseline audit but missing from the current crawl."
+        }
+      },
+      "jsErrors": {
+        "consolePages": {
+          "body": "Pages where at least one browser console message was recorded during crawl."
+        },
+        "consoleTotal": {
+          "body": "Total browser console error messages captured across all rendered pages in this crawl."
+        },
+        "exceptionPages": {
+          "body": "Pages where an uncaught JavaScript exception was recorded during browser render."
+        },
+        "exceptionTotal": {
+          "body": "Total uncaught JavaScript exceptions captured during this crawl."
+        },
+        "renderMode": {
+          "body": "Crawl render mode for this audit: static HTML only, JavaScript rendering, or auto."
+        }
+      },
+      "logAnalyzer": {
+        "parsedLines": {
+          "body": "Log file lines successfully parsed from your upload."
+        },
+        "uniquePaths": {
+          "body": "Distinct URL paths found in the uploaded access log sample."
+        },
+        "googlebotHits": {
+          "body": "Log lines identified as Googlebot requests in the uploaded sample."
+        },
+        "logOnly": {
+          "body": "URLs seen in access logs but not in the crawl (may be blocked or out of scope)."
+        },
+        "crawlOnly": {
+          "body": "URLs crawled but not seen in the uploaded log sample."
+        }
+      },
+      "redirects": {
+        "httpStatus": {
+          "body": "HTTP status code returned for the redirect response (e.g. 301 permanent, 302 temporary)."
+        }
+      },
+      "techStack": {
+        "pagesDetected": {
+          "body": "Number of crawled pages where this technology fingerprint was detected."
+        },
+        "categoryCount": {
+          "body": "Technologies detected in this category across the crawl, counted by distinct fingerprints."
+        },
+        "detectedChart": {
+          "body": "Pages per detected technology — bar length shows how many crawled URLs matched each fingerprint."
+        }
+      },
+      "contacts": {
+        "sources": {
+          "body": "Where this contact detail was discovered (e.g. schema.org JSON-LD, visible page text, meta tags)."
+        }
+      },
+      "backlinks": {
+        "referringDomain": {
+          "body": "External domain linking to your site in the GSC Links sample — not a complete backlink index."
+        },
+        "linkCount": {
+          "body": "Number of sample links from this referring domain in the GSC Links export."
+        },
+        "targetPages": {
+          "body": "Distinct pages on your site linked from this referring domain in the sample."
+        },
+        "targetPage": {
+          "body": "Your page receiving external links in the GSC Links sample."
+        },
+        "linkingSites": {
+          "body": "Count of distinct referring domains linking to this page in the sample."
+        },
+        "anchorText": {
+          "body": "Anchor text used in external links to your site in the GSC Links sample."
+        },
+        "sourcePage": {
+          "body": "External URL linking to your site in the GSC Links sample."
+        },
+        "linkedPages": {
+          "body": "Distinct pages on your site that received external links in the GSC Links sample."
+        },
+        "latestLinks": {
+          "body": "Most recently discovered sample backlinks from GSC Links export."
+        }
+      },
+      "security": {
+        "severityCount": {
+          "body": "Security findings at this severity from HTTP headers, TLS, and optional probes in this audit."
+        },
+        "findingType": {
+          "body": "Category of security check that produced this finding (headers, TLS, mixed content, etc.)."
+        },
+        "findingsBySeverityChart": {
+          "body": "Security findings grouped by severity (Critical, High, Medium, Low, Info) from this audit scan."
+        },
+        "findingsByTypeChart": {
+          "body": "Count of findings per security check type (headers, TLS, cookies, etc.)."
+        }
+      },
+      "textContentAnalysis": {
+        "byPageSection": {
+          "body": "Per-URL extracted text stats — word counts and reading levels from this crawl."
+        },
+        "analyticsSection": {
+          "body": "Site-wide text analytics: keyword frequency, clusters, and reading-level distribution."
+        },
+        "thWord": {
+          "body": "Keyword or phrase extracted from visible page text in this crawl."
+        },
+        "thTotalCount": {
+          "body": "Estimated on-site frequency — heuristic from crawl text, not Google search volume."
+        },
+        "thPageCount": {
+          "body": "Number of crawled pages where this term appears."
+        },
+        "thCluster": {
+          "body": "Semantic topic cluster grouping related keywords from crawl + NLP analysis."
+        },
+        "wordCountDist": {
+          "body": "Pages grouped by visible word-count bands from extracted crawl text."
+        },
+        "readingLevelDist": {
+          "body": "Pages grouped by Flesch-Kincaid reading grade estimated from visible text."
+        },
+        "contentHtmlRatio": {
+          "body": "Pages grouped by ratio of visible text to total HTML size."
+        },
+        "wordCountLadder": {
+          "body": "Word-count percentiles across crawled pages (min through max)."
+        }
+      }
+    }
+  },
   "app": {
     "loading": "Loading…",
     "failedTitle": "Failed to load report",
diff --git a/web/src/types/components.ts b/web/src/types/components.ts
index 090749ee..de5c0fb6 100644
--- a/web/src/types/components.ts
+++ b/web/src/types/components.ts
@@ -5,6 +5,8 @@ import type { KeywordHistoryRow } from '@/types/api';
 export interface TableColumn {
   key: string;
   label: string;
+  /** Metric help tooltip content for column header. */
+  hint?: string | { title?: string; body: string };
   render?: (v: unknown, row?: Record<string, unknown>) => ReactNode;
 }
 
diff --git a/web/src/views/Backlinks.tsx b/web/src/views/Backlinks.tsx
index 404dcfb7..eca96bc1 100644
--- a/web/src/views/Backlinks.tsx
+++ b/web/src/views/Backlinks.tsx
@@ -115,15 +115,17 @@ export default function Backlinks(_props: ViewProps) {
 
   const domainColumns = useMemo(
     (): TableColumn[] => [
-      { key: 'site', label: vb.table.site, render: (v) => <span className="font-mono text-xs">{String(v ?? '')}</span> },
+      { key: 'site', label: vb.table.site, hint: 'views.backlinks.referringDomain', render: (v) => <span className="font-mono text-xs">{String(v ?? '')}</span> },
       {
         key: 'link_count',
         label: vb.table.links,
+        hint: 'views.backlinks.linkCount',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'target_page_count',
         label: vb.table.targetPages,
+        hint: 'views.backlinks.targetPages',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
     ],
@@ -135,6 +137,7 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'target_page',
         label: vb.table.targetPage,
+        hint: 'views.backlinks.targetPage',
         render: (v, row) => {
           const url = String(v ?? '');
           const inCrawl = row?.target_in_crawl === true;
@@ -153,11 +156,13 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'link_count',
         label: vb.table.links,
+        hint: 'views.backlinks.linkCount',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'linking_site_count',
         label: vb.table.linkingSites,
+        hint: 'views.backlinks.linkingSites',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
     ],
@@ -169,6 +174,7 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'anchor_text',
         label: vb.table.anchorText,
+        hint: 'views.backlinks.anchorText',
         render: (v) => (
           <span className="text-sm">{String(v ?? '').trim() || '—'}</span>
         ),
@@ -176,6 +182,7 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'link_count',
         label: vb.table.links,
+        hint: 'views.backlinks.linkCount',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
     ],
@@ -187,6 +194,7 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'source_page',
         label: vb.table.sourcePage,
+        hint: 'views.backlinks.sourcePage',
         render: (v) => (
           <a
             href={String(v ?? '')}
@@ -201,6 +209,7 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'target_page',
         label: vb.table.targetPage,
+        hint: 'views.backlinks.targetPage',
         render: (v, row) => {
           const url = String(v ?? '');
           const inspectHref =
@@ -220,6 +229,7 @@ export default function Backlinks(_props: ViewProps) {
       {
         key: 'anchor_text',
         label: vb.table.anchorText,
+        hint: 'views.backlinks.anchorText',
         render: (v) => <span className="text-sm">{String(v ?? '').trim() || '—'}</span>,
       },
       {
diff --git a/web/src/views/CompareReports.tsx b/web/src/views/CompareReports.tsx
index 5caaa229..dd0c25b5 100644
--- a/web/src/views/CompareReports.tsx
+++ b/web/src/views/CompareReports.tsx
@@ -13,6 +13,7 @@ import {
 } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { formatReportGeneratedAt } from '../lib/reportTimestamps';
 import {
   PageLayout,
@@ -26,6 +27,7 @@ import {
   TableRow,
   TableCell,
   Badge,
+  LabelWithHint,
 } from '../components';
 import ReportCompareControls from '../components/ReportCompareControls';
 import { CompareMetricCard } from '../components/compare/CompareDeltaBadge';
@@ -446,11 +448,15 @@ export default function CompareReports({ searchQuery = '' }: ViewProps) {
                 </div>
                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
                   <Card className="p-4">
-                    <div className="text-muted-foreground text-xs uppercase tracking-wider">{vo.newUrls}</div>
+                    <div className="text-muted-foreground text-xs uppercase tracking-wider">
+                      <LabelWithHint label={vo.newUrls} helpKey="views.compare.newUrls" />
+                    </div>
                     <div className="text-2xl font-bold text-emerald-700 dark:text-emerald-400">{urlLists.newUrls.length}</div>
                   </Card>
                   <Card className="p-4">
-                    <div className="text-muted-foreground text-xs uppercase tracking-wider">{vo.removedUrls}</div>
+                    <div className="text-muted-foreground text-xs uppercase tracking-wider">
+                      <LabelWithHint label={vo.removedUrls} helpKey="views.compare.removedUrls" />
+                    </div>
                     <div className="text-2xl font-bold text-rose-700 dark:text-rose-400">{urlLists.removedUrls.length}</div>
                   </Card>
                   <Card className="p-4">
@@ -520,8 +526,8 @@ export default function CompareReports({ searchQuery = '' }: ViewProps) {
                     <TableHead sticky>
                       <TableRow>
                         <TableHeadCell>{vc.statusColUrl}</TableHeadCell>
-                        <TableHeadCell>{vc.statusColBefore}</TableHeadCell>
-                        <TableHeadCell>{vc.statusColAfter}</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.baselineValue')}>{vc.statusColBefore}</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.currentValue')}>{vc.statusColAfter}</TableHeadCell>
                       </TableRow>
                     </TableHead>
                     <TableBody striped>
@@ -562,9 +568,9 @@ export default function CompareReports({ searchQuery = '' }: ViewProps) {
                     <TableHead>
                       <TableRow>
                         <TableHeadCell>Category</TableHeadCell>
-                        <TableHeadCell>Current</TableHeadCell>
-                        <TableHeadCell>Baseline</TableHeadCell>
-                        <TableHeadCell>Δ</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.currentValue')}>Current</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.baselineValue')}>Baseline</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.metricDelta')}>Δ</TableHeadCell>
                       </TableRow>
                     </TableHead>
                     <TableBody striped>
@@ -594,9 +600,9 @@ export default function CompareReports({ searchQuery = '' }: ViewProps) {
                     <TableHead>
                       <TableRow>
                         <TableHeadCell>Signal</TableHeadCell>
-                        <TableHeadCell>Current</TableHeadCell>
-                        <TableHeadCell>Baseline</TableHeadCell>
-                        <TableHeadCell>Δ</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.currentValue')}>Current</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.baselineValue')}>Baseline</TableHeadCell>
+                        <TableHeadCell hint={metricHelpHint('views.compare.metricDelta')}>Δ</TableHeadCell>
                       </TableRow>
                     </TableHead>
                     <TableBody striped>
diff --git a/web/src/views/Contacts.tsx b/web/src/views/Contacts.tsx
index 8041de33..11fcbfb5 100644
--- a/web/src/views/Contacts.tsx
+++ b/web/src/views/Contacts.tsx
@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { Contact2, ExternalLink } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import {
   PageLayout,
   PageHeader,
@@ -60,7 +61,7 @@ function ContactSectionTable({
           <TableHead>
             <TableRow>
               <TableHeadCell>{vc.colValue}</TableHeadCell>
-              <TableHeadCell>{vc.colSources}</TableHeadCell>
+              <TableHeadCell hint={metricHelpHint('views.contacts.sources')}>{vc.colSources}</TableHeadCell>
               <TableHeadCell>{vc.colPages}</TableHeadCell>
             </TableRow>
           </TableHead>
diff --git a/web/src/views/Content.tsx b/web/src/views/Content.tsx
index bb462e02..2ab55286 100644
--- a/web/src/views/Content.tsx
+++ b/web/src/views/Content.tsx
@@ -5,6 +5,7 @@ import type { TooltipItem } from 'chart.js';
 import { ExternalLink, CheckCircle2, FileText, Copy, BarChart3, List } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { PageLayout, PageHeader, Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, Button, ViewTabs, ViewTabPanel } from '../components';
 import type { ViewTabItem } from '../components';
 import { palette } from '../utils/chartPalette';
@@ -149,9 +150,9 @@ export default function Content({ searchQuery = '' }: ViewProps) {
                 <Table>
                   <TableHead sticky>
                     <tr>
-                      <TableHeadCell>{vc.colCluster}</TableHeadCell>
-                      <TableHeadCell>{vc.colRepresentative}</TableHeadCell>
-                      <TableHeadCell className="text-right">{vc.colUrls}</TableHeadCell>
+                      <TableHeadCell hint={metricHelpHint('views.content.duplicateCluster')}>{vc.colCluster}</TableHeadCell>
+                      <TableHeadCell hint={metricHelpHint('views.content.duplicateRepresentative')}>{vc.colRepresentative}</TableHeadCell>
+                      <TableHeadCell className="text-right" hint={metricHelpHint('views.content.duplicateUrlCount')}>{vc.colUrls}</TableHeadCell>
                       <TableHeadCell className="w-36" />
                     </tr>
                   </TableHead>
@@ -298,13 +299,13 @@ export default function Content({ searchQuery = '' }: ViewProps) {
                     {vc.tablePage}
                   </TableHeadCell>
                   {(filter === 'meta_desc_short' || filter === 'meta_desc_long') && (
-                    <TableHeadCell className="hidden md:table-cell text-center px-3 sm:px-4">{vc.tableLength}</TableHeadCell>
+                    <TableHeadCell className="hidden md:table-cell text-center px-3 sm:px-4" hint={metricHelpHint('views.content.metaDescLength')}>{vc.tableLength}</TableHeadCell>
                   )}
                   {filter === 'multiple_h1' && (
-                    <TableHeadCell className="hidden md:table-cell text-center px-3 sm:px-4">{vc.tableH1Count}</TableHeadCell>
+                    <TableHeadCell className="hidden md:table-cell text-center px-3 sm:px-4" hint={metricHelpHint('views.content.h1Count')}>{vc.tableH1Count}</TableHeadCell>
                   )}
                   {filter === 'thin_content' && (
-                    <TableHeadCell className="hidden md:table-cell text-center px-3 sm:px-4">{vc.tableChars}</TableHeadCell>
+                    <TableHeadCell className="hidden md:table-cell text-center px-3 sm:px-4" hint={metricHelpHint('views.content.contentLength')}>{vc.tableChars}</TableHeadCell>
                   )}
                 </tr>
               </TableHead>
diff --git a/web/src/views/ContentAnalytics.tsx b/web/src/views/ContentAnalytics.tsx
index daa47fc8..baa852e4 100644
--- a/web/src/views/ContentAnalytics.tsx
+++ b/web/src/views/ContentAnalytics.tsx
@@ -1,5 +1,5 @@
 import type { Chart, TooltipItem } from 'chart.js';
-import { useState, useMemo, type ComponentType, type ReactNode } from 'react';
+import { useState, useMemo } from 'react';
 import { useUrlTab } from '@/hooks/useUrlTab';
 import type {
   ContentAnalyticsData,
@@ -40,7 +40,8 @@ import {
 } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
-import { PageLayout, PageHeader, Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, ViewTabs, ViewTabPanel, StatCard } from '../components';
+import { metricHelpHint } from '@/lib/metricHelp';
+import { PageLayout, PageHeader, Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, ViewTabs, ViewTabPanel, StatCard, SectionHeader, ChartTitleWithHint } from '../components';
 import { StatusDistributionChart, CoverageBar, ChartAccessibleFallback, ChartPanel } from '../components/charts';
 import { crawledUrlCount } from '@/lib/crawlCounts';
 import { statusDistributionFromSummary } from '../lib/statusDistribution';
@@ -200,29 +201,6 @@ function qualityBarColors(labels: string[]) {
   });
 }
 
-function SectionHeader({
-  icon,
-  title,
-  description,
-}: {
-  icon: ComponentType<{ className?: string }>;
-  title: ReactNode;
-  description?: ReactNode;
-}) {
-  const Icon = icon;
-  return (
-    <div className="flex items-start gap-3 border-b border-muted pb-4">
-      <div className="p-2 bg-brand-800 border border-default rounded-lg">
-        <Icon className="h-5 w-5 text-link" />
-      </div>
-      <div>
-        <h2 className="text-lg font-bold text-bright">{title}</h2>
-        {description && <p className="text-sm text-muted-foreground mt-0.5">{description}</p>}
-      </div>
-    </div>
-  );
-}
-
 function ThinPagesSection({ pages }: { pages: ThinPageEntry[] }) {
   const [open, setOpen] = useState(false);
   const vca = strings.views.contentAnalytics;
@@ -539,58 +517,49 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
         <ViewTabPanel idPrefix="content-analytics" tabId="summary" className="space-y-6">
       {/* KPI stat cards */}
       <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
-        <Card shadow>
-          <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <BookOpen className="h-4 w-4" /> {vca.meanWords}
-          </div>
-          <div className="text-3xl font-bold text-bright">
-            {wcStats.mean != null ? Math.round(wcStats.mean).toLocaleString() : sj.emDash}
-          </div>
-          <div className="text-xs text-muted-foreground mt-1">{vca.perPage}</div>
-        </Card>
-
-        <Card shadow>
-          <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <FileText className="h-4 w-4" /> {vca.medianWords}
-          </div>
-          <div className="text-3xl font-bold text-bright">
-            {wcStats.median != null ? Math.round(wcStats.median).toLocaleString() : sj.emDash}
-          </div>
-          <div className="text-xs text-muted-foreground mt-1">{vca.perPage}</div>
-        </Card>
-
-        <Card shadow>
-          <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <Globe className="h-4 w-4 text-link" /> {vca.ogCoverage}
-          </div>
-          <div className="text-3xl font-bold text-link">
-            {sc.og_coverage_pct != null ? `${sc.og_coverage_pct}%` : sj.emDash}
-          </div>
-          <div className="text-xs text-muted-foreground mt-1">{vca.ogTags}</div>
-        </Card>
-
-        <Card shadow>
-          <div className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2">
-            <Share2 className="h-4 w-4 text-sky-700 dark:text-sky-400" /> {vca.twitterCoverage}
-          </div>
-          <div className="text-3xl font-bold text-sky-700 dark:text-sky-400">
-            {sc.twitter_coverage_pct != null ? `${sc.twitter_coverage_pct}%` : sj.emDash}
-          </div>
-          <div className="text-xs text-muted-foreground mt-1">{vca.twitterTags}</div>
-        </Card>
-
-        <Card
+        <StatCard
+          label={vca.meanWords}
+          value={wcStats.mean != null ? Math.round(wcStats.mean).toLocaleString() : sj.emDash}
+          sub={vca.perPage}
+          icon={<BookOpen className="h-4 w-4" aria-hidden />}
+          hint={metricHelpHint('shared.avgWords')}
           shadow
-          className={hasThinPages ? 'ring-1 ring-amber-500/20 border-amber-900/30' : ''}
-        >
-          <div className={`text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2 ${hasThinPages ? 'text-amber-800/90 dark:text-amber-400/80' : 'text-muted-foreground'}`}>
-            <AlertTriangle className={`h-4 w-4 ${hasThinPages ? 'text-amber-700 dark:text-amber-400' : ''}`} /> {vca.thinPages}
-          </div>
-          <div className={`text-3xl font-bold ${hasThinPages ? 'text-amber-700 dark:text-amber-400' : 'text-muted-foreground'}`}>
-            {thinPages.length}
-          </div>
-          <div className="text-xs text-muted-foreground mt-1">{vca.under300}</div>
-        </Card>
+        />
+        <StatCard
+          label={vca.medianWords}
+          value={wcStats.median != null ? Math.round(wcStats.median).toLocaleString() : sj.emDash}
+          sub={vca.perPage}
+          icon={<FileText className="h-4 w-4" aria-hidden />}
+          hint={metricHelpHint('shared.medianWords')}
+          shadow
+        />
+        <StatCard
+          label={vca.ogCoverage}
+          value={sc.og_coverage_pct != null ? `${sc.og_coverage_pct}%` : sj.emDash}
+          sub={vca.ogTags}
+          icon={<Globe className="h-4 w-4 text-link" aria-hidden />}
+          hint={metricHelpHint('views.overview.ogCoverage')}
+          shadow
+          className="[&_.text-2xl]:text-link"
+        />
+        <StatCard
+          label={vca.twitterCoverage}
+          value={sc.twitter_coverage_pct != null ? `${sc.twitter_coverage_pct}%` : sj.emDash}
+          sub={vca.twitterTags}
+          icon={<Share2 className="h-4 w-4 text-sky-700 dark:text-sky-400" aria-hidden />}
+          hint={metricHelpHint('views.contentAnalytics.twitterCoverage')}
+          shadow
+          className="[&_.text-2xl]:text-sky-700 [&_.text-2xl]:dark:text-sky-400"
+        />
+        <StatCard
+          label={vca.thinPages}
+          value={thinPages.length}
+          sub={vca.under300}
+          icon={<AlertTriangle className={`h-4 w-4 ${hasThinPages ? 'text-amber-700 dark:text-amber-400' : ''}`} aria-hidden />}
+          hint={metricHelpHint('shared.thinPages')}
+          shadow
+          className={hasThinPages ? 'ring-1 ring-amber-500/20 border-amber-900/30 [&_.text-2xl]:text-amber-700 [&_.text-2xl]:dark:text-amber-400' : ''}
+        />
       </div>
 
       {richResultsRows.length > 0 ? (
@@ -769,11 +738,11 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
         <ViewTabPanel idPrefix="content-analytics" tabId="analytics" className="space-y-6">
       {(hasStatusChart || hasRtDist) && (
         <div className="space-y-6">
-          <SectionHeader icon={Activity} title={vca.crawlHealth} />
+          <SectionHeader icon={Activity} title={vca.crawlHealth} hint={metricHelpHint('views.contentAnalytics.crawlHealth')} />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {hasStatusChart && (
               <Card padding="tight">
-                <h3 className="text-sm font-bold text-foreground mb-1">{vca.urlsByStatus}</h3>
+                <ChartTitleWithHint title={vca.urlsByStatus} helpKey="views.contentAnalytics.urlsByStatus" className="mb-1" />
                 <p className="text-xs text-muted-foreground mb-3">
                   {vca.totalCrawled}{' '}
                   <span className="text-foreground font-semibold">{crawledCount.toLocaleString()}</span>
@@ -789,7 +758,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
             )}
             {hasRtDist && (
               <Card padding="tight">
-                <h3 className="text-sm font-bold text-foreground mb-1">{vca.responseTimeDist}</h3>
+                <ChartTitleWithHint title={vca.responseTimeDist} helpKey="views.contentAnalytics.responseTimeDist" className="mb-1" />
                 <p className="text-xs text-muted-foreground mb-3">
                   Pages per latency band
                   {rtStats.p50 != null && (
@@ -828,11 +797,11 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
       {(hasIssueBar || hasSeoOptimalBar || hasThinCompare) && (
         <div className="space-y-6">
-          <SectionHeader icon={ListChecks} title={vca.onPageQuality} />
+          <SectionHeader icon={ListChecks} title={vca.onPageQuality} hint={metricHelpHint('views.contentAnalytics.onPageQuality')} />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {hasIssueBar && (
               <Card padding="tight">
-                <h3 className="text-sm font-bold text-foreground mb-3">URLs flagged by issue type</h3>
+                <ChartTitleWithHint title="URLs flagged by issue type" helpKey="views.contentAnalytics.issuesByType" />
                 <ChartPanel heightClass="h-80">
                   <Bar
                     data={{
@@ -853,7 +822,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
             )}
             {hasSeoOptimalBar && (
               <Card padding="tight">
-                <h3 className="text-sm font-bold text-foreground mb-3">Pages in “good” ranges</h3>
+                <ChartTitleWithHint title='Pages in “good” ranges' helpKey="views.contentAnalytics.seoOptimalRanges" />
                 <ChartPanel>
                   <Bar
                     data={{
@@ -878,17 +847,19 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
             )}
             {hasThinCompare && (
               <Card padding="tight" className={hasIssueBar && hasSeoOptimalBar ? 'lg:col-span-2' : ''}>
-                <h3 className="text-sm font-bold text-foreground mb-3">{vca.thinSignals}</h3>
+                <ChartTitleWithHint title={vca.thinSignals} helpKey="views.contentAnalytics.thinSignals" />
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-lg">
                   <StatCard
                     label={vca.thinUnder300}
                     value={thinByWords.toLocaleString()}
                     sub={sj.pages}
+                    hint={metricHelpHint('shared.thinPages')}
                   />
                   <StatCard
                     label={vca.thinSmallBody}
                     value={thinByChars.toLocaleString()}
                     sub={sj.pages}
+                    hint={metricHelpHint('views.contentAnalytics.thinSmallBody')}
                   />
                 </div>
               </Card>
@@ -918,10 +889,10 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
       {/* Content Metrics section */}
       <div className="space-y-6">
-        <SectionHeader icon={BarChart2} title={vca.contentMetrics} />
+        <SectionHeader icon={BarChart2} title={vca.contentMetrics} hint={metricHelpHint('views.contentAnalytics.contentMetrics')} />
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <Card padding="tight">
-            <h3 className="text-sm font-bold text-foreground mb-3">{vca.wordCountDist}</h3>
+            <ChartTitleWithHint title={vca.wordCountDist} helpKey="views.contentAnalytics.wordCountDist" />
             <ChartPanel heightClass="h-64">
               {wcLabels.length > 0 ? (
                 <Bar
@@ -936,7 +907,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
           </Card>
 
           <Card padding="tight">
-            <h3 className="text-sm font-bold text-foreground mb-3">{vca.readingLevelDist}</h3>
+            <ChartTitleWithHint title={vca.readingLevelDist} helpKey="views.contentAnalytics.readingLevelDist" />
             <ChartPanel heightClass="h-64">
               {rlLabels.length > 0 ? (
                 <Bar
@@ -954,7 +925,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
           </Card>
 
           <Card padding="tight">
-            <h3 className="text-sm font-bold text-foreground mb-3">{vca.contentHtmlRatio}</h3>
+            <ChartTitleWithHint title={vca.contentHtmlRatio} helpKey="views.contentAnalytics.contentHtmlRatio" />
             <ChartPanel heightClass="h-64">
               {crLabels.length > 0 ? (
                 <Bar
@@ -969,7 +940,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
           </Card>
 
           <Card padding="tight">
-            <h3 className="text-sm font-bold text-foreground mb-3">{vca.topKeywords}</h3>
+            <ChartTitleWithHint title={vca.topKeywords} helpKey="views.contentAnalytics.topKeywords" />
             <ChartPanel heightClass="h-[28rem]">
               {kwLabels.length > 0 ? (
                 <Bar
@@ -985,7 +956,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
           {hasWcPercBar && (
             <Card padding="tight" className="lg:col-span-2">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vca.wordCountLadder}</h3>
+              <ChartTitleWithHint title={vca.wordCountLadder} helpKey="views.contentAnalytics.wordCountLadder" />
               <ChartPanel>
                 <Bar
                   data={{
@@ -1028,11 +999,11 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
       {/* On-Page SEO Signals section */}
       {(hasH1Data || hasTitleData || hasMetaData) && (
         <div className="space-y-6">
-          <SectionHeader icon={Tag} title={vca.onPageSignals} />
+          <SectionHeader icon={Tag} title={vca.onPageSignals} hint={metricHelpHint('views.contentAnalytics.onPageSignals')} />
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* H1 Distribution Doughnut */}
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vca.h1Dist}</h3>
+              <ChartTitleWithHint title={vca.h1Dist} helpKey="views.contentAnalytics.h1Dist" />
               <ChartPanel>
                 {hasH1Data ? (
                   <ChartAccessibleFallback
@@ -1064,7 +1035,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
             {/* Title Length Quality */}
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vca.titleTagQuality}</h3>
+              <ChartTitleWithHint title={vca.titleTagQuality} helpKey="views.contentAnalytics.titleTagQuality" />
               <ChartPanel>
                 {hasTitleData ? (
                   <Bar
@@ -1086,7 +1057,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
             {/* Meta Description Quality */}
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vca.metaDescQuality}</h3>
+              <ChartTitleWithHint title={vca.metaDescQuality} helpKey="views.contentAnalytics.metaDescQuality" />
               <ChartPanel>
                 {hasMetaData ? (
                   <Bar
@@ -1111,7 +1082,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-w-0">
               {hasTitleMetaCompare && (
                 <Card padding="tight">
-                  <h3 className="text-sm font-bold text-foreground mb-3">{vca.titleVsMetaBuckets}</h3>
+                  <ChartTitleWithHint title={vca.titleVsMetaBuckets} helpKey="views.contentAnalytics.titleVsMetaBuckets" />
                   <ChartPanel heightClass="h-64">
                     <Bar
                       data={{
@@ -1137,7 +1108,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
               )}
               {hasSeoGapCountCompare && (
                 <Card padding="tight">
-                  <h3 className="text-sm font-bold text-foreground mb-3">{vca.seoOptimalVsGapCounts}</h3>
+                  <ChartTitleWithHint title={vca.seoOptimalVsGapCounts} helpKey="views.contentAnalytics.seoOptimalVsGapCounts" />
                   <ChartPanel heightClass="h-64">
                     <Bar
                       data={{
@@ -1168,7 +1139,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
       {/* Social Meta Coverage section */}
       <div className="space-y-6">
-        <SectionHeader icon={Share2} title={vca.socialMetaCoverage} />
+        <SectionHeader icon={Share2} title={vca.socialMetaCoverage} hint={metricHelpHint('views.contentAnalytics.socialMetaCoverage')} />
 
         {/* Coverage progress bars */}
         {(sc.og_coverage_pct != null || sc.twitter_coverage_pct != null || hasOgImgData) && (
@@ -1226,7 +1197,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
 
         {hasSocialMissCompare && (
           <Card padding="tight" shadow>
-            <h3 className="text-sm font-bold text-foreground mb-3">{vca.missingSocialUrlCompare}</h3>
+            <ChartTitleWithHint title={vca.missingSocialUrlCompare} helpKey="views.contentAnalytics.missingSocialCompare" />
             <ChartPanel className="max-w-lg">
               <Bar
                 data={{
@@ -1373,10 +1344,10 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
       {/* Site Architecture section */}
       {hasDepthData && (
         <div className="space-y-6">
-          <SectionHeader icon={Layers} title={vca.siteArchitecture} />
+          <SectionHeader icon={Layers} title={vca.siteArchitecture} hint={metricHelpHint('views.contentAnalytics.siteArchitecture')} />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">Crawl Depth Distribution</h3>
+              <ChartTitleWithHint title="Crawl Depth Distribution" helpKey="views.contentAnalytics.crawlDepthDist" />
               {(depthDist.max_depth != null || depthDist.avg_depth != null) && (
                 <p className="text-xs text-muted-foreground mb-3">
                   {depthDist.max_depth != null && (
@@ -1413,7 +1384,7 @@ export default function ContentAnalytics({ searchQuery = '' }: ViewProps) {
             {/* Word count percentile summary */}
             {wcStats.median != null && (
               <Card padding="tight">
-                <h3 className="text-sm font-bold text-foreground mb-3">{vca.wordCountPercentiles}</h3>
+                <ChartTitleWithHint title={vca.wordCountPercentiles} helpKey="views.contentAnalytics.wordCountPercentiles" />
                 <div className="space-y-3">
                   {[
                     { label: 'Min', value: wcStats.min, color: 'text-muted-foreground', barW: 0 },
diff --git a/web/src/views/Gallery.tsx b/web/src/views/Gallery.tsx
index 7b2f8530..2d387f45 100644
--- a/web/src/views/Gallery.tsx
+++ b/web/src/views/Gallery.tsx
@@ -13,7 +13,7 @@ import {
 } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings } from '../lib/strings';
-import { PageLayout, PageHeader, Card } from '../components';
+import { PageLayout, PageHeader, Card, LabelWithHint } from '../components';
 import type { GalleryImageItem, ReportLink, ViewProps } from '@/types';
 
 type GalleryKind = 'content' | 'og' | 'twitter' | string;
@@ -415,11 +415,19 @@ export default function Gallery({ searchQuery = '' }: ViewProps) {
 
       <Card className="p-4 flex flex-wrap gap-6 text-sm">
         <div>
-          <div className="text-xs text-muted-foreground uppercase tracking-wider mb-0.5">{vg.statUnique}</div>
+          <LabelWithHint
+            label={vg.statUnique}
+            helpKey="views.gallery.uniqueImages"
+            className="text-xs text-muted-foreground uppercase tracking-wider mb-0.5"
+          />
           <div className="text-2xl font-bold text-bright tabular-nums">{items.length}</div>
         </div>
         <div>
-          <div className="text-xs text-muted-foreground uppercase tracking-wider mb-0.5">{vg.statShown}</div>
+          <LabelWithHint
+            label={vg.statShown}
+            helpKey="views.gallery.shownFiltered"
+            className="text-xs text-muted-foreground uppercase tracking-wider mb-0.5"
+          />
           <div className="text-2xl font-bold text-foreground tabular-nums">{filtered.length}</div>
         </div>
         <div className="text-xs text-muted-foreground max-w-xl leading-relaxed">{vg.helpBlurb}</div>
diff --git a/web/src/views/Home.tsx b/web/src/views/Home.tsx
index 870f120b..966d3ce6 100644
--- a/web/src/views/Home.tsx
+++ b/web/src/views/Home.tsx
@@ -1,7 +1,7 @@
 import { Building2, ChevronDown, Search } from 'lucide-react';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import AppLogo from '@/components/AppLogo';
-import { PageLayout, Card } from '../components';
+import { PageLayout, Card, LabelWithHint } from '../components';
 import PortfolioPropertyCard from '@/components/portfolio/PortfolioPropertyCard';
 import { healthScoreClass, portfolioCardKey } from '@/components/portfolio/portfolioCardUtils';
 import { Skeleton, SkeletonDomainCard } from '../components/Skeleton';
@@ -237,7 +237,9 @@ export default function Home({ onNavigate }: ViewProps) {
 
           <div className="grid grid-cols-3 gap-1.5 mt-2.5">
             <div className="rounded-md border border-default bg-brand-900/25 px-2 py-1.5">
-              <p className="text-[10px] sm:text-[11px] uppercase tracking-wider text-muted-foreground">{vh.totalBrandsLabel}</p>
+              <p className="text-[10px] sm:text-[11px] uppercase tracking-wider text-muted-foreground">
+                <LabelWithHint label={vh.totalBrandsLabel} helpKey="views.home.totalBrands" />
+              </p>
               {portfolioLoading ? (
                 <Skeleton className="h-5 w-10 mt-1" />
               ) : (
@@ -245,7 +247,9 @@ export default function Home({ onNavigate }: ViewProps) {
               )}
             </div>
             <div className="rounded-md border border-default bg-brand-900/25 px-2 py-1.5">
-              <p className="text-[10px] sm:text-[11px] uppercase tracking-wider text-muted-foreground">{vh.totalUrlsLabel}</p>
+              <p className="text-[10px] sm:text-[11px] uppercase tracking-wider text-muted-foreground">
+                <LabelWithHint label={vh.totalUrlsLabel} helpKey="views.home.totalUrls" />
+              </p>
               {portfolioLoading ? (
                 <Skeleton className="h-5 w-14 mt-1" />
               ) : (
@@ -253,7 +257,9 @@ export default function Home({ onNavigate }: ViewProps) {
               )}
             </div>
             <div className="rounded-md border border-default bg-brand-900/25 px-2 py-1.5">
-              <p className="text-[10px] sm:text-[11px] uppercase tracking-wider text-muted-foreground">{vh.avgHealthLabel}</p>
+              <p className="text-[10px] sm:text-[11px] uppercase tracking-wider text-muted-foreground">
+                <LabelWithHint label={vh.avgHealthLabel} helpKey="views.home.avgHealth" />
+              </p>
               {portfolioLoading ? (
                 <Skeleton className="h-5 w-8 mt-1" />
               ) : (
diff --git a/web/src/views/Indexation.tsx b/web/src/views/Indexation.tsx
index d4b38c78..3a463b5a 100644
--- a/web/src/views/Indexation.tsx
+++ b/web/src/views/Indexation.tsx
@@ -5,6 +5,7 @@ import { FileSearch } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings } from '../lib/strings';
 import { PageLayout, PageHeader, Card, StatCard } from '../components';
+import { metricHelpHint } from '@/lib/metricHelp';
 import UrlGapListsPanel from '../components/google/UrlGapListsPanel';
 import type { UrlJoinData, ViewProps } from '@/types';
 
@@ -37,10 +38,10 @@ export default function Indexation(_props: ViewProps) {
     <PageLayout>
       <PageHeader title={vi.title} subtitle={vi.subtitle} icon={<FileSearch className="h-7 w-7 text-link shrink-0" />} />
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
-        <StatCard label={vi.crawled} value={counts?.crawled ?? '—'} />
-        <StatCard label={vi.sitemap} value={counts?.sitemap ?? '—'} />
-        <StatCard label={vi.gscPages} value={counts?.gsc_pages ?? '—'} />
-        <StatCard label={vi.sitemapOnly} value={counts?.sitemap_only ?? '—'} />
+        <StatCard label={vi.crawled} value={counts?.crawled ?? '—'} hint={metricHelpHint('views.indexation.crawled')} />
+        <StatCard label={vi.sitemap} value={counts?.sitemap ?? '—'} hint={metricHelpHint('views.indexation.sitemap')} />
+        <StatCard label={vi.gscPages} value={counts?.gsc_pages ?? '—'} hint={metricHelpHint('views.indexation.gscPages')} />
+        <StatCard label={vi.sitemapOnly} value={counts?.sitemap_only ?? '—'} hint={metricHelpHint('views.indexation.sitemapOnly')} />
       </div>
       <Card className="mb-6">
         <h3 className="text-sm font-semibold text-foreground mb-2">{vi.gapsTitle}</h3>
diff --git a/web/src/views/Issues.tsx b/web/src/views/Issues.tsx
index b0bd57de..a5b459ba 100644
--- a/web/src/views/Issues.tsx
+++ b/web/src/views/Issues.tsx
@@ -5,7 +5,7 @@ import { AlertTriangle, AlertCircle, Info, ExternalLink, Flame, BarChart2, ListC
 import { useReport } from '../context/useReport';
 import { useOptionalPipeline } from '../context/PipelineContext';
 import { strings, format } from '../lib/strings';
-import { PageLayout, PageHeader, Card, Badge, ViewTabs, ViewTabPanel, Button } from '../components';
+import { PageLayout, PageHeader, Card, Badge, ViewTabs, ViewTabPanel, Button, LabelWithHint } from '../components';
 import { paginateSlice, PAGE_SIZE } from '@/components/google/tableUtils';
 import UrlInspectorButton from '@/components/UrlInspectorButton';
 import IssueTaskBoard from '@/components/issues/IssueTaskBoard';
@@ -75,6 +75,12 @@ function IssueCard({ item, vi, emDash }: IssueCardProps) {
             <UrlInspectorButton url={iss.url} />
           </div>
         )}
+        {iss.impact_score != null && Number(iss.impact_score) > 0 ? (
+          <p className="mt-2 text-xs text-muted-foreground tabular-nums">
+            <LabelWithHint label="Impact score" helpKey="shared.impactScore" />:{' '}
+            <span className="font-semibold text-foreground">{Number(iss.impact_score).toLocaleString()}</span>
+          </p>
+        ) : null}
       </div>
       <div className="flex-1 min-w-0 bg-brand-900 rounded-lg p-3 border border-muted space-y-2">
         <div className="text-xs text-link font-bold uppercase mb-1 tracking-wide">{vi.fixRecommendation}</div>
diff --git a/web/src/views/JavaScriptErrors.tsx b/web/src/views/JavaScriptErrors.tsx
index dbb855e8..d863210f 100644
--- a/web/src/views/JavaScriptErrors.tsx
+++ b/web/src/views/JavaScriptErrors.tsx
@@ -7,6 +7,7 @@ import { useUrlTab } from '@/hooks/useUrlTab';
 import { Bug, ChevronDown, ChevronRight, ExternalLink, BarChart3, List } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { PageLayout, PageHeader, Card, Button, StatCard, Select, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, ViewTabs, ViewTabPanel } from '../components';
 import { paginateSlice, PAGE_SIZE } from '@/components/google/tableUtils';
 import type { ViewTabItem } from '../components';
@@ -159,11 +160,11 @@ export default function JavaScriptErrors({ searchQuery = '' }: ViewProps) {
       {activeTab === 'summary' && (
         <ViewTabPanel idPrefix="javascript-errors" tabId="summary" className="space-y-6">
           <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
-            <StatCard label={vj.consolePagesCard} value={pagesWithConsole.toLocaleString()} />
-            <StatCard label={vj.consoleTotalCard} value={totalConsole.toLocaleString()} />
-            <StatCard label={vj.exceptionPagesCard} value={pagesWithExceptions.toLocaleString()} />
-            <StatCard label={vj.exceptionTotalCard} value={totalExceptions.toLocaleString()} />
-            <StatCard label={vj.renderMode} value={<span className="capitalize">{scopeInfo.renderMode}</span>} />
+            <StatCard label={vj.consolePagesCard} value={pagesWithConsole.toLocaleString()} hint={metricHelpHint('views.jsErrors.consolePages')} />
+            <StatCard label={vj.consoleTotalCard} value={totalConsole.toLocaleString()} hint={metricHelpHint('views.jsErrors.consoleTotal')} />
+            <StatCard label={vj.exceptionPagesCard} value={pagesWithExceptions.toLocaleString()} hint={metricHelpHint('views.jsErrors.exceptionPages')} />
+            <StatCard label={vj.exceptionTotalCard} value={totalExceptions.toLocaleString()} hint={metricHelpHint('views.jsErrors.exceptionTotal')} />
+            <StatCard label={vj.renderMode} value={<span className="capitalize">{scopeInfo.renderMode}</span>} hint={metricHelpHint('views.jsErrors.renderMode')} />
           </div>
 
           {topMessages.length > 0 ? (
diff --git a/web/src/views/Lighthouse.tsx b/web/src/views/Lighthouse.tsx
index 4e715060..b7616ce0 100644
--- a/web/src/views/Lighthouse.tsx
+++ b/web/src/views/Lighthouse.tsx
@@ -18,7 +18,7 @@ import {
 } from '../lib/domainSlug';
 import { goToPipeline } from '../lib/pipelineReturn';
 import { strings, format } from '../lib/strings';
-import { PageLayout, PageHeader, Card, Button, ViewTabs, ViewTabPanel, Select } from '../components';
+import { PageLayout, PageHeader, Card, Button, ViewTabs, ViewTabPanel, Select, LabelWithHint } from '../components';
 import { paginateSlice, PAGE_SIZE } from '@/components/google/tableUtils';
 import type { ViewTabItem } from '../components';
 import {
@@ -391,9 +391,17 @@ export default function Lighthouse({ searchQuery = '' }: ViewProps) {
               const p75 = data.crux_summary?.metrics?.[
                 metric === 'lcp' ? 'largest_contentful_paint' : metric === 'inp' ? 'interaction_to_next_paint' : 'cumulative_layout_shift'
               ]?.p75;
+              const cruxHelpKey =
+                metric === 'lcp'
+                  ? 'views.lighthouse.cruxLcp'
+                  : metric === 'inp'
+                    ? 'views.lighthouse.cruxInp'
+                    : 'views.lighthouse.cruxCls';
               return (
                 <div key={metric}>
-                  <span className="text-muted-foreground uppercase text-xs">{metric}</span>
+                  <span className="text-muted-foreground uppercase text-xs">
+                    <LabelWithHint label={metric} helpKey={cruxHelpKey} />
+                  </span>
                   <p className={`font-medium ${pass ? 'text-emerald-600' : 'text-amber-600'}`}>
                     {p75 != null ? String(p75) : '—'} {pass === false ? '(needs improvement)' : pass ? '(good)' : ''}
                   </p>
@@ -415,7 +423,9 @@ export default function Lighthouse({ searchQuery = '' }: ViewProps) {
       {activeTab === 'overview' && (
         <div id="lh-tab-overview" role="tabpanel" aria-labelledby="lh-tab-btn-overview" className="space-y-6">
           <div>
-            <h2 className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-4">{vlh.categoriesSection}</h2>
+            <h2 className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-4">
+              <LabelWithHint label={vlh.categoriesSection} helpKey="views.lighthouse.categoryScores" />
+            </h2>
             <div className="flex flex-wrap gap-6 justify-start items-center">
               {CATEGORIES.map(({ id, label }) => (
                 <ScoreRing key={id} label={label} score={cs[id] != null ? Number(cs[id]) : null} />
@@ -447,7 +457,7 @@ export default function Lighthouse({ searchQuery = '' }: ViewProps) {
             <div ref={pageDetailRef} className="space-y-6">
               <div>
                 <h2 className="text-muted-foreground text-xs font-bold uppercase tracking-wider mb-4">
-                  {vlh.categoriesSection}
+                  <LabelWithHint label={vlh.categoriesSection} helpKey="views.lighthouse.categoryScores" />
                 </h2>
                 <div className="flex flex-wrap gap-6 justify-start items-center">
                   {CATEGORIES.map(({ id, label }) => {
diff --git a/web/src/views/LogAnalyzer.tsx b/web/src/views/LogAnalyzer.tsx
index ce518398..13ee7699 100644
--- a/web/src/views/LogAnalyzer.tsx
+++ b/web/src/views/LogAnalyzer.tsx
@@ -6,7 +6,8 @@ import { useOptionalPipeline } from '@/context/PipelineContext';
 import { useReport } from '@/context/useReport';
 import { apiUrl } from '@/lib/publicBase';
 import { strings } from '@/lib/strings';
-import { PageLayout, PageHeader, Card } from '@/components';
+import { metricHelpHint } from '@/lib/metricHelp';
+import { PageLayout, PageHeader, Card, StatCard } from '@/components';
 import type { ViewProps } from '@/types';
 
 const vl = strings.views.logAnalyzer;
@@ -110,31 +111,32 @@ export default function LogAnalyzer(_props: ViewProps) {
           {error ? <p className="text-sm text-red-600">{error}</p> : null}
           {analysis ? (
             <div className="space-y-6">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 text-sm">
-                <div>
-                  <p className="text-muted-foreground">{vl.parsedLines}</p>
-                  <p className="font-bold tabular-nums">{Number(analysis.parsed_lines || 0).toLocaleString()}</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground">{vl.uniquePaths}</p>
-                  <p className="font-bold tabular-nums">{Number(analysis.unique_paths || 0).toLocaleString()}</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground">{vl.googlebotHits}</p>
-                  <p className="font-bold tabular-nums">{Number(analysis.googlebot_hits || 0).toLocaleString()}</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground">{vl.logOnlyUrls}</p>
-                  <p className="font-bold tabular-nums">
-                    {Number(compare?.log_only_count ?? logOnlyPaths.length).toLocaleString()}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground">{vl.crawlOnlyUrls}</p>
-                  <p className="font-bold tabular-nums">
-                    {Number(compare?.crawl_only_count ?? crawlOnlyPaths.length).toLocaleString()}
-                  </p>
-                </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
+                <StatCard
+                  label={vl.parsedLines}
+                  value={Number(analysis.parsed_lines || 0).toLocaleString()}
+                  hint={metricHelpHint('views.logAnalyzer.parsedLines')}
+                />
+                <StatCard
+                  label={vl.uniquePaths}
+                  value={Number(analysis.unique_paths || 0).toLocaleString()}
+                  hint={metricHelpHint('views.logAnalyzer.uniquePaths')}
+                />
+                <StatCard
+                  label={vl.googlebotHits}
+                  value={Number(analysis.googlebot_hits || 0).toLocaleString()}
+                  hint={metricHelpHint('views.logAnalyzer.googlebotHits')}
+                />
+                <StatCard
+                  label={vl.logOnlyUrls}
+                  value={Number(compare?.log_only_count ?? logOnlyPaths.length).toLocaleString()}
+                  hint={metricHelpHint('views.logAnalyzer.logOnly')}
+                />
+                <StatCard
+                  label={vl.crawlOnlyUrls}
+                  value={Number(compare?.crawl_only_count ?? crawlOnlyPaths.length).toLocaleString()}
+                  hint={metricHelpHint('views.logAnalyzer.crawlOnly')}
+                />
               </div>
               {(logOnlyPaths.length > 0 || crawlOnlyPaths.length > 0) ? (
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
diff --git a/web/src/views/Network.tsx b/web/src/views/Network.tsx
index a4225cf1..6559b57e 100644
--- a/web/src/views/Network.tsx
+++ b/web/src/views/Network.tsx
@@ -3,7 +3,7 @@ import ForceGraph3D from '3d-force-graph';
 import { Maximize, Minimize, Loader2 } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings } from '../lib/strings';
-import { PageLayout, PageHeader, Card, Button, DataViewLayout } from '../components';
+import { PageLayout, PageHeader, Card, Button, DataViewLayout, LabelWithHint } from '../components';
 import type { GraphEdge, GraphNode, ViewProps } from '@/types';
 
 interface GraphNodeData {
@@ -284,15 +284,15 @@ export default function Network({ searchQuery = '' }: ViewProps) {
               <div className="absolute top-4 left-4 bg-brand-900 border border-default p-3 rounded-xl text-xs space-y-2 z-10">
                 <div className="flex items-center gap-2 text-bright">
                   <div className="w-3 h-3 rounded-full bg-blue-500 border border-blue-400" />
-                  {vn.legendOk}
+                  <LabelWithHint label={vn.legendOk} helpKey="views.network.legendOk" />
                 </div>
                 <div className="flex items-center gap-2 text-bright">
                   <div className="w-3 h-3 rounded-full bg-red-500 border border-red-400" />
-                  {vn.legendBroken}
+                  <LabelWithHint label={vn.legendBroken} helpKey="views.network.legendBroken" />
                 </div>
                 <div className="flex items-center gap-2 text-bright">
                   <div className="w-4 h-0.5 bg-brand-700" />
-                  {vn.legendLink}
+                  <LabelWithHint label={vn.legendLink} helpKey="views.network.legendLink" />
                 </div>
               </div>
               <Button
diff --git a/web/src/views/Redirects.tsx b/web/src/views/Redirects.tsx
index 8508f245..bca3138c 100644
--- a/web/src/views/Redirects.tsx
+++ b/web/src/views/Redirects.tsx
@@ -3,6 +3,7 @@ import { Bar } from 'react-chartjs-2';
 import type { TooltipItem } from 'chart.js';
 import { useReport } from '../context/useReport';
 import { strings } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { PageLayout, PageHeader, Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, Badge } from '../components';
 import { palette } from '../utils/chartPalette';
 import { registerChartJsBase, barOptionsHorizontal } from '../utils/chartJsDefaults';
@@ -84,7 +85,7 @@ export default function Redirects({ searchQuery = '' }: ViewProps) {
             <TableHead>
               <tr>
                 <TableHeadCell>{vr.colFrom}</TableHeadCell>
-                <TableHeadCell>{vr.colStatus}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.redirects.httpStatus')}>{vr.colStatus}</TableHeadCell>
                 <TableHeadCell>{vr.colTo}</TableHeadCell>
                 <TableHeadCell className="w-36" />
               </tr>
diff --git a/web/src/views/SearchPerformance.tsx b/web/src/views/SearchPerformance.tsx
index 37ae9088..dbf2b108 100644
--- a/web/src/views/SearchPerformance.tsx
+++ b/web/src/views/SearchPerformance.tsx
@@ -7,6 +7,7 @@ import type { TableColumn } from '@/types/components';
 import { TrendingUp, Search, AlertCircle, Settings2, Download } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { PageLayout, PageHeader, Card, AlertBanner, StatCard, ViewTabs } from '../components';
 import SortablePaginatedTable from '../components/google/SortablePaginatedTable';
 import GoogleTableToolbar from '../components/google/GoogleTableToolbar';
@@ -97,21 +98,25 @@ export default function SearchPerformance() {
       {
         key: 'clicks',
         label: sp.table.clicks,
+        hint: 'shared.clicks',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'impressions',
         label: sp.table.impressions,
+        hint: 'shared.impressions',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'ctr',
         label: sp.table.ctr,
+        hint: 'shared.ctr',
         render: (v) => <span className="tabular-nums">{v != null ? `${v}%` : '—'}</span>,
       },
       {
         key: 'position',
         label: sp.table.position,
+        hint: 'shared.position',
         render: (v) => <PositionBadge pos={v as number | string | null} />,
       },
     ],
@@ -137,21 +142,25 @@ export default function SearchPerformance() {
       {
         key: 'clicks',
         label: sp.table.clicks,
+        hint: 'shared.clicks',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'impressions',
         label: sp.table.impressions,
+        hint: 'shared.impressions',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'ctr',
         label: sp.table.ctr,
+        hint: 'shared.ctr',
         render: (v) => <span className="tabular-nums">{v != null ? `${v}%` : '—'}</span>,
       },
       {
         key: 'position',
         label: sp.table.position,
+        hint: 'shared.position',
         render: (v) => <PositionBadge pos={v as number | string | null} />,
       },
       {
@@ -267,10 +276,26 @@ export default function SearchPerformance() {
 
       {gsc?.summary && (
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-          <StatCard label={sp.kpi.clicks} value={gsc.summary.clicks?.toLocaleString()} />
-          <StatCard label={sp.kpi.impressions} value={gsc.summary.impressions?.toLocaleString()} />
-          <StatCard label={sp.kpi.ctr} value={gsc.summary.ctr != null ? `${gsc.summary.ctr}%` : null} />
-          <StatCard label={sp.kpi.position} value={gsc.summary.position} />
+          <StatCard
+            label={sp.kpi.clicks}
+            value={gsc.summary.clicks?.toLocaleString()}
+            hint={metricHelpHint('shared.clicks')}
+          />
+          <StatCard
+            label={sp.kpi.impressions}
+            value={gsc.summary.impressions?.toLocaleString()}
+            hint={metricHelpHint('shared.impressions')}
+          />
+          <StatCard
+            label={sp.kpi.ctr}
+            value={gsc.summary.ctr != null ? `${gsc.summary.ctr}%` : null}
+            hint={metricHelpHint('shared.ctr')}
+          />
+          <StatCard
+            label={sp.kpi.position}
+            value={gsc.summary.position}
+            hint={metricHelpHint('shared.position')}
+          />
         </div>
       )}
 
@@ -429,21 +454,25 @@ export default function SearchPerformance() {
                         label={sp.urlJoin.matched}
                         value={urlJoin.matched}
                         sub={sp.urlJoin.matchedSub}
+                        hint={metricHelpHint('views.overview.urlJoinMatched')}
                       />
                       <StatCard
                         label={sp.urlJoin.crawlOnly}
                         value={urlJoin.crawl_only}
                         sub={sp.urlJoin.crawlOnlySub}
+                        hint={metricHelpHint('views.overview.urlJoinCrawlOnly')}
                       />
                       <StatCard
                         label={sp.urlJoin.gscOnly}
                         value={urlJoin.gsc_only}
                         sub={sp.urlJoin.gscOnlySub}
+                        hint={metricHelpHint('views.overview.urlJoinGscOnly')}
                       />
                       <StatCard
                         label={sp.urlJoin.ga4Only}
                         value={urlJoin.ga4_only}
                         sub={sp.urlJoin.ga4OnlySub}
+                        hint={metricHelpHint('views.overview.urlJoinGa4Only')}
                       />
                     </div>
                   </div>
diff --git a/web/src/views/Security.tsx b/web/src/views/Security.tsx
index 60ab6b95..83fd7eef 100644
--- a/web/src/views/Security.tsx
+++ b/web/src/views/Security.tsx
@@ -5,7 +5,8 @@ import type { TooltipItem } from 'chart.js';
 import { Shield, Flame, AlertTriangle, AlertCircle, Info, ExternalLink, BarChart3, List } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
-import { PageLayout, PageHeader, Card, Badge, ViewTabs, ViewTabPanel, Button } from '../components';
+import { PageLayout, PageHeader, Card, Badge, ViewTabs, ViewTabPanel, Button, StatCard, ChartTitleWithHint } from '../components';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { paginateSlice, PAGE_SIZE } from '@/components/google/tableUtils';
 import type { ViewTabItem } from '../components';
 import { palette } from '../utils/chartPalette';
@@ -239,8 +240,7 @@ export default function Security({ searchQuery = '' }: ViewProps) {
         <ViewTabPanel idPrefix="security" tabId="charts" className="space-y-4">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 min-w-0">
             <Card padding="tight" shadow overflowHidden className="min-w-0">
-              <h2 className="text-sm font-bold text-foreground mb-1">{vs.findingsBySeverity}</h2>
-              <p className="text-xs text-muted-foreground mb-3">{vs.findingsBySeverityHint}</p>
+              <ChartTitleWithHint as="h2" title={vs.findingsBySeverity} helpKey="views.security.findingsBySeverityChart" />
               <div className="h-56 flex items-center justify-center min-w-0 overflow-hidden">
                 <div className="w-full max-w-[260px] h-48">
                   <ChartAccessibleFallback summary={severityChart.aria} rows={severityChart.rows}>
@@ -264,8 +264,7 @@ export default function Security({ searchQuery = '' }: ViewProps) {
             </Card>
             {typeLabels.length > 0 && (
               <Card padding="tight" shadow overflowHidden className="min-w-0">
-                <h2 className="text-sm font-bold text-foreground mb-1">{vs.findingsByType}</h2>
-                <p className="text-xs text-muted-foreground mb-3">{vs.findingsByTypeHint}</p>
+                <ChartTitleWithHint as="h2" title={vs.findingsByType} helpKey="views.security.findingsByTypeChart" />
                 <div className="relative h-56 min-w-0 w-full overflow-hidden">
                   <Bar
                     data={{
@@ -296,21 +295,34 @@ export default function Security({ searchQuery = '' }: ViewProps) {
               const count = severityCounts[sev] || 0;
               const isActive = severityFilter === sev;
               return (
-                <Card
+                <div
                   key={sev}
-                  shadow
-                  className={`cursor-pointer transition-all select-none ${
-                    isActive
-                      ? `${cfg.ring || `ring-1 ring-neutral-500/20`} ${cfg.border}`
-                      : 'hover:border-brand-700/80'
+                  className={`cursor-pointer transition-all select-none rounded-xl ${
+                    isActive ? `${cfg.ring || `ring-1 ring-neutral-500/20`} ring-2` : ''
                   }`}
                   onClick={() => setSeverityFilter((prev) => (prev === sev ? 'All' : sev))}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      setSeverityFilter((prev) => (prev === sev ? 'All' : sev));
+                    }
+                  }}
+                  role="button"
+                  tabIndex={0}
                 >
-                  <div className={`text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-2 ${cfg.text}`}>
-                    <Icon className="h-4 w-4" /> {sev}
-                  </div>
-                  <div className={`text-3xl font-bold ${count > 0 ? cfg.text : 'text-muted-foreground'}`}>{count}</div>
-                </Card>
+                  <StatCard
+                    label={
+                      <span className={`inline-flex items-center gap-2 ${cfg.text}`}>
+                        <Icon className="h-4 w-4" aria-hidden /> {sev}
+                      </span>
+                    }
+                    value={<span className={count > 0 ? cfg.text : 'text-muted-foreground'}>{count}</span>}
+                    hint={metricHelpHint('views.security.severityCount')}
+                    size="lg"
+                    shadow
+                    className={isActive ? `${cfg.border} border-2` : undefined}
+                  />
+                </div>
               );
             })}
           </div>
diff --git a/web/src/views/SiteStructure.tsx b/web/src/views/SiteStructure.tsx
index ba92cc54..89404dc3 100644
--- a/web/src/views/SiteStructure.tsx
+++ b/web/src/views/SiteStructure.tsx
@@ -27,6 +27,7 @@ import {
   linkMatchesPathKey,
 } from '../lib/siteStructureTree';
 import { PageLayout, PageHeader, Card, Button, StatCard, AlertBanner, ViewTabs, ViewTabPanel } from '../components';
+import { metricHelpHint } from '@/lib/metricHelp';
 import UrlInspectorButton from '@/components/UrlInspectorButton';
 import type { ViewTabItem } from '../components';
 import PathTreeTable from '../components/siteStructure/PathTreeTable';
@@ -379,31 +380,37 @@ export default function SiteStructure({ searchQuery = '' }: ViewProps) {
                 label={s.stats.urls}
                 value={fmtMetric(rootMetrics?.pages ?? filteredLinks.length)}
                 icon={<Layers className="h-3.5 w-3.5" aria-hidden />}
+                hint={metricHelpHint('views.siteStructure.urlsInView')}
               />
               <StatCard
                 label={s.stats.pathPrefixes}
                 value={fmtMetric(merged.size)}
                 icon={<FolderTree className="h-3.5 w-3.5" aria-hidden />}
+                hint={metricHelpHint('views.siteStructure.pathPrefixes')}
               />
               <StatCard
                 label={s.stats.totalInlinks}
                 value={fmtMetric(rootMetrics?.inlinks)}
                 icon={<Link2 className="h-3.5 w-3.5" aria-hidden />}
+                hint={metricHelpHint('views.siteStructure.totalInlinks')}
               />
               <StatCard
                 label={s.stats.avgWords}
                 value={fmtMetric(rootMetrics?.avgWordCount)}
                 icon={<AlignLeft className="h-3.5 w-3.5" aria-hidden />}
+                hint={metricHelpHint('shared.avgWords')}
               />
               <StatCard
                 label={s.stats.avgResponse}
                 value={fmtMetric(rootMetrics?.avgResponseMs)}
                 icon={<Timer className="h-3.5 w-3.5" aria-hidden />}
+                hint={metricHelpHint('views.siteStructure.avgResponse')}
               />
               <StatCard
                 label={s.stats.avgPerf}
                 value={fmtMetric(rootMetrics?.avgPerfScore)}
                 icon={<Gauge className="h-3.5 w-3.5" aria-hidden />}
+                hint={metricHelpHint('views.siteStructure.avgPerf')}
               />
             </div>
           ) : null}
diff --git a/web/src/views/Subdomains.tsx b/web/src/views/Subdomains.tsx
index e61f9037..79956f79 100644
--- a/web/src/views/Subdomains.tsx
+++ b/web/src/views/Subdomains.tsx
@@ -19,6 +19,7 @@ import {
   TableRow,
   TableCell,
 } from '../components';
+import { metricHelpHint } from '@/lib/metricHelp';
 import type { SubdomainHostEntry, ViewProps } from '@/types';
 
 function yesNo(value: boolean | undefined): string {
@@ -79,10 +80,10 @@ export default function Subdomains({ searchQuery = '' }: ViewProps) {
         </Card>
       ) : null}
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
-        <StatCard label={vs.apex} value={inv.apex || '—'} />
-        <StatCard label={vs.inScopeHosts} value={inScopeHosts.length} />
-        <StatCard label={vs.gscNotCrawled} value={gscGapHosts.length} />
-        <StatCard label={vs.outOfScope} value={outOfScope.length} />
+        <StatCard label={vs.apex} value={inv.apex || '—'} hint={metricHelpHint('views.subdomains.apex')} />
+        <StatCard label={vs.inScopeHosts} value={inScopeHosts.length} hint={metricHelpHint('views.subdomains.inScopeHosts')} />
+        <StatCard label={vs.gscNotCrawled} value={gscGapHosts.length} hint={metricHelpHint('views.subdomains.gscNotCrawled')} />
+        <StatCard label={vs.outOfScope} value={outOfScope.length} hint={metricHelpHint('views.subdomains.outOfScope')} />
       </div>
       {gscGapHosts.length > 0 ? (
         <Card className="mb-6">
@@ -111,12 +112,12 @@ export default function Subdomains({ searchQuery = '' }: ViewProps) {
           <Table>
             <TableHead>
               <TableRow>
-                <TableHeadCell>{vs.colHost}</TableHeadCell>
-                <TableHeadCell>{vs.colSources}</TableHeadCell>
-                <TableHeadCell>{vs.colCrawl}</TableHeadCell>
-                <TableHeadCell>{vs.colGsc}</TableHeadCell>
-                <TableHeadCell>{vs.colCrawlUrls}</TableHeadCell>
-                <TableHeadCell>{vs.colGscUrls}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.subdomains.colHost')}>{vs.colHost}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.subdomains.colSources')}>{vs.colSources}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.subdomains.colCrawl')}>{vs.colCrawl}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.subdomains.colGsc')}>{vs.colGsc}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.subdomains.colCrawlUrls')}>{vs.colCrawlUrls}</TableHeadCell>
+                <TableHeadCell hint={metricHelpHint('views.subdomains.colGscUrls')}>{vs.colGscUrls}</TableHeadCell>
               </TableRow>
             </TableHead>
             <TableBody>
diff --git a/web/src/views/TechStack.tsx b/web/src/views/TechStack.tsx
index dc8d2309..2b81aff6 100644
--- a/web/src/views/TechStack.tsx
+++ b/web/src/views/TechStack.tsx
@@ -6,7 +6,8 @@ import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Toolti
 import { Bar } from 'react-chartjs-2';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
-import { PageLayout, PageHeader, Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, ViewTabs, ViewTabPanel } from '../components';
+import { metricHelpHint } from '@/lib/metricHelp';
+import { PageLayout, PageHeader, Card, Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, ViewTabs, ViewTabPanel, StatCard, ChartTitleWithHint } from '../components';
 import type { ViewTabItem } from '../components';
 import { palette } from '../utils/chartPalette';
 import { getGridColor, getChartCanvasTextColor } from '../utils/chartJsDefaults';
@@ -123,17 +124,19 @@ export default function TechStack({ searchQuery = '' }: ViewProps) {
         <ViewTabPanel idPrefix="tech-stack" tabId="overview" className="space-y-6">
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
             {Object.entries(categoryCounts).slice(0, 4).map(([cat, count]) => (
-              <Card key={cat} shadow>
-                <div className="text-xs text-muted-foreground uppercase font-bold mb-1">{cat}</div>
-                <div className="text-2xl font-bold text-bright">{String(count)}</div>
-                <div className="text-[10px] text-muted-foreground mt-1">{vr.techDetectedSuffix}</div>
-              </Card>
+              <StatCard
+                key={cat}
+                label={cat}
+                value={String(count)}
+                sub={vr.techDetectedSuffix}
+                hint={metricHelpHint('views.techStack.categoryCount')}
+                shadow
+              />
             ))}
           </div>
 
           <Card padding="tight">
-            <h3 className="text-sm font-bold text-foreground mb-1">{vr.cardDetected}</h3>
-            <p className="text-xs text-muted-foreground mb-3">{vr.cardHint}</p>
+            <ChartTitleWithHint as="h3" title={vr.cardDetected} helpKey="views.techStack.detectedChart" />
             <div style={{ height: Math.max(200, techs.length * 28 + 40) }}>
               {chartLabels.length > 0 ? (
                 <Bar
@@ -177,7 +180,7 @@ export default function TechStack({ searchQuery = '' }: ViewProps) {
                   <tr>
                     <TableHeadCell className="text-left">{vr.colTechnology}</TableHeadCell>
                     <TableHeadCell className="text-left">{vr.colCategory}</TableHeadCell>
-                    <TableHeadCell className="text-right">{vr.colPages}</TableHeadCell>
+                    <TableHeadCell className="text-right" hint={metricHelpHint('views.techStack.pagesDetected')}>{vr.colPages}</TableHeadCell>
                     <TableHeadCell className="text-left">{vr.colSampleUrls}</TableHeadCell>
                   </tr>
                 </TableHead>
diff --git a/web/src/views/TextContentAnalysis.tsx b/web/src/views/TextContentAnalysis.tsx
index 7702d83c..888fba93 100644
--- a/web/src/views/TextContentAnalysis.tsx
+++ b/web/src/views/TextContentAnalysis.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { Chart, TooltipItem } from 'chart.js';
-import { Fragment, useState, useMemo, useEffect, type ComponentType, type ReactNode } from 'react';
+import { Fragment, useState, useMemo, useEffect } from 'react';
 import { useUrlTab } from '@/hooks/useUrlTab';
 import type {
   ContentAnalyticsData,
@@ -31,6 +31,7 @@ import {
 } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import {
   PageLayout,
   PageHeader,
@@ -44,6 +45,8 @@ import {
   ViewTabs,
   ViewTabPanel,
   Button,
+  SectionHeader,
+  ChartTitleWithHint,
 } from '../components';
 import type { ViewTabItem } from '../components';
 import SortablePaginatedTable from '../components/google/SortablePaginatedTable';
@@ -145,29 +148,6 @@ function barOptsH(xTitle?: string, yAxisLabels?: readonly string[]) {
   });
 }
 
-function SectionHeader({
-  icon,
-  title,
-  description,
-}: {
-  icon: ComponentType<{ className?: string }>;
-  title: ReactNode;
-  description?: ReactNode;
-}) {
-  const Icon = icon;
-  return (
-    <div className="flex items-start gap-3 border-b border-muted pb-4">
-      <div className="p-2 bg-brand-800 border border-default rounded-lg">
-        <Icon className="h-5 w-5 text-link" />
-      </div>
-      <div>
-        <h2 className="text-lg font-bold text-bright">{title}</h2>
-        {description ? <p className="text-sm text-muted-foreground mt-0.5">{description}</p> : null}
-      </div>
-    </div>
-  );
-}
-
 function KeywordIndexTable({
   rows,
   vtca,
@@ -198,9 +178,13 @@ function KeywordIndexTable({
         <TableHead sticky>
           <tr>
             <TableHeadCell className="w-8" />
-            <TableHeadCell>{vtca.thWord}</TableHeadCell>
-            <TableHeadCell className="text-right w-28">{vtca.thTotalCount}</TableHeadCell>
-            <TableHeadCell className="text-right w-24">{vtca.thPageCount}</TableHeadCell>
+            <TableHeadCell hint={metricHelpHint('views.textContentAnalysis.thWord')}>{vtca.thWord}</TableHeadCell>
+            <TableHeadCell className="text-right w-28" hint={metricHelpHint('views.textContentAnalysis.thTotalCount')}>
+              {vtca.thTotalCount}
+            </TableHeadCell>
+            <TableHeadCell className="text-right w-24" hint={metricHelpHint('views.textContentAnalysis.thPageCount')}>
+              {vtca.thPageCount}
+            </TableHeadCell>
           </tr>
         </TableHead>
         <TableBody striped>
@@ -445,7 +429,7 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
           </div>
 
           <div className="space-y-4">
-            <SectionHeader icon={AlignLeft} title={vtca.byPageTitle} description={vtca.byPageDesc} />
+            <SectionHeader icon={AlignLeft} title={vtca.byPageTitle} description={vtca.byPageDesc} helpKey="views.textContentAnalysis.byPageSection" size="sm" />
             <SortablePaginatedTable
               columns={byPageColumns}
               rows={byPageRows}
@@ -558,10 +542,10 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
             <p className="text-sm text-muted-foreground">{vtca.noKeywordData}</p>
           )}
 
-          <SectionHeader icon={BarChart2} title={vtca.tabs.analytics} />
+          <SectionHeader icon={BarChart2} title={vtca.tabs.analytics} helpKey="views.textContentAnalysis.analyticsSection" size="sm" />
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-w-0">
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vtca.wordCountDist}</h3>
+              <ChartTitleWithHint title={vtca.wordCountDist} helpKey="views.textContentAnalysis.wordCountDist" />
               <ChartPanel heightClass="h-64">
                 {wcLabels.length > 0 ? (
                   <Bar
@@ -576,7 +560,7 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
             </Card>
 
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vtca.readingLevelDist}</h3>
+              <ChartTitleWithHint title={vtca.readingLevelDist} helpKey="views.textContentAnalysis.readingLevelDist" />
               <ChartPanel heightClass="h-64">
                 {rlLabels.length > 0 ? (
                   <Bar
@@ -600,7 +584,7 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
             </Card>
 
             <Card padding="tight">
-              <h3 className="text-sm font-bold text-foreground mb-3">{vtca.contentHtmlRatio}</h3>
+              <ChartTitleWithHint title={vtca.contentHtmlRatio} helpKey="views.textContentAnalysis.contentHtmlRatio" />
               <ChartPanel heightClass="h-64">
                 {crLabels.length > 0 ? (
                   <Bar
@@ -616,7 +600,7 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
 
             {hasWcPercBar ? (
               <Card padding="tight">
-                <h3 className="text-sm font-bold text-foreground mb-3">{vtca.wordCountLadder}</h3>
+                <ChartTitleWithHint title={vtca.wordCountLadder} helpKey="views.textContentAnalysis.wordCountLadder" />
                 <ChartPanel>
                   <Bar
                     data={{
@@ -698,7 +682,7 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
                 <Table>
                   <TableHead>
                     <TableRow>
-                      <TableHeadCell>{vtca.thRepresentative}</TableHeadCell>
+                      <TableHeadCell hint={metricHelpHint('views.textContentAnalysis.thCluster')}>{vtca.thRepresentative}</TableHeadCell>
                       <TableHeadCell>{vtca.thClusterScore}</TableHeadCell>
                       <TableHeadCell>{vtca.thKeywords}</TableHeadCell>
                     </TableRow>
@@ -733,7 +717,7 @@ export default function TextContentAnalysis({ searchQuery = '' }: ViewProps) {
                 <Table>
                   <TableHead>
                     <TableRow>
-                      <TableHeadCell>{vtca.thRepresentative}</TableHeadCell>
+                      <TableHeadCell hint={metricHelpHint('views.textContentAnalysis.thCluster')}>{vtca.thRepresentative}</TableHeadCell>
                       <TableHeadCell>{vtca.thClusterScore}</TableHeadCell>
                       <TableHeadCell>{vtca.thKeywords}</TableHeadCell>
                     </TableRow>
diff --git a/web/src/views/Traffic.tsx b/web/src/views/Traffic.tsx
index 9ca501b9..8d63c792 100644
--- a/web/src/views/Traffic.tsx
+++ b/web/src/views/Traffic.tsx
@@ -7,6 +7,7 @@ import type { TableColumn } from '@/types/components';
 import { Users, AlertCircle, Settings2, Download } from 'lucide-react';
 import { useReport } from '../context/useReport';
 import { strings, format } from '../lib/strings';
+import { metricHelpHint } from '@/lib/metricHelp';
 import { PageLayout, PageHeader, Card, AlertBanner, StatCard, ViewTabs } from '../components';
 import SortablePaginatedTable from '../components/google/SortablePaginatedTable';
 import GoogleTableToolbar from '../components/google/GoogleTableToolbar';
@@ -91,11 +92,13 @@ export default function Traffic() {
       {
         key: 'sessions',
         label: tf.table.sessions,
+        hint: 'shared.sessions',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
         key: 'activeUsers',
         label: tf.table.users,
+        hint: 'shared.activeUsers',
         render: (v) => <span className="tabular-nums">{Number(v ?? 0).toLocaleString()}</span>,
       },
       {
@@ -238,9 +241,17 @@ export default function Traffic() {
 
       {ga4?.summary && (
         <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
-          <StatCard label={tf.kpi.sessions} value={ga4.summary.sessions?.toLocaleString()} />
-          <StatCard label={tf.kpi.users} value={ga4.summary.activeUsers?.toLocaleString()} />
-          <StatCard label={tf.kpi.pageViews} value={ga4.summary.screenPageViews?.toLocaleString()} />
+          <StatCard
+            label={tf.kpi.sessions}
+            value={ga4.summary.sessions?.toLocaleString()}
+            hint={metricHelpHint('shared.sessions')}
+          />
+          <StatCard
+            label={tf.kpi.users}
+            value={ga4.summary.activeUsers?.toLocaleString()}
+            hint={metricHelpHint('shared.activeUsers')}
+          />
+          <StatCard label={tf.kpi.pageViews} value={ga4.summary.screenPageViews?.toLocaleString()} hint={metricHelpHint('shared.pageViews')} />
         </div>
       )}
 
@@ -395,21 +406,25 @@ export default function Traffic() {
                         label={sp.urlJoin.matched}
                         value={urlJoin.matched}
                         sub={sp.urlJoin.matchedSub}
+                        hint={metricHelpHint('views.overview.urlJoinMatched')}
                       />
                       <StatCard
                         label={sp.urlJoin.crawlOnly}
                         value={urlJoin.crawl_only}
                         sub={sp.urlJoin.crawlOnlySub}
+                        hint={metricHelpHint('views.overview.urlJoinCrawlOnly')}
                       />
                       <StatCard
                         label={sp.urlJoin.gscOnly}
                         value={urlJoin.gsc_only}
                         sub={sp.urlJoin.gscOnlySub}
+                        hint={metricHelpHint('views.overview.urlJoinGscOnly')}
                       />
                       <StatCard
                         label={sp.urlJoin.ga4Only}
                         value={urlJoin.ga4_only}
                         sub={sp.urlJoin.ga4OnlySub}
+                        hint={metricHelpHint('views.overview.urlJoinGa4Only')}
                       />
                     </div>
                   </div>