Rehber İçerik Haritası
- 1. Sanal Tur Entegrasyonunun Temel Mantığı: iframe Nedir?
- 2. Standart HTML Sitelere Ekleme (Responsive Kod Şablonu)
- 3. WordPress, Elementor & Popüler CMS'lerde Adım Adım Kurulum
- 4. Google Street View Sanal Turunu Web Sitesine Gömme
- 5. En Büyük Mobil Problem: Scroll Hijacking (Sayfa Kilitlenmesi) ve Çözümü
- 6. Web Hızını (PageSpeed & Core Web Vitals) Korumanın 4 Kuralı
- 7. Barındırma Karşılaştırması: Bulut Abonelik vs Kendi Sunucunuz (Self-Hosted)
- 8. Sıkça Sorulan Sorular (SSS)
1. Sanal Tur Entegrasyonunun Temel Mantığı: iframe Nedir?
360 derece sanal turlar; onlarca yüksek çözünürlüklü panoramik görsel, derinlik haritaları, radar kat planları ve etkileşimli JavaScript kütüphanelerinden oluşan mini birer web uygulamasıdır. Bu devasa veri yığınını doğrudan web sitenizin ana kodlarına dahil etmek yerine, HTML standardı olan <iframe> (Inline Frame) etiketiyle sayfanıza pencere açarak bağlarsınız.
Ancak profesyonel bir 360° deneyimi için standart bir iframe yeterli değildir. Kullanıcının cep telefonunun hareket sensörlerini (jiroskop / ivmeölçer) kullanabilmesi ve VR gözlük moduna geçebilmesi için izin parametrelerinin (Permissions Policy) eksiksiz tanımlanması şarttır.
allowfullscreen: Turun tek tıkla tam ekran moduna geçmesini sağlar.gyroscope; accelerometer: Telefonu sağa/sola çevirdiğinizde sanal turun da dönmesini sağlayan sensör erişimi.xr-spatial-tracking: Meta Quest, Apple Vision Pro gibi VR/AR başlıklarda 3D uzamsal takibi aktif eder.loading="lazy": Ziyaretçi sanal turun olduğu bölüme kaydırmadan turun internet tüketmesini engeller.
2. Standart HTML Sitelere Ekleme (Responsive Kod Şablonu)
Birçok amatör uygulamada iframe'e sabit piksel değerleri (örneğin width="800" height="500") verilir. Bu durum mobil cihazlarda sayfanın sağa doğru taşmasına ve tasarımın bozulmasına yol açar.
Aşağıdaki modern Responsive (Duyarlı) CSS & HTML şablonu, her ekran genişliğine (16:9 oranında) mükemmel uyum sağlar:
<!-- 1. CSS Kodları (style.css dosyanıza ekleyin) -->
<style>
.sanal-tur-kapsayici {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 16:9 Altın Oran */
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.sanal-tur-kapsayici iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<!-- 2. HTML Çağırma Kodu (Görünmesini istediğiniz yere yapıştırın) -->
<div class="sanal-tur-kapsayici">
<iframe
src="https://vrturu.com/ornek-proje/"
allow="accelerometer; gyroscope; xr-spatial-tracking; fullscreen"
allowfullscreen
loading="lazy">
</iframe>
</div>3. WordPress, Elementor & Popüler CMS'lerde Adım Adım Kurulum
WordPress sitenizde sanal tur yayınlamak için herhangi bir ağır eklenti (plugin) kurmanıza gerek yoktur. Eklentiler sitenizi yavaşlatır ve güvenlik açığı yaratabilir. Bunun yerine yerel blokları kullanabilirsiniz:
A) WordPress Blok Editörü (Gutenberg) İle Ekleme
- Sanal turu eklemek istediğiniz sayfayı açıp yeni blok ekleme (+) simgesine tıklayın.
- Arama kutusuna "Özel HTML" (Custom HTML) yazıp ilgili bloğu seçin.
- Yukarıda paylaştığımız responsive iframe kodunu yapıştırın ve "Önizleme" sekmesinden kontrol edip sayfayı güncelleyin.
B) Elementor Sayfa Düzenleyici İle Ekleme
- Elementor editöründe sol menüden "HTML" bileşenini (widget) sayfadaki dilediğiniz bölüme sürükleyin.
- Sol taraftaki "HTML Kodu" alanına iframe kodunuzu yapıştırın.
- Bölüm genişliğini "Tam Genişlik" veya "Kutulu" olarak seçerek responsive görünümünü mobil cihaz görünümünde test edin.
C) Wix, Shopify & Webflow İle Ekleme
Wix'te Ekle > Gömülü > HTML iframe yolunu izleyin. Shopify'da ise ürün açıklaması veya sayfa editöründe "<> HTML'i Göster" ikonuna tıklayarak iframe kodunu ilgili satıra ekleyin.
4. Google Street View Sanal Turunu Web Sitesine Gömme
İşletmeniz için Google Haritalar'a onaylı bir Google Street View çekimi yaptırdıysanız, bu 360° çekimi web sitenize doğrudan Google üzerinden hiçbir ek ücret ödemeden gömebilirsiniz:
Google Haritalar'dan Embed Kodu Alma Adımları
- Bilgisayarınızdan Google Haritalar'ı açın ve işletmenizin adını aratın.
- Fotoğraflar sekmesinden 360° / Street View görünümünü açın ve ziyaretçinin ilk görmesini istediğiniz açıya kamerayı çevirin.
- Sol üstteki üç nokta (⋮) menüsüne tıklayın ve "Resmi paylaş veya yerleştir" seçeneğini seçin.
- Açılan pencerede "Harita Yerleştir" sekmesine geçin ve "HTML'yi Kopyala" butonuna basın.
- Kopyaladığınız kodu sayfanıza yapıştırırken genişliği
width="100%"olarak güncelleyin.
5. En Büyük Mobil Problem: Scroll Hijacking (Sayfa Kilitlenmesi) ve Çözümü
Birçok web sitesinde karşılaşılan ve ziyaretçiyi çıldırtan bir kullanıcı deneyimi (UX) hatası vardır:
VRTuru Çözümü: Tıklamayla Etkinleşen Akıllı Overlay (Click-to-Interact)
Bu sorunun en zarif çözümü; iframe'in üzerine şeffaf bir önizleme ve "Sanal Turu Başlat" butonu koymaktır. Kullanıcı butona basana kadar iframe dokunmatik hareketleri yakalamaz, sayfa kaydırma akıcı biçimde devam eder:
<div class="sanal-tur-kapsayici" style="position: relative; aspect-ratio: 16/9; width: 100%; border-radius: 14px; overflow: hidden;">
<!-- Tıklamayla Kaybolan Etkileşim Katmanı -->
<div class="iframe-overlay"
onclick="this.style.pointerEvents='none'; this.style.opacity='0';"
style="position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.3s ease; backdrop-filter: blur(2px);">
<button style="pointer-events: none; padding: 12px 26px; font-size: 1rem; font-weight: 700; background: #00aeef; color: #fff; border: 0; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,174,239,0.5);">
<i class="fa-solid fa-play" style="margin-right: 8px;"></i> 360° Sanal Turu Başlat
</button>
<span style="color: #cbd5e1; font-size: 0.82rem; margin-top: 8px;">(Gezinmek için dokunun)</span>
</div>
<!-- Asıl Sanal Tur iframe'i -->
<iframe
src="https://vrturu.com/ornek-proje/"
style="width: 100%; height: 100%; border: 0;"
allow="accelerometer; gyroscope; xr-spatial-tracking; fullscreen"
allowfullscreen
loading="lazy">
</iframe>
</div>6. Web Hızını (PageSpeed & Core Web Vitals) Korumanın 4 Kuralı
Google, web sitelerinin ilk açılış hızını (LCP - Largest Contentful Paint ve INP - Interaction to Next Paint) doğrudan bir SEO sıralama kriteri olarak değerlendirir. Sitenizin arama motorlarında geriye düşmemesi için şu 4 optimizasyon kuralına uyun:
iframe etiketine loading="lazy" eklemek, tarayıcının kullanıcı o bölüme kaydırana kadar sanal tur dosyalarını indirmesini engeller. Sayfa anında açılır.
Sanal turu anasayfanın en tepe manşet alanı (Hero section) yerine, 2. veya 3. içerik bloğuna ya da özel "Hakkımızda / Tesisimiz" sekmesine koyun.
Sanal tur eklemek için 5 MB'lık yabancı eklentiler yüklemek yerine basit iframe kodunu kullanın; gereksiz veritabanı sorgularından kurtulun.
Tur dosyalarının yüksek hızlı bir Content Delivery Network (CDN) ve bulut altyapısından paralel indirilmesi görsel geçişlerini pürüzsüzleştirir.
7. Barındırma Karşılaştırması: Bulut vs Kendi Sunucunuz (Self-Hosted)
Web sitenize sanal tur eklerken dosyanın nerede barındırılacağı büyük önem taşır:
VRTuru'nun hazırladığı turlar tamamen açık HTML5 mimarisinde teslim edildiği için; fabrika tesisleri, diş klinikleri ve mağazalar istedikleri takdirde turları doğrudan kendi şirket sunucularında ömür boyu sıfır maliyetle barındırabilir.
Siteniz İçin Kristal Netliğinde 360° Çözüm
İster yeni bir 360° çekim yaptırmak isteyin, ister mevcut çekimlerinizi web sitenize sıfır hız kaybıyla entegre ettirmek... 10 yıllık IVRPA akreditasyonumuzla yanınızdayız.
Sıkça Sorulan Sorular (SSS)
Web sitesine sanal tur eklemek sitenin açılış hızını (PageSpeed) yavaşlatır mı?
Eğer doğrudan yüzlerce megabaytlık 3D veriyi sayfa yüklenirken çağırırsanız yavaşlatabilir. Ancak iframe üzerine loading="lazy" parametresi eklenirse veya kullanıcı butona basana kadar yüklemeyen "Facade" (önizleme katmanı) kurgulanırsa sitenizin PageSpeed ve Core Web Vitals (LCP/FID) skorları kesinlikle olumsuz etkilenmez.
Mobil kullanıcıların sayfayı kaydırırken sanal tura takılıp kalması (Scroll Hijacking) nasıl engellenir?
Bu problem iframe üzerine şeffaf veya butonlu bir overlay (tıklama katmanı) konularak çözülür. Ziyaretçi sayfayı serbestçe yukarı-aşağı kaydırabilir; yalnızca "Sanal Turu Başlat" butonuna dokunduğunda iframe etkileşime açılır. Bu sayede sayfa kilitlenmesi tamamen ortadan kalkar.
iframe kodundaki allow parametreleri (gyroscope, accelerometer) neden gereklidir?
allow="accelerometer; gyroscope; xr-spatial-tracking; fullscreen" parametreleri, kullanıcının akıllı telefonunu çevirdiğinde sanal turun hareket algılayıcı sensörlerle dönmesini ve VR gözlük moduna tam ekran geçebilmesini sağlayan modern tarayıcı güvenlik izinleridir.
WordPress sitelerde Elementor ile sanal tur nasıl eklenir?
Elementor sayfa düzenleyicide sol panelden "HTML" widget'ını sürükleyip istediğiniz bölüme bırakın. Ardından responsive iframe wrapper kodunuzu bu widget içerisine yapıştırıp sayfayı kaydedin.
Sanal tur için yıllık lisans veya sunucu ücreti ödemek zorunda mıyız?
Matterport gibi bulut platformlar aylık/yıllık barındırma aboneliği gerektirir. Ancak VRTuru'nun hazırladığı bağımsız HTML5 sanal turlar tek seferlik teslim edilir; kendi web hosting veya sunucunuzda barınır ve ömür boyu hiçbir periyodik lisans maliyeti çıkarmaz.
Sektörel Sanal Tur Rehberlerimiz
Farklı sektörler için özel olarak kurgulanan 360° çekim ve pazarlama stratejilerimiz:
Fabrika Sanal Tur Çekimi
Üretim hatları, ağır sanayi ve ihracat tesisleri için 360° dijital ikiz çözümü.
İhracatçı Fabrikalar Dijital Denetim
Yabancı alıcıların vize engeli olmadan tesisinizi teftiş etmesini sağlayan B2B rehberi.
Klinikler İçin 360° Sanal Tur
Sağlık turizmi ve yerel hastalarda güven inşa eden steril klinik sanal tur rehberi.
Google Street View İşletme Rehberi
Müşterileri sokaktan içeri bağlayan onaylı Google Street View sanal tur avantajları.