241 lines
11 KiB
Vue
241 lines
11 KiB
Vue
<template>
|
||
<div class="seoPage">
|
||
<HeroBox
|
||
image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
|
||
:aria-label="$t('pages.services.seo.hero.ariaLabel')"
|
||
:dark-background="true"
|
||
>
|
||
<h1>{{ $t('pages.services.seo.hero.headline1') }}</h1>
|
||
<h2>{{ $t('pages.services.seo.hero.headline2') }}</h2>
|
||
<h3>{{ $t('pages.services.seo.hero.headline3') }}</h3>
|
||
</HeroBox>
|
||
|
||
<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="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">
|
||
<NuxtImg
|
||
src="/uploads/ki_roboter_lupe_5aae7ffbc7.webp"
|
||
provider="strapi"
|
||
alt="ai roboter lupe"
|
||
width="300"
|
||
/>
|
||
<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>
|
||
|
||
<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> – 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> – 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>
|
||
<NuxtImg
|
||
src="/uploads/corewebvitals_893fcd3ff4.webp"
|
||
provider="strapi"
|
||
/>
|
||
<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="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>
|
||
|
||
|
||
<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: 4%
|
||
color: #9F4C75
|
||
font-size: 10rem
|
||
font-family: 'Comfortaa-Bold'
|
||
transform: rotate(-20deg)
|
||
&::after
|
||
content: '"'
|
||
position: absolute
|
||
bottom: -2rem
|
||
right: 12%
|
||
color: #9F4C75
|
||
font-size: 10rem
|
||
font-family: 'Comfortaa-Bold'
|
||
transform: rotate(20deg)
|
||
@media(max-width: $breakPointMD)
|
||
&::before
|
||
left: -2%
|
||
.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: rgba(white, .8)
|
||
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
|
||
img
|
||
width: 40%
|
||
max-width: 300px
|
||
float: right
|
||
margin: 1rem 0 2rem 2rem
|
||
filter: grayscale(.5)
|
||
|
||
.seoAi
|
||
padding: 5rem 0
|
||
background: linear-gradient(-90deg, #442D36 0%, #9F4C75 100%)
|
||
color: white
|
||
img
|
||
float: right
|
||
margin: 3rem 0 2rem 1rem
|
||
ul
|
||
li
|
||
&::before
|
||
color: #FDB6D9
|
||
|
||
</style> |