LOCALHOST TEACHING REPRODUCTION — do not deploy the broken version.
Use an existing Next.js App Router project and record the exact installed version.

// app/metadata-example/page.tsx — broken server state
import ClientHead from './ClientHead';
export const metadata = { title: 'Staging coffee guide', alternates: { canonical: 'https://staging.example.com/coffee' }, robots: { index: false, follow: true } };
export default function Page() { return <><h1>Coffee guide</h1><ClientHead /></>; }

// app/metadata-example/ClientHead.tsx
'use client';
import { useEffect } from 'react';
export default function ClientHead() {
 useEffect(() => {
  document.title = 'Coffee guide | Example';
  document.querySelector('link[rel="canonical"]')?.setAttribute('href', 'https://example.com/coffee');
  document.querySelector('meta[name="robots"]')?.setAttribute('content', 'index, follow');
 }, []);
 return null;
}

FIX: remove ClientHead and its import. Set the server metadata title to 'Coffee guide | Example', canonical to 'https://example.com/coffee', robots to {index:true,follow:true}.
Compare the original response and rendered DOM before and after. The separate HTML downloads are minimal constructed fixtures, not captured Next.js output. Next.js may stream metadata depending on version/request, so preserve the full response and record your conditions.