Eine 360° Tour auf der Website einbinden dauert 5-15 Minuten. Sie brauchen nur den Embed-Code (iFrame) Ihrer Tour und einen HTML-Block in Ihrem Website-System. Die Tour wird dann direkt auf Ihrer Seite angezeigt - responsive, schnell ladend, SEO-freundlich.
Warum Sie eine 360° Tour auf Ihrer Website brauchen
Hier ist die Wahrheit: Die meisten 360° Touren verstauben auf externen Plattformen. Ein Link hier. Ein Link da. Aber niemand klickt.
Die Tour direkt auf Ihrer Website? Das ändert alles.
Besucher, die bereits auf Ihrer Seite sind, haben Interesse. Sie suchen nach Gründen, bei Ihnen zu kaufen. Eine eingebettete Tour gibt ihnen genau das: einen Grund zu bleiben. Zu erkunden. Zu entscheiden.
Die Zahlen sprechen für sich: Websites mit eingebetteten 360° Touren haben eine um 67% höhere Verweildauer. Das bedeutet mehr Zeit für Ihre Botschaft. Mehr Engagement. Mehr Conversions.
Und noch etwas
Google liebt eingebettete Inhalte. Eine 360° Tour auf Ihrer Website signalisiert Qualität und Relevanz. Das kann Ihre Rankings positiv beeinflussen - besonders in Kombination mit Ihrem Google Business Profil.
Die Grundlagen: Was Sie wissen müssen
Bevor wir in die Technik einsteigen, klären wir die Basics.
Was ist ein Embed-Code?
Ein Embed-Code ist ein kleines Stück HTML-Code. Er sagt Ihrer Website: Lade hier diese Tour von einem anderen Server. Das nennt sich iFrame - ein Fenster in Ihrer Website, das Inhalte von woanders zeigt.
Ein typischer Embed-Code sieht so aus:
<iframe src="https://tour.immobilien-fotograf.wien/tour-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>Kopieren. Einfügen. Fertig. So einfach ist das im Kern.
Wo bekomme ich den Embed-Code?
Das hängt davon ab, wer Ihre Tour erstellt hat:
- Bei uns: Sie erhalten den Code automatisch mit der fertigen Tour. Per E-Mail, im Kundendashboard, oder wir senden ihn Ihnen direkt zu.
- Matterport: Im Matterport Dashboard unter Teilen > Einbetten
- Kuula: Auf der Tour-Seite > Share > Embed
- 3DVista: Nach dem Export finden Sie den Code im Ausgabeordner
Anleitung für WordPress
WordPress ist das beliebteste CMS der Welt. Und die Integration ist denkbar einfach.
Mit dem Gutenberg Editor (Block Editor)
Schritt 1: Öffnen Sie die Seite, auf der die Tour erscheinen soll.
Schritt 2: Klicken Sie auf das + Symbol, um einen neuen Block hinzuzufügen.
Schritt 3: Suchen Sie nach "HTML" oder "Individuelles HTML".
Schritt 4: Fügen Sie den Embed-Code ein.
Schritt 5: Speichern und Vorschau ansehen.
Das war es. Wirklich.
Mit dem Classic Editor
Wechseln Sie vom Visuellen Modus in den Text-Modus (Reiter oben rechts). Fügen Sie den Code an der gewünschten Stelle ein. Zurück zum Visuellen Modus. Speichern.
Mit Elementor
Elementor-Nutzer haben es besonders leicht:
- Ziehen Sie das Widget "HTML" an die gewünschte Stelle
- Fügen Sie den iFrame-Code ein
- Fertig
Pro-Tipp für Elementor: Nutzen Sie einen Spacer darüber und darunter für optimalen Abstand.
Mit Divi
Im Divi Builder:
- Fügen Sie ein Code-Modul hinzu
- Wechseln Sie zum Text-Tab
- Fügen Sie den Embed-Code ein
- Speichern
Anleitung für Shopify
Perfekt für E-Commerce. Zeigen Sie Ihr Geschäft, bevor der Kunde kauft.
Auf einer Produktseite
Gehen Sie zu Produkte > Wählen Sie das Produkt > Beschreibung. Klicken Sie auf "HTML anzeigen" (das <> Symbol). Fügen Sie den Embed-Code ein. Speichern.
Auf einer eigenen Seite
Gehen Sie zu Online Shop > Seiten > Seite hinzufügen. Im Content-Bereich klicken Sie auf "HTML anzeigen". Fügen Sie den Code ein. Speichern und veröffentlichen.
Im Theme (für Profis)
Für permanente Integration: Online Shop > Themes > Actions > Edit Code. Navigieren Sie zu der entsprechenden Template-Datei und fügen Sie den Code an der gewünschten Stelle ein.
Anleitung für Custom HTML Websites
Bei selbst gebauten Websites haben Sie volle Kontrolle.
Einfache Integration
Öffnen Sie Ihre HTML-Datei in einem Editor. Fügen Sie den iFrame-Code an der Stelle ein, wo die Tour erscheinen soll. Speichern. Hochladen.
<div class="tour-container">
<iframe
src="https://tour.immobilien-fotograf.wien/tour-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="lazy"
></iframe>
</div>Responsive CSS
Für perfekte Darstellung auf allen Geräten fügen Sie dieses CSS hinzu:
.tour-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
height: 0;
overflow: hidden;
}
.tour-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Dieses CSS sorgt dafür, dass die Tour das richtige Seitenverhältnis behält, egal wie breit der Bildschirm ist.
Anleitung für Wix
Wix macht es einfach - wenn man weiß, wo man suchen muss.
- Öffnen Sie den Wix Editor
- Klicken Sie auf + (Hinzufügen)
- Wählen Sie "Einbettungen" > "Individueller Code"
- Fügen Sie den iFrame-Code ein
- Passen Sie die Größe an
- Veröffentlichen
Anleitung für Squarespace
Bei Squarespace nutzen Sie den Code-Block:
- Klicken Sie auf die Stelle, wo die Tour erscheinen soll
- Fügen Sie einen Block hinzu
- Wählen Sie "Code"
- Fügen Sie den Embed-Code ein
- Speichern
Performance-Optimierung
Eine 360° Tour kann groß sein. So laden Sie sie intelligent.
Lazy Loading aktivieren
Lazy Loading bedeutet: Die Tour wird erst geladen, wenn der Besucher zu ihr scrollt. Das spart Ladezeit und Bandbreite.
Fügen Sie einfach loading="lazy" zum iFrame hinzu:
<iframe src="..." loading="lazy" width="100%" height="600"></iframe>Thumbnail mit Click-to-Load
Noch besser: Zeigen Sie erst ein Vorschaubild. Die Tour lädt nur, wenn der Besucher klickt. So funktioniert es mit JavaScript:
<div id="tour-placeholder" onclick="loadTour()">
<img src="tour-thumbnail.jpg" alt="360° Tour starten">
<button>Tour starten</button>
</div>
<script>
function loadTour() {
document.getElementById('tour-placeholder').innerHTML =
'<iframe src="..." width="100%" height="600"></iframe>';
}
</script>SEO-Optimierung für eingebettete Touren
Eine Tour allein bringt keine Rankings. Aber kombiniert mit dem richtigen Content? Magie.
Strukturierte Daten hinzufügen
Für Immobilien fügen Sie Schema.org Markup hinzu. Das hilft Google, den Kontext zu verstehen. Beispiel für eine Immobilien-Tour:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Apartment",
"name": "3-Zimmer Wohnung Wien Döbling",
"description": "Moderne Wohnung mit Balkon",
"floorSize": {
"@type": "QuantitativeValue",
"value": 85,
"unitCode": "MTK"
},
"virtualTour": {
"@type": "VirtualLocation",
"url": "https://tour.example.com/tour-id"
}
}
</script>Umgebenden Text optimieren
Die Tour braucht Kontext. Schreiben Sie vor und nach dem iFrame relevanten Text. Beschreiben Sie, was zu sehen ist. Nutzen Sie Keywords natürlich.
Häufige Probleme und Lösungen
Die Tour wird nicht angezeigt
Mögliche Ursachen:
- HTTPS-Problem: Ihre Website muss HTTPS verwenden, wenn die Tour-URL HTTPS ist. Mischen Sie nicht HTTP und HTTPS.
- Content Security Policy: Manche Websites blockieren iFrames. Prüfen Sie die Einstellungen oder fragen Sie Ihren Hosting-Anbieter.
- Falscher Code: Stellen Sie sicher, dass der komplette Code kopiert wurde, inklusive der Anführungszeichen.
Die Tour ist zu klein auf Mobile
Verwenden Sie die responsive CSS-Lösung von oben. Oder passen Sie die Höhe für Mobile an:
@media (max-width: 768px) {
.tour-container {
padding-bottom: 75%; /* Höheres Seitenverhältnis für Mobile */
}
}Die Seite lädt langsam
Aktivieren Sie Lazy Loading. Oder nutzen Sie die Click-to-Load Lösung. Bei sehr langsamen Seiten: Prüfen Sie die Größe Ihrer anderen Inhalte - oft ist die Tour nicht das Problem.
Wir übernehmen die Integration für Sie
Keine Zeit oder keine Lust? Wir machen das für Sie.
Im Rahmen unserer 360° Rundgang Pakete bieten wir die Website-Integration als Service an. Für €149 einmalig integrieren wir Ihre Tour professionell in Ihre Website - inklusive responsive Design, Lazy Loading und SEO-Optimierung.
Rufen Sie uns an unter +43 650 9313091 und besprechen Sie Ihre Anforderungen.
Verwandte Themen
Gründer & Immobilienfotograf
Lucas Hammerer ist Gründer von Immobilien-Fotograf Wien und hat sich auf hochwertige Immobilienfotografie, 360° Rundgänge und Drohnenaufnahmen spezialisiert. Mit über 500 erfolgreich vermarkteten Immobilien und langjähriger Erfahrung in der Wiener Immobilienbranche unterstützt er Makler, Bauträger und Privatverkäufer dabei, ihre Objekte optimal zu präsentieren. Seine Expertise umfasst Matterport 3D-Touren, HDR-Fotografie und moderne Vermarktungsstrategien.