SEO Branding

Optimer din brand synlighed i søgeresultater og social media med meta tags og Open Graph

Hvad er SEO Branding?

SEO branding handler om at kontrollere hvordan dit brand fremstår i søgeresultater, social media og andre platforme. Det inkluderer meta tags, Open Graph, Twitter Cards og mere.

Meta Tags

Title Tag

Den vigtigste meta tag - vises som overskrift i søgeresultater.

<title>Page Title | Brand Name</title>

<!-- Next.js -->
export const metadata = {
  title: 'Page Title | Brand Name',
}

Best practice: 50-60 tegn, inkluder brand og keyword

Meta Description

Beskrivelse der vises under title i søgeresultater.

<meta name="description" content="Compelling description..." />

<!-- Next.js -->
export const metadata = {
  description: 'Compelling description...',
}

Best practice: 150-160 tegn, handlingsopfordrende

Open Graph (Facebook)

Kontroller hvordan dine sider ser ud når de deles på Facebook, LinkedIn og andre sociale platforme.

<!-- Essential Open Graph tags -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Brand Name" />

<!-- Next.js -->
export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description',
    images: [{ url: 'https://example.com/image.jpg' }],
    url: 'https://example.com/page',
    type: 'website',
    siteName: 'Brand Name',
  },
}

OG Image: Anbefalet størrelse 1200x630px

Twitter Cards

Optimer hvordan links vises når de deles på Twitter/X.

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@yourusername" />

<!-- Next.js -->
export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description',
    images: ['https://example.com/image.jpg'],
    site: '@yourusername',
  },
}

Card Types:

• summary - Lille billede (1:1)

• summary_large_image - Stort billede (2:1)

Favicon & App Icons

<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

<!-- Next.js (app/icon.png or app/icon.svg) -->
// Next.js genererer automatisk favicon fra:
// - app/icon.png
// - app/icon.svg
// - app/apple-icon.png

Komplet Eksempel (Next.js)

// app/layout.tsx eller app/page.tsx
export const metadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: 'Brand Name - Tagline',
    template: '%s | Brand Name',
  },
  description: 'Compelling brand description...',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  authors: [{ name: 'Brand Name' }],

  openGraph: {
    type: 'website',
    locale: 'da_DK',
    url: 'https://example.com',
    siteName: 'Brand Name',
    title: 'Brand Name - Tagline',
    description: 'Compelling brand description...',
    images: [{
      url: '/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Brand Name',
    }],
  },

  twitter: {
    card: 'summary_large_image',
    title: 'Brand Name - Tagline',
    description: 'Compelling brand description...',
    images: ['/og-image.jpg'],
    site: '@yourusername',
  },

  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

Testing Tools

Facebook Sharing Debugger

Test hvordan dine sider ser ud på Facebook.

developers.facebook.com/tools/debug →

Twitter Card Validator

Valider Twitter Cards og se preview.

cards-dev.twitter.com/validator →