SEO Configuration

The FiNAN website uses a centralized approach to manage SEO, ensuring consistent meta tags, Open Graph data, and Twitter cards across all pages. This configuration is primarily handled through the siteConfig.ts file and applied via a shared layout component.

Site Configuration

The src/data/siteConfig.ts file serves as the single source of truth for global SEO settings. This file exports a configuration object that defines defaults for the site.

export const siteConfig = {
  title: "FiNAN",
  description: "The Finnish Alumni Network of North America",
  url: "https://finan.eu", // Canonical URL for the site
  defaultImage: "/images/og-default.jpg", // Default image for social sharing
  twitterHandle: "@finan_eu",
  organization: {
    name: "FiNAN",
    logo: "/images/logo.png",
  },
};

Developers should update this file when changing global settings like the default social image or updated descriptions.

Meta Tags

Meta tags are automatically generated for each page based on the props passed to the Layout or PageHeader components.

Basic Tags

Every page includes the following standard tags:

<title>: Constructed as Page Title | FiNAN
<meta name="description">: The page description or the default from siteConfig.
<meta name="viewport">: Ensures mobile responsiveness.
<link rel="canonical">: The canonical URL for the current page.

Configuring Page-Specific SEO

When creating a new page, you can override the default SEO settings by passing props to the main layout component:

---
import Layout from '../layouts/Layout.astro';
---

<Layout
  title="Our events"
  description="Upcoming events and gatherings for FiNAN members."
>
  <!-- Page content -->
</Layout>

Open Graph & Twitter Cards

Social media platforms use Open Graph (OG) and Twitter Card tags to display rich previews when links are shared. The FiNAN website automatically includes these tags.

Default Behavior

If no specific image is provided for a page, the site uses siteConfig.defaultImage.

To specify a custom image for a specific page (like a blog post or event), use the image prop:

<Layout
  title="Annual Gathering 2024"
  image="/images/events/2024-gathering.jpg"
>

This will generate:

<meta property="og:image" content="https://finan.eu/images/events/2024-gathering.jpg" />
<meta name="twitter:image" content="https://finan.eu/images/events/2024-gathering.jpg" />
<meta name="twitter:card" content="summary_large_image" />

Dimensions: Recommended size is 1200 x 630 pixels.
File Size: Keep under 1MB for fast loading.
Content: Ensure the image is relevant to the page content.