seo page

components/template/PageHeader.vue

@@ -145,7 +145,7 @@ const navigationLinks = [
     label: 'services', 
     subNav: [
     { routeKey: 'services-cms', label: 'menuCms' },
-    /* { routeKey: 'services-seo', label: 'menuSEO' }, */
+    { routeKey: 'services-seo', label: 'menuSEO' },
     { routeKey: 'services-accessibility', label: 'menuAccessibility' },
     { routeKey: 'services-ai', label: 'menuAi' },
     ] 
@@ -287,7 +287,7 @@ header
 
             .sub-nav-item              
               padding-left: 1rem 
-              margin-bottom: 0.4rem
+              margin-bottom: 0.2rem
 
               .sub-nav-link
                 color: white
@@ -323,7 +323,7 @@ header
             color: white
             text-align: left
             margin-bottom: .2rem
-            padding: 1.4rem 2.8rem .5rem
+            padding: 1rem 2.8rem .5rem
             position: relative
             font-size: 1.4rem !important
             width: auto
@@ -333,12 +333,12 @@ header
             
             &::before
               content: ''
-              width: 1rem
+              width: .8rem
               height: .6rem
               background-color: rgba($primaryColor, .9)
               border-radius: $loopShape
               position: absolute
-              top: 2rem
+              top: 1.5rem
               left: 1rem
               border-radius: 20px
             &:hover

i18n/locales/de.json

@@ -178,16 +178,16 @@
                 "hero": {
                     "headline1": "Suchmaschinen-Optimierung",
                     "headline2": "mit strukturierten Daten, Meta-Tags und semantischem HTML",
-                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz!",
+                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz",
                     "ariaLabel": "Suchmaschinen-Optimierung"
                 }
             },
             "cms": {
                 "hero": {
-                    "headline1": "Flexibles Headless Content-Management-System",
+                  "headline1": "Modernes Headless CMS mit Strapi & Nuxt3",
-                    "headline2": "mit strukturierten Daten, Meta-Tags und semantischem HTML",
+                  "headline2": "Klare Trennung von Inhalt und Frontend – flexibel, performant, skalierbar",
-                    "headline3": "Mehr Sichbarkeit durch technische Exzellenz",
+                  "headline3": "Ideal für SEO, Entwickler-Workflows und redaktionelle Teams",
-                    "ariaLabel": "Content-Management-System"
+                  "ariaLabel": "Headless Content-Management-System"
                 }
             },
             "ai": {

layouts/default.vue

@@ -126,6 +126,8 @@ main
     z-index: 1 
     color: $darkgrey
     text-decoration: none
+    display: inline-block
+    text-align: center
     &::before
       content: ''
       position: absolute
@@ -163,6 +165,13 @@ main
       border: 1px solid $primaryColor
       &:hover
         background-image: linear-gradient(to top left, $primaryColor, lighten($primaryColor, 5%))
+    &.whiteBtn
+      background-color: white
+      color: $darkgrey
+      border: 1px solid transparent
+      &:hover
+        background-image: linear-gradient(to top left, $pink, lighten($pink, 5%))
+        color: white
     &.readBtn
       background-color: $primaryColor
       color: white

pages/services/ai/index.vue

@@ -98,6 +98,7 @@
           <li>{{ $t('pages.services.ai.howWeDo.point4') }}</li>
           <li>{{ $t('pages.services.ai.howWeDo.point5') }}</li>
         </ul>
+        <p class="pt-3"><NuxtLinkLocale class="btn whiteBtn" to="services-cms">Erfahren Sie mehr zu Headless CMS</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"/>

pages/services/seo/index.vue

@@ -10,6 +10,110 @@
             }"
             :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>
 
@@ -29,5 +133,89 @@ definePageMeta({
 </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>