Add Open Graph and Twitter card metadata to app layout

[Copilot]

Adds site-wide Open Graph and Twitter card metadata to the Next.js app router layout, referencing /opengraph.png for social sharing previews.

Changes

• Added site constants: SITE_TITLE, SITE_DESCRIPTION, SITE_URL
• Updated metadata export with title template support (%s | Austrovis)
• Added openGraph metadata (title, description, url, siteName, images, locale, type)
• Added twitter metadata (card summary_large_image, title, description, images)

Note

The opengraph.png image file is not included — add it to public/opengraph.png (1200×630) before deploying.

Validation

After adding the image, verify with:

• Facebook Sharing Debugger
• Twitter Card Validator

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/austrovis.github.io/austrovis.github.io/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Update the Next.js app router layout to export a site-wide Metadata object that includes Open Graph and Twitter card metadata referencing a default Open Graph image at /opengraph.png. The repository owner will add the actual image later; do NOT add the image file in this PR. Changes to make:

1. Modify or create app/layout.tsx (TypeScript React) to:

   • import Metadata from 'next'
   • define constants for SITE_TITLE = 'Austrovis', SITE_DESCRIPTION = 'Visualizations and research by Austrovis', SITE_URL = 'https://austrovis.github.io'
   • export a const metadata: Metadata object that sets title (default and template), description, openGraph (title, description, url, siteName, images array containing a single image entry with url '/opengraph.png', width 1200, height 630, alt text 'Austrovis — visualizations and research', locale 'en_US', type 'website'), and twitter metadata (card 'summary_large_image', title, description, images ['/opengraph.png']).
   • ensure the default RootLayout component renders html and body and includes children.
   • preserve any existing import of './globals.css' if present; if app/layout.tsx doesn't exist, create it following Next app router conventions.

2. If app/layout.tsx already exists, update it to include the metadata export and preserve existing content as much as possible (but ensure metadata is exported at top-level).

3. Add a short README note in docs/ or a new file OPENGRAPH_INSTRUCTIONS.md in the repo root describing how to add the image file to public/opengraph.png and how to override per-page metadata in Next.js (using export const metadata in page or route files).

Do not add or commit the opengraph.png image file — the user will commit it later. Include a descriptive PR title and summary. Target branch: main. Provide tests/verification notes in the PR body: how to validate with Facebook Sharing Debugger and Twitter Card Validator.

Make only the necessary code changes; do not modify other unrelated files.

This pull request was created as a result of the following prompt from Copilot chat.

Update the Next.js app router layout to export a site-wide Metadata object that includes Open Graph and Twitter card metadata referencing a default Open Graph image at /opengraph.png. The repository owner will add the actual image later; do NOT add the image file in this PR. Changes to make:

1. Modify or create app/layout.tsx (TypeScript React) to:

   • import Metadata from 'next'
   • define constants for SITE_TITLE = 'Austrovis', SITE_DESCRIPTION = 'Visualizations and research by Austrovis', SITE_URL = 'https://austrovis.github.io'
   • export a const metadata: Metadata object that sets title (default and template), description, openGraph (title, description, url, siteName, images array containing a single image entry with url '/opengraph.png', width 1200, height 630, alt text 'Austrovis — visualizations and research', locale 'en_US', type 'website'), and twitter metadata (card 'summary_large_image', title, description, images ['/opengraph.png']).
   • ensure the default RootLayout component renders html and body and includes children.
   • preserve any existing import of './globals.css' if present; if app/layout.tsx doesn't exist, create it following Next app router conventions.

2. If app/layout.tsx already exists, update it to include the metadata export and preserve existing content as much as possible (but ensure metadata is exported at top-level).

3. Add a short README note in docs/ or a new file OPENGRAPH_INSTRUCTIONS.md in the repo root describing how to add the image file to public/opengraph.png and how to override per-page metadata in Next.js (using export const metadata in page or route files).

Do not add or commit the opengraph.png image file — the user will commit it later. Include a descriptive PR title and summary. Target branch: main. Provide tests/verification notes in the PR body: how to validate with Facebook Sharing Debugger and Twitter Card Validator.

Make only the necessary code changes; do not modify other unrelated files.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[velitchko]

All good!