Author SHA1 Message Date
ankn cf0fbd077e Merge PR #4: normalize SEO metadata and document structure
Reviewed and corrected. Verification: 47 tests passed; production build and source lint passed; all 15 routes have one title, description, canonical, main and h1; OG assets return HTTP 200.
2026-07-28 22:54:25 +02:00
ankn 4ca2c1ece8 fix(andreknie.de): close SEO review gaps 2026-07-28 22:53:37 +02:00
ankn 215aacf4a4 fix(andreknie.de): normalize SEO metadata and document structure 2026-07-28 21:42:54 +02:00
ankn b507199987 Merge PR #3: improve mobile dock and resource requests
Reviewed and corrected. Verification: 42 tests passed; production build and source lint passed; responsive browser checks passed at 375x844, 390x844, 430x932, and 1440x900.
2026-07-28 21:13:53 +02:00
ankn 71804bb2cc Merge PR #2: harden andreknie.de data lifecycle
Reviewed and verified: 35 tests, production build, source lint, credential scan, and responsive privacy-page checks passed. Includes updated Maike Mach role.
2026-07-28 20:46:22 +02:00
21 changed files with 197 additions and 37 deletions
+13 -2
View File
@@ -4,8 +4,19 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/logos/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dr. André Knie — KI, Transformation & Leadership</title>
<meta name="description" content="Nüchterne KI-Expertise für Mittelstand, Verwaltung und Hochschulen. Souverän, praktisch, evidenzbasiert." />
<title data-seo-fallback>Dr. André Knie Digitale Souveränität und KI</title>
<meta data-seo-fallback name="description" content="Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren." />
<link data-seo-fallback rel="canonical" href="https://andreknie.de/" />
<meta data-seo-fallback property="og:type" content="website" />
<meta data-seo-fallback property="og:url" content="https://andreknie.de/" />
<meta data-seo-fallback property="og:title" content="Dr. André Knie Digitale Souveränität und KI" />
<meta data-seo-fallback property="og:description" content="Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren." />
<meta data-seo-fallback property="og:image" content="https://andreknie.de/images/andre-knie.webp" />
<meta data-seo-fallback name="twitter:card" content="summary_large_image" />
<meta data-seo-fallback name="twitter:url" content="https://andreknie.de/" />
<meta data-seo-fallback name="twitter:title" content="Dr. André Knie Digitale Souveränität und KI" />
<meta data-seo-fallback name="twitter:description" content="Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren." />
<meta data-seo-fallback name="twitter:image" content="https://andreknie.de/images/andre-knie.webp" />
<!-- Umami Analytics -->
<script
defer
@@ -25,7 +25,7 @@ function readContentDir(subdir) {
return {
...data,
slug,
body: marked(content),
body: renderMarkdownContent(content),
_source: `${subdir}/${filename}`
}
}
@@ -41,6 +41,18 @@ function readContentDir(subdir) {
.filter(Boolean)
}
export function renderMarkdownContent(content) {
const tokens = marked.lexer(content)
const firstContentToken = tokens.findIndex(token => token.type !== 'space')
const firstToken = tokens[firstContentToken]
if (firstToken?.type === 'heading' && firstToken.depth === 1) {
tokens.splice(firstContentToken, 1)
}
return marked.parser(tokens)
}
function readMetaFile(filename) {
const filepath = join(CONTENT_DIR, 'meta', filename)
if (!existsSync(filepath)) return null
@@ -0,0 +1,19 @@
import { describe, expect, it } from 'vitest'
import { renderMarkdownContent } from './vite-plugin-content.js'
describe('markdown content rendering', () => {
it('removes only an initial level-one heading', () => {
const html = renderMarkdownContent('# Duplicate title\n\nIntro\n\n## Section')
expect(html).not.toContain('<h1>Duplicate title</h1>')
expect(html).toContain('<p>Intro</p>')
expect(html).toContain('<h2>Section</h2>')
})
it('keeps content when no initial level-one heading exists', () => {
const html = renderMarkdownContent('Intro\n\n# Deliberate heading')
expect(html).toContain('<p>Intro</p>')
expect(html).toContain('<h1>Deliberate heading</h1>')
})
})
@@ -1,33 +1,36 @@
import React from 'react'
import React, { useEffect } from 'react'
import { Helmet } from 'react-helmet-async'
import { absoluteUrl, BRAND_SUFFIX, DEFAULT_DESCRIPTION, DEFAULT_IMAGE, DEFAULT_TITLE, normalizeTitle } from './seo.js'
export default function SEOHead({ title, description, url, image, type = 'website' }) {
const defaultTitle = "Dr. André Knie - Experte für Digitale Souveränität"
const defaultDescription = "Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren."
export default function SEOHead({ title, description, url, image, type = 'website', noindex = false }) {
const pageTitle = normalizeTitle(title)
const siteTitle = pageTitle === DEFAULT_TITLE ? pageTitle : `${pageTitle}${BRAND_SUFFIX}`
const siteDescription = description || DEFAULT_DESCRIPTION
const canonicalUrl = absoluteUrl(url || '/', '/')
const imageUrl = absoluteUrl(image, DEFAULT_IMAGE)
const siteTitle = title ? `${title} | Dr. André Knie` : defaultTitle
const siteDesc = description || defaultDescription
const siteUrl = url ? `https://andreknie.de${url}` : "https://andreknie.de"
const siteImage = image || "https://andreknie.de/images/og-image.webp"
useEffect(() => {
document.head.querySelectorAll('[data-seo-fallback]').forEach(node => node.remove())
}, [])
return (
<Helmet>
<title>{siteTitle}</title>
<meta name="description" content={siteDesc} />
<meta name="description" content={siteDescription} />
<link rel="canonical" href={canonicalUrl} />
{noindex && <meta name="robots" content="noindex,follow" />}
{/* Open Graph / Facebook */}
<meta property="og:type" content={type} />
<meta property="og:url" content={siteUrl} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:title" content={siteTitle} />
<meta property="og:description" content={siteDesc} />
<meta property="og:image" content={siteImage} />
<meta property="og:description" content={siteDescription} />
<meta property="og:image" content={imageUrl} />
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={siteUrl} />
<meta property="twitter:title" content={siteTitle} />
<meta property="twitter:description" content={siteDesc} />
<meta property="twitter:image" content={siteImage} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={canonicalUrl} />
<meta name="twitter:title" content={siteTitle} />
<meta name="twitter:description" content={siteDescription} />
<meta name="twitter:image" content={imageUrl} />
</Helmet>
)
}
@@ -0,0 +1,62 @@
import React from 'react'
import { afterEach, describe, expect, it } from 'vitest'
import { render, cleanup } from '@testing-library/react'
import { HelmetProvider } from 'react-helmet-async'
import SEOHead from './SEOHead'
import { BRAND_SUFFIX } from './seo.js'
afterEach(() => {
cleanup()
document.head.querySelectorAll('[data-rh="true"]').forEach(node => node.remove())
})
describe('SEOHead', () => {
it('renders one branded title, description, and canonical link', () => {
render(
<HelmetProvider>
<SEOHead title={`Artikel${BRAND_SUFFIX}`} description="Synthetic description" url="/artikel" />
</HelmetProvider>,
)
expect(document.head.querySelectorAll('title')).toHaveLength(1)
expect(document.title).toBe(`Artikel${BRAND_SUFFIX}`)
expect(document.title.match(/Dr\. André Knie/g)).toHaveLength(1)
expect(document.head.querySelectorAll('meta[name="description"]')).toHaveLength(1)
expect(document.head.querySelector('link[rel="canonical"]')?.getAttribute('href')).toBe('https://andreknie.de/artikel')
})
it('replaces static fallback metadata instead of duplicating it', () => {
document.head.insertAdjacentHTML('beforeend', `
<title data-seo-fallback>Fallback</title>
<meta data-seo-fallback name="description" content="Fallback description">
<link data-seo-fallback rel="canonical" href="https://andreknie.de/">
`)
render(
<HelmetProvider>
<SEOHead title="Artikel" description="Article description" url="/artikel" />
</HelmetProvider>,
)
expect(document.head.querySelectorAll('[data-seo-fallback]')).toHaveLength(0)
expect(document.head.querySelectorAll('title')).toHaveLength(1)
expect(document.head.querySelectorAll('meta[name="description"]')).toHaveLength(1)
expect(document.head.querySelectorAll('link[rel="canonical"]')).toHaveLength(1)
})
it('normalizes relative and absolute image URLs', () => {
const { rerender } = render(
<HelmetProvider>
<SEOHead title="Test" image="/images/andre-knie.webp" />
</HelmetProvider>,
)
expect(document.head.querySelector('meta[property="og:image"]')?.getAttribute('content')).toBe('https://andreknie.de/images/andre-knie.webp')
rerender(
<HelmetProvider>
<SEOHead title="Test" image="https://cdn.example.invalid/image.webp" />
</HelmetProvider>,
)
expect(document.head.querySelector('meta[property="og:image"]')?.getAttribute('content')).toBe('https://cdn.example.invalid/image.webp')
})
})
@@ -0,0 +1,16 @@
export const SITE_URL = 'https://andreknie.de'
export const BRAND_SUFFIX = ' | Dr. André Knie'
export const DEFAULT_TITLE = 'Dr. André Knie Digitale Souveränität und KI'
export const DEFAULT_DESCRIPTION = 'Dr. André Knie unterstützt Organisationen dabei, digitale Souveränität zu erlangen und sicher von KI zu profitieren.'
export const DEFAULT_IMAGE = '/images/andre-knie.webp'
export function absoluteUrl(value, fallback) {
const candidate = value || fallback
if (/^https?:\/\//i.test(candidate)) return candidate
return new URL(candidate.startsWith('/') ? candidate : `/${candidate}`, SITE_URL).href
}
export function normalizeTitle(title) {
if (!title) return DEFAULT_TITLE
return title.endsWith(BRAND_SUFFIX) ? title.slice(0, -BRAND_SUFFIX.length) : title
}
@@ -2,6 +2,7 @@ import React from 'react'
import { useMeta } from '../hooks/useContent'
import { ExternalLink, Globe } from 'lucide-react'
import SpeakerCvRequest from '../components/SpeakerCvRequest'
import SEOHead from '../components/SEOHead'
export default function About() {
const { profile, about } = useMeta()
@@ -12,6 +13,7 @@ export default function About() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Über mich" description="Über Dr. André Knie, seine Arbeit, Stationen und Perspektive auf KI und digitale Souveränität." url="/ueber-mich" />
<div className="app-container" style={{ maxWidth: '800px' }}>
<div className="section-header">
<h1 className="section-title">Über <span className="text-gradient">mich</span></h1>
@@ -11,10 +11,16 @@ export default function ArticleSingle() {
if (!post) {
return (
<div className="page-container app-container" style={{ textAlign: 'center', paddingTop: '150px' }}>
<h2>Artikel nicht gefunden</h2>
<main className="page-container app-container" style={{ textAlign: 'center', paddingTop: '150px' }}>
<SEOHead
title="Artikel nicht gefunden"
description="Der angeforderte Artikel wurde nicht gefunden."
url={`/artikel/${slug}`}
noindex
/>
<h1>Artikel nicht gefunden</h1>
<Link to="/artikel" className="primary-button" style={{ marginTop: '20px' }}>Zurück zur Übersicht</Link>
</div>
</main>
)
}
@@ -23,9 +29,11 @@ export default function ArticleSingle() {
: ''
return (
<div className="page-container article-single-page">
<main className="page-container article-single-page">
<SEOHead
title={`${post.title} | Dr. André Knie`}
url={`/artikel/${post.slug}`}
type="article"
title={post.title}
description={post.excerpt || post.title}
/>
<div className="app-container" style={{ maxWidth: '800px', margin: '0 auto', paddingTop: '120px' }}>
@@ -48,6 +56,6 @@ export default function ArticleSingle() {
/>
</article>
</div>
</div>
</main>
)
}
@@ -20,9 +20,10 @@ export default function Articles() {
})
return (
<div className="page-container articles-page">
<main className="page-container articles-page">
<SEOHead
title="Artikel & Beiträge | Dr. André Knie"
url="/artikel"
title="Artikel & Beiträge"
description="Aktuelle Artikel und LinkedIn-Beiträge zu den Themen Softwareentwicklung, Leadership und Technologie."
/>
<header className="page-header">
@@ -102,6 +103,6 @@ export default function Articles() {
<p className="no-articles">Keine Artikel für diese Suche gefunden.</p>
)}
</section>
</div>
</main>
)
}
@@ -13,6 +13,8 @@ export default function Confirmation() {
<SEOHead
title={isSuccess ? "Vielen Dank" : "Ein Fehler ist aufgetreten"}
description={isSuccess ? "Ihre Nachricht wurde erfolgreich gesendet." : "Es gab ein Problem beim Senden Ihrer Nachricht."}
url="/bestaetigung"
noindex
/>
<main style={{ paddingTop: '120px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>
@@ -1,6 +1,7 @@
import React from 'react'
import { useContent, useMeta } from '../hooks/useContent'
import ServiceAccordion from '../components/ServiceAccordion'
import SEOHead from '../components/SEOHead'
export default function Consulting() {
const { items } = useContent('consulting', { pageSize: 10 })
@@ -8,6 +9,7 @@ export default function Consulting() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Beratung" description="Beratung zu KI-Strategie, digitaler Souveränität und praktischer Transformation." url="/consulting" />
<div className="app-container">
<div className="section-header">
<h1 className="section-title"><span className="text-gradient">Leistungen</span></h1>
@@ -1,6 +1,7 @@
import React, { useState } from 'react'
import { useFormSubmit } from '../hooks/useFormSubmit'
import { validateContact } from '../utils/validation'
import SEOHead from '../components/SEOHead'
export default function Contact() {
const [form, setForm] = useState({ name: '', email: '', message: '', company_website: '' })
@@ -18,6 +19,7 @@ export default function Contact() {
if (success) {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Kontakt" description="Nimm Kontakt zu Dr. André Knie auf." url="/kontakt" />
<div className="app-container" style={{ textAlign: 'center', maxWidth: '600px' }}>
<h1 style={{ marginBottom: '16px' }}>Nachricht gesendet</h1>
<p style={{ color: 'var(--text-secondary)' }}>Du erhältst eine Bestätigungs-E-Mail. Bitte klicke den Link darin, damit deine Nachricht weitergeleitet wird.</p>
@@ -28,6 +30,7 @@ export default function Contact() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Kontakt" description="Nimm Kontakt zu Dr. André Knie auf." url="/kontakt" />
<div className="app-container" style={{ maxWidth: '600px' }}>
<div className="section-header">
<h1 className="section-title"><span className="text-gradient">Kontakt</span></h1>
@@ -1,8 +1,10 @@
import React from 'react'
import SEOHead from '../components/SEOHead'
export default function Datenschutz() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Datenschutz" description="Datenschutzerklärung von andreknie.de." url="/datenschutz" />
<div className="app-container" style={{ maxWidth: '700px' }}>
<h1 style={{ marginBottom: '32px' }}>Datenschutzerklärung</h1>
<div style={{ color: 'var(--text-secondary)', lineHeight: 1.8 }}>
@@ -6,6 +6,7 @@ import UpcomingEvents from '../components/UpcomingEvents'
import StatsCube from '../components/StatsCube'
import DotCloudIcon from '../components/DotCloudIcon'
import PhotoBand from '../components/PhotoBand'
import SEOHead from '../components/SEOHead'
import './Home.css'
const PHOTO_BAND_IMAGES = [
@@ -21,6 +22,7 @@ export default function Home() {
return (
<main>
<SEOHead url="/" />
{/* Hero */}
<section className="hero">
<div className="app-container hero-content">
@@ -1,8 +1,10 @@
import React from 'react'
import SEOHead from '../components/SEOHead'
export default function Impressum() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Impressum" description="Impressum von andreknie.de." url="/impressum" />
<div className="app-container" style={{ maxWidth: '700px' }}>
<h1 style={{ marginBottom: '32px' }}>Impressum</h1>
<div style={{ color: 'var(--text-secondary)', lineHeight: 1.8 }}>
@@ -4,6 +4,7 @@ import { Search } from 'lucide-react'
import { useContent } from '../hooks/useContent'
import { formatDate } from '../utils/formatDate'
import { decodeHtml } from '../utils/decodeHtml'
import SEOHead from '../components/SEOHead'
export default function Kniepunkt() {
const [searchQuery, setSearchQuery] = useState('')
@@ -21,6 +22,7 @@ export default function Kniepunkt() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Kniepunkt" description="Die Kniepunkt-Kolumne von Dr. André Knie über KI, Technologie und die Absurditäten des digitalen Wandels." url="/kniepunkt" />
<div className="app-container">
<div className="section-header">
<h1 className="section-title"><span className="text-gradient">Kniepunkt</span></h1>
@@ -2,6 +2,7 @@ import React from 'react'
import { useParams, Link } from 'react-router-dom'
import { useContentItem } from '../hooks/useContent'
import { formatDate } from '../utils/formatDate'
import SEOHead from '../components/SEOHead'
export default function KniepunktIssue() {
const { slug } = useParams()
@@ -10,6 +11,7 @@ export default function KniepunktIssue() {
if (!issue) {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Kniepunkt-Ausgabe nicht gefunden" description="Die angeforderte Kniepunkt-Ausgabe wurde nicht gefunden." noindex url={`/kniepunkt/${slug}`} />
<div className="app-container" style={{ textAlign: 'center' }}>
<h1>Ausgabe nicht gefunden</h1>
<p style={{ color: 'var(--text-secondary)' }}>Diese Kniepunkt-Ausgabe existiert nicht.</p>
@@ -21,6 +23,7 @@ export default function KniepunktIssue() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
<div className="app-container" style={{ maxWidth: '700px' }}>
<Link to="/kniepunkt" style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginBottom: '24px', display: 'inline-block' }}>&larr; Alle Ausgaben</Link>
<h1 style={{ marginBottom: '12px' }}>{issue.title}</h1>
@@ -1,9 +1,11 @@
import React from 'react'
import { Link } from 'react-router-dom'
import SEOHead from '../components/SEOHead'
export default function NotFound() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<SEOHead title="Seite nicht gefunden" description="Die angeforderte Seite wurde nicht gefunden." noindex url="/404" />
<div className="app-container" style={{ textAlign: 'center' }}>
<h1 style={{ fontSize: '6rem', marginBottom: '16px' }}><span className="text-gradient">404</span></h1>
<p style={{ color: 'var(--text-secondary)', fontSize: '1.2rem', marginBottom: '32px' }}>Diese Seite existiert nicht.</p>
@@ -2,6 +2,7 @@ import React from 'react'
import { useContent } from '../hooks/useContent'
import { formatDate } from '../utils/formatDate'
import { ExternalLink } from 'lucide-react'
import SEOHead from '../components/SEOHead'
export default function Podcast() {
const { items: allEpisodes } = useContent('podcast', { visibility: 'all', pageSize: 100 })
@@ -13,6 +14,7 @@ export default function Podcast() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Podcast" description="Podcasts, Gastauftritte und Gespräche von und mit Dr. André Knie über KI, Transformation und Leadership." url="/podcast" />
<div className="app-container" style={{ maxWidth: '800px', margin: '0 auto' }}>
<div className="section-header">
<h1 className="section-title"><span className="text-gradient">Podcast</span></h1>
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
import { useContent } from '../hooks/useContent'
import { useFormSubmit } from '../hooks/useFormSubmit'
import { validateResourceDownload } from '../utils/validation'
import SEOHead from '../components/SEOHead'
const inputStyle = {
width: '100%',
@@ -80,6 +81,7 @@ export default function Resources() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Ressourcen" description="Ausgewählte Materialien und Profile von Dr. André Knie auf Anfrage." url="/resources" />
<div className="app-container">
<div className="section-header">
<h1 className="section-title"><span className="text-gradient">Ressourcen</span></h1>
@@ -1,6 +1,7 @@
import React from 'react'
import { useContent, useMeta } from '../hooks/useContent'
import SpeakingAccordion from '../components/SpeakingAccordion'
import SEOHead from '../components/SEOHead'
export default function Speaking() {
const { items: allTalks } = useContent('talks', { visibility: 'all', pageSize: 100 })
@@ -9,6 +10,7 @@ export default function Speaking() {
return (
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
<SEOHead title="Speaking" description="Keynotes, Workshops und Panels von Dr. André Knie zu KI, Transformation und Leadership." url="/speaking" />
<div className="app-container">
<div className="section-header">
<h1 className="section-title"><span className="text-gradient">Speaking</span></h1>