<template>
    <div class="seoPage">
        <HeroBox
            image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
            :aria-label="$t('pages.services.seo.hero.ariaLabel')"
            :content="{
                headline1: 'pages.services.seo.hero.headline1',
                headline2: 'pages.services.seo.hero.headline2',
                headline3: 'pages.services.seo.hero.headline3'
            }"
            :dark-background="true"
        /> 
        <section class="whatIs">
          <div class="container-10">
            <h2>Was ist Suchmaschinen-Optimierung? - Ein Überblick</h2>
            <q>Was nützt die beste Webseite der Welt, wenn sie im Verborgenen bleibt?</q>
            <p>Denn erst wenn Ihre Inhalte bei Google & Co. sichtbar sind, können sie wirken, Besucher anziehen, Vertrauen aufbauen und Conversions erzielen.</p>
          </div>
        </section>

        <section class="twoAreas">
          <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
          </svg> 
          <div class="container-10">
            <h2>Zwei zentrale Bereiche: On-Page SEO und Off-Page SEO</h2>
            <div class="areas">
              <div class="onpage">
                <p><strong>On-Page SEO</strong> umfasst alle Optimierungen, die direkt auf der Website selbst vorgenommen werden.</p>
                <ul class="check">
                  <li><strong>Technische Struktur</strong><br>HTML-Aufbau, Ladezeiten, saubere URLs und Google Core Web Vitals.</li>
                  <li><strong>Meta-Tags</strong><br>Title, Description und Robots-Tags für eine optimale Darstellung in den Suchergebnissen.</li>
                  <li><strong>Semantisches HTML & strukturierte Daten</strong><br>Mit JSON-LD & Co. Inhalte für Suchmaschinen besser interpretierbar machen.</li>
                  <li><strong>Content-Optimierung</strong><br>Relevante Keywords, klare Überschriftenstruktur und gute Lesbarkeit.</li>
                  <li><strong>Interne Verlinkung</strong><br>Intuitive Navigation und gezielte Verbindung thematisch verwandter Inhalte.</li>
                  <li><strong>Responsive Design & Barrierefreiheit</strong><br>Zugänglichkeit und optimale Darstellung auf allen Geräten.</li>
                </ul>
              </div>

              <div class="offpage">
                <p><strong>Off-Page SEO</strong> bezieht sich auf Maßnahmen außerhalb der eigenen Website.</p>
                <ul class="check">
                  <li><strong>Backlinks</strong><br>Qualitativ hochwertige Verlinkungen von anderen Websites stärken die eigene Autorität.</li>
                  <li><strong>Marken-Erwähnungen</strong><br>Präsenz und Erwähnungen im Web, auch ohne direkten Link, verbessern die Sichtbarkeit.</li>
                  <li><strong>Social Signals</strong><br>Geteilte Inhalte, Likes und Interaktionen in sozialen Netzwerken.</li>
                  <li><strong>Kooperationen & Fachbeiträge</strong><br>Autorenschaft auf Fachportalen oder Gastbeiträge in Blogs.</li>
                  <li><strong>Reputation & E-E-A-T</strong><br>Expertise, Autorität und Vertrauen sind zentrale Rankingfaktoren für Google.</li>
                </ul>
              </div>
            </div>
          </div>
          <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
          </svg> 
        </section>

        <section class="techFoundation">
          <div class="container-10">
            <h2>Sitemaps & Core Web Vitals: Das technische Fundament für SEO</h2>
            <p>Eine technisch einwandfreie Webseite bildet das Rückgrat jeder erfolgreichen Suchmaschinenoptimierung. Ohne saubere Grundlagen verpufft selbst der beste Content. Bei Nutzern wie auch bei Google.</p>

            <h3><b>Sitemaps</b> &ndash; Der Wegweiser für Suchmaschinen</h3>
            <p>XML-Sitemaps helfen Suchmaschinen dabei, alle relevanten Seiten effizient zu erfassen. In unseren Projekten setzen wir auf automatisierte Generierung direkt aus dem Headless CMS – fehlerfrei, aktuell und ohne doppelten Pflegeaufwand.</p>

            <h3><b>Core Web Vitals</b> &ndash; Nutzererfahrung messbar machen</h3>
            <p>Mit Nuxt3 als Frontend-Framework nutzen wir moderne Technologien wie Server-Side Rendering (SSR) und optimiertes Lazy Loading, um die <strong>Core Web Vitals</strong> gezielt zu verbessern. Das Ergebnis: Schnelle, stabile und reaktive Seiten – messbar bessere Rankings und Nutzererlebnisse.</p>

            <ul class="check">
              <li><strong>Ladezeit (Largest Contentful Paint)</strong><br>Schnelle Darstellung des Hauptinhalts für den Nutzer.</li>
              <li><strong>Interaktivität (First Input Delay)</strong><br>Direktes Ansprechverhalten bei Nutzeraktionen.</li>
              <li><strong>Visuelle Stabilität (Cumulative Layout Shift)</strong><br>Stabiles Layout ohne störende Verschiebungen beim Laden.</li>
              <li><strong>Strukturierte XML-Sitemaps</strong><br>Automatisch erzeugt und immer aktuell durch das CMS.</li>
              <li><strong>Technische Wartbarkeit</strong><br>SEO-relevante Metadaten, Robots-Tags und JSON-LDs direkt im Redaktionsprozess – ganz ohne Code.</li>
            </ul>

            <p>Unsere Headless-Architektur verbindet Nuxt3 mit Strapi zu einem flexiblen System, das Technik und Redaktion optimal zusammenspielt.</p>
            <p class="pt-2"><NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale></p>
          </div>
        </section>

        <section class="seoAi">
          <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
          </svg> 
          <div class="container-10">
            <h2>SEO im KI-Zeitalter: Inhalte für Menschen und Maschinen</h2>
            <p>Suchmaschinen werden immer besser darin, Inhalte zu verstehen. Mit Hilfe von <strong>Natural Language Processing (NLP)</strong>, semantischer Analyse und der Bewertung nach <strong>E-E-A-T</strong> (Experience, Expertise, Authoritativeness, Trustworthiness) rückt die tatsächliche Substanz und Einordnung eines Inhalts stärker in den Fokus.</p>

            <p>Damit Ihre Website auch für KI-Systeme wie Google Search, Bing oder generative Assistenten optimal lesbar ist, braucht es mehr als Keywords. Es braucht klare Strukturen, <strong>kontextreiche Metadaten</strong> und <strong>semantisches HTML</strong>.</p>

            <ul class="check">
              <li><strong>Strukturierte Daten (JSON-LD)</strong><br>ermöglichen Maschinen ein tieferes Verständnis für Inhalte, Rollen und Zusammenhänge.</li>
              <li><strong>Semantik & Kontext</strong><br>geben den Ton an – Headlines, Lists und Sections sprechen mit Klarheit.</li>
              <li><strong>Inhalte für Menschen geschrieben</strong><br>– aber so aufgebaut, dass auch Maschinen sie interpretieren können.</li>
              <li><strong>Zukunftsorientiert denken</strong><br>Prompt-gesteuerte CMS-Oberflächen, automatisierte Content-Vorschläge – die nächsten Schritte im KI-SEO.</li>
            </ul>

            <p>Mit unseren <b>KI-kompatiblen Webseiten</b> schaffen wir heute schon die technischen Voraussetzungen, damit Sie morgen nicht nur gefunden, sondern auch verstanden werden.</p>
            <p class="pt-3"><NuxtLinkLocale class="btn whiteBtn" to="services-ai">Erfahren Sie mehr zu KI-kompatibilität</NuxtLinkLocale></p>
          </div>
          <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
            <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
          </svg> 
        </section>

        <CallToActionBox
          headline="Sich wollen mehr Sichtbarkeit und Reichweite?"
          text="Lassen Sie uns gemeinsam durchstarten, mit technischer SEO, die messbar etwas bewegt."
          button-text="Sprechen Sie mit uns!"
        />

        <FAQArea
          page-link="/leistungen/suchmaschinenoptimierung"
          headline="Fragen und Antworten zur Suchmaschinen-Optimierung"
        />

    </div>
</template>

<script setup>
definePageMeta({
  alias: [
    '/leistungen/suchmaschinenoptimierung',     // Deutsch
    '/services/search-engine-optimization',     // Englisch
    '/services/optimisation-pour-moteurs',      // Französisch
    '/servizi/ottimizzazione-motori-di-ricerca',// Italienisch
    '/servicios/optimizacion-motores-busqueda', // Spanisch
    '/hizmetler/arama-motoru-optimizasyonu'     // Türkisch
  ],
  name: 'services-seo'
})

</script>

<style lang="sass">
.seoPage
  ul
    padding-left: 1rem
    li
      margin-bottom: 0.75rem
      position: relative
      padding-left: 2rem
      &::before
        content: '✔'
        position: absolute
        left: 0
        color: #442D36
        font-weight: bold 
  .whatIs
    q
      width: auto
      display: block
      margin: 1rem auto 2rem 5%
      background-color: $lightgrey
      padding: 2.5rem 10%
      border-radius: $loopShape
      position: relative
      font-style: italic
      font-size: 1.1rem
      font-family: 'Comfortaa-Bold'
      text-align: center
      &::before
        content: '"'
        position: absolute
        top: 1rem
        left: 6%
        color: #9F4C75
        font-size: 10rem
        font-family: 'Comfortaa-Bold'
        transform: rotate(-20deg)
      &::after
        content: '"'
        position: absolute
        bottom: -2rem
        right: 15%
        color: #9F4C75
        font-size: 10rem
        font-family: 'Comfortaa-Bold'
        transform: rotate(20deg)
      @media(max-width: $breakPointMD)
        &::before
          left: 0
  .twoAreas
    padding: 5rem 0
    background: linear-gradient(90deg, #442D36 0%, #9F4C75 100%)
    h2
      color: white
    .areas
      display: flex
      flex-wrap: wrap
      gap: 4rem
      margin-top: 2rem
      
      @media (max-width: $breakPointMD)
        flex-direction: column
      .onpage, .offpage
        flex: 1 1 300px
        background: #fff
        padding: 1rem 2rem
        border-radius: 1rem
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05)
        p
          font-weight: 600
          margin-bottom: 1rem
        
  .techFoundation
    padding: 1rem 0
    h3
      color: #442D36
      margin: 2rem auto .5rem

  .seoAi
    padding: 5rem 0
    background: linear-gradient(-90deg, #442D36 0%, #9F4C75 100%)
    color: white
    ul
      li
        &::before
          color: #FDB6D9
     
</style>