Head, Meta-Angaben und globale Attribute

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pfannkuchen-Rezept | Meine Kochseite</title>
  <meta name="description" content="Das beste Pfannkuchen-Rezept mit nur vier Zutaten.">
  <meta name="theme-color" content="#1e3a8a">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="stil.css">
  <link rel="canonical" href="https://beispiel.de/pfannkuchen">
  <meta property="og:title" content="Pfannkuchen-Rezept">
  <meta property="og:image" content="https://beispiel.de/bild.jpg">
  <script src="app.js" defer></script>
</head>

<!-- 1. Externe Datei (empfohlen) -->
<link rel="stylesheet" href="stil.css">

<!-- 2. Eingebettet im head -->
<style>
  p { color: navy; }
</style>

<!-- 3. Direkt am Element (nur für Ausnahmen) -->
<p style="color: navy;">...</p>

<link rel="preload" href="schrift.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/naechste-seite.html">

<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "Recipe", "name": "Pfannkuchen", "prepTime": "PT15M" }
</script>