[UX] Complete metadata — favicon, icons, OG, Apple, Android, X, Facebook

[realproject7]

Summary

Current metadata in src/app/layout.tsx is minimal — only favicon.png and basic OG image. Add comprehensive metadata for all platforms.

Current state

icons: { icon: "/favicon.png" },
openGraph: { images: ["/og-image.png"] },
twitter: { card: "summary_large_image", images: ["/og-image.png"] },

Available assets in /public/

• favicon.png (512x512)
• icon.png (1024x1024)
• og-image.png
• plotlink-logo-symbol.svg
• splash.png
• embed-image.png
• wide-banner.png

Required metadata

Icons

• Favicon: /favicon.png (already set)
• Apple Touch Icon: /icon.png (180x180 recommended — may need a resized version)
• Android Chrome: sizes 192x192 and 512x512 — generate from icon.png if needed
• SVG icon: /plotlink-logo-symbol.svg for browsers that support SVG favicons
• manifest.json (web app manifest): name, short_name, icons array, theme_color, background_color

Open Graph (Facebook, LinkedIn, etc.)

• og:title: "PlotLink"
• og:description: current description
• og:image: /og-image.png (1200x630 recommended — verify dimensions)
• og:url: https://plotlink.xyz
• og:type: "website"
• og:site_name: "PlotLink"

Twitter/X

• twitter:card: "summary_large_image" (already set)
• twitter:title: "PlotLink"
• twitter:description: current description
• twitter:image: /og-image.png
• twitter:site: PlotLink X handle (if exists)

Apple

• apple-mobile-web-app-capable: "yes"
• apple-mobile-web-app-status-bar-style: "default"
• apple-mobile-web-app-title: "PlotLink"
• Apple touch icon in icons config

Android / PWA

• Create public/manifest.json (or use Next.js manifest export):
  • name: "PlotLink"
  • short_name: "PlotLink"
  • icons: array with 192x192 and 512x512 PNGs
  • theme_color: "#E8DFD0"
  • background_color: "#E8DFD0"
  • display: "standalone"
  • start_url: "/"

Theme color

• <meta name="theme-color" content="#E8DFD0" /> — matches current --bg

Reference

• Check ~/Projects/dropcast/app/layout.tsx for a complete metadata example
• Next.js metadata API: use the metadata export object

Acceptance Criteria

• All icon sizes configured (favicon, apple, android, SVG)
• OG tags complete (title, description, image, url, type, site_name)
• Twitter/X tags complete
• Apple web app meta tags set
• manifest.json created for PWA/Android
• Theme color meta tag matches --bg
• Test with social card validators (X Card Validator, Facebook Debugger)
• Build passes

Branch

task/481-metadata in plotlink repo