Bir web sitesine sanal tur nasıl gömülür: duyarlı rehber

Bir web sitesine sanal tur yerleştirmek, ziyaretçilerin bir mülkü, oteli, mekanı, showroomu veya hizmeti değerlendirirken bulundukları sayfayı terk etmeden mekânı keşfetmelerine olanak tanır. Yaygın yöntem bir iframe'dir: yayınlanmış turu sayfanızın belirlenmiş bir alanı içinde yükleyen küçük bir HTML öğesi.

Çalışan bir gömme, yalnızca bir URL yapıştırmaktan daha fazlasını gerektirir. Kapsayıcı farklı ekranlara uyum sağlamalı, turun kullanılabilir kalması için yeterli yüksekliğe sahip olması, mobil kontrollerin kolay erişilebilir olması ve yüklemenin sayfanın kalanını yavaşlatmaması gerekir. Bu rehber, güvenilir bir sonucun arkasındaki eksiksiz süreci ve pratik kararları açıklar.

Sanal Tur Gömmeden Önce İhtiyacınız Olanlar

Güvenli bir HTTPS URL'si üzerinden açılan yayımlanmış bir turla başlayın. Ziyaretçilerin giriş yapmadan erişebildiğini doğrulamak için bu URL'yi gizli bir tarayıcı penceresinde test edin. Tur kısıtlı, yayımlanmamış veya yalnızca bir düzenleyici içinde kullanılabiliyorsa, aynı sınırlama gömülü sürümde de ortaya çıkar.

Tur sağlayıcısının ayrıca iframe gömme izni vermesi gerekir. Bazı hizmetler bunu tarayıcı güvenlik başlıkları aracılığıyla engellerken, diğerleri özel bir paylaşım veya gömme URL'si sağlar. Platformun sağladığı yayımlanmış gömme kodunu mümkün olduğunda kullanın; çünkü bu kod düzenleyici kontrollerini kaldırabilir veya görüntüleyiciye özgü ayarlar uygulayabilir.

Iframe ile Sanal Tur Nasıl Gömülür

Turun genel URL'sini veya paylaşım ayarlarından iframe kodunu kopyalayın. Ardından iframe'i turun görünmesini istediğiniz sayfanın HTML alanına yapıştırın. Bir içerik yönetim sisteminde bu alan Özel HTML, Kod, Göm veya HTML Kaynağı olarak adlandırılabilir.

Temel bir gömme şu desen izler:

Iframe örneği: <iframe src="https://example.com/your-tour" width="100%" height="600" allowfullscreen loading="lazy"></iframe>

Örnek adresi gerçek yayımlanmış tur URL'siyle değiştirin. src özniteliği turu tanımlar, width yatay alanı kontrol eder, height görünen dikey alanı ayarlar, allowfullscreen sürükleyici görüntülemeye izin verir ve loading="lazy" gömmenin görünüm alanına yaklaşana kadar yüklemeyi erteler.

Sanal Turu Duyarlı Hale Getirin

Sabit piksel genişlik telefonlarda taşmaya veya daha büyük ekranlarda gereksiz boşluk bırakmaya neden olabilir. iframe genişliğini %100 olarak ayarlamak, onun üst kapsayıcısının genişliğini izlemesini sağlar. Etrafındaki sayfa düzeni sonra maksimum genişliği belirler.

Yükseklik ayrı bir dikkat gerektirir çünkü yüzde yükseklik sadece üst kapsayıcının tanımlı bir yüksekliğe sahip olması durumunda çalışır. En güvenilir yaklaşım, iframe'i bir en boy oranı kullanan duyarlı bir kapsayıcının içine yerleştirmek ve ardından iframe'in o kapsayıcıyı doldurmasını sağlamaktır.

Duyarlı kapsayıcı örneği: <div style="position:relative;aspect-ratio:16/9;width:100%;"><iframe src="https://example.com/your-tour" style="position:absolute;inset:0;width:100%;height:100%;border:0;" allowfullscreen loading="lazy"></iframe></div>

16:9 oranı birçok sayfa düzeni için iyi çalışır, ancak zorunlu değildir. Daha uzun bir oran dar ekranlarda keşfi iyileştirebilir. Web sitenizin teması zaten duyarlı bir gömme bileşeni içeriyorsa, iframe'e hem duyarlı genişlik hem de stabil bir yükseklik sağlıyorsa satır içi stil eklemek yerine onu kullanın.

Sayfa bağlamı için genişlik ve yükseklik seçin

Tam içerik genişliği: İçerik sütununun tamamında turun çevreleyen içerikle hizalanması için %100 genişlik kullanın.
Masaüstü yüksekliği: Sahneyi ve kontrolleri sürekli kaydırma yapmadan görebilmek için yeterli dikey alan hedefleyin; yaklaşık 500 ila 700 piksel pratik bir başlangıç aralığıdır.
Mobil yüksekliği: 16:9 çerçeve kontrolleri ve etkileşim noktalarını sıkıştırıyorsa daha yüksek bir görünüm alanı veya minimum yükseklik test edin.
Maksimum genişlik: Turun, sayfanın normal içerik ızgarası içinde kalmasını sağlayın; yalnızca kasıtlı bir tam genişlik bölümü sayfaya uygunsa dışarı çıkın.
Tam ekran: En sürükleyici görünümü isteyen ziyaretçiler için bir tam ekran seçeneğini koruyun.

Gömülü içeriği mobil ziyaretçiler için optimize edin

Sadece yeniden boyutlandırılmış bir masaüstü tarayıcıya güvenmek yerine gerçek sayfayı bir telefon üzerinde açın. Ziyaretçilerin panoramayı sayfayı beklenmedik şekilde kaydırmadan sürükleyebildiğini, etkileşim noktalarını yanlışlıkla dokunmadan seçebildiğini, menüleri açıp bilgi panellerini kapatabildiğini ve tam ekrana girip çıkabildiğini doğrulayın.

Yakın düğmeler ve gezinme ile tur kontrollerinin rekabet etmemesi için gömmenin etrafında yeterli boşluk bırakın. Temel talimatları yalnızca yüksek bir çerçevenin altında bırakmaktan kaçının; ziyaretçiler bunları keşfetmeyebilir. Gömmenin üstünde kısa bir cümle, etrafa bakmak için sürükleyebileceklerini, etkileşim noktalarına dokunabileceklerini ve tam ekran kullanabileceklerini açıklayabilir.

Tarayıcı ve ekran yönü değişikliklerini hesaba katın

Mobil tarayıcı araç çubukları bir kişi kaydırdıkça kullanılabilir görünüm alanını değiştirir ve bir cihazı döndürmek çerçeveyi ani şekilde değiştirebilir. Özellikle tur bindirmeleri, kat planları veya alt gezinim kullanıyorsa dikey ve yatay modları test edin. Gömülü görüntüleyici, boş alanlar bırakmadan veya kontrolleri kırpmadan boyutlarını yeniden hesaplamalıdır.

Sayfa performansını iyileştirin

Bir sanal tur panoramalar, betikler, arayüz varlıkları, haritalar, video ve analizler yükleyebilir. Tüm bunların hemen yüklenmesi sayfanın ana içeriğini geciktirebilir. Tur ekranın altında ise loading="lazy" ekleyin ve bir sayfada birden fazla aktif tur gömmekten kaçının.

Birden fazla turun bulunduğu sayfalar için her biri adına bir önizleme resmi ve belirgin bir başlat düğmesi kullanın, ardından seçilen turu talep üzerine yükleyin. Bu, ilk ağ yükünü azaltır ve ziyaretçilere kontrol sağlar. Kaynak panoramaları tur platformu içinde uygun şekilde sıkıştırın; iframe ayarları aşırı büyük varlıkların yerini tutamaz.

Sayfanın odakta kalmasını sağla: Birkaç benzer görüntüleyici yerine en alakalı turu gömün.
Yer ayır: Yükleme sırasında düzen kaymalarını önlemek için kapsayıcıya sabit bir en boy oranı veya minimum yükseklik verin.
Rekabet eden medyayı sınırla: Turun yanında otomatik oynatılan video, büyük kaydırıcılar ve diğer ağır öğelerden kaçının.
Gerçek bağlantıları test et: Sayfayı yalnızca hızlı ofis Wi‑Fi değil, tipik bir mobil ağda da inceleyin.
Üçüncü taraf betiklerini kontrol et: Onay araçları ve güvenlik politikaları tur alan adının yüklenmesine izin vermelidir.

Sayfayı tura göre tasarlayın

Gömeyi ziyaretçinin kararını destekleyecek şekilde yerleştirin. Bir mülk sayfasında, özet ve temel bilgileri takip edebilir. Bir otel sayfasında, oda açıklaması veya rezervasyon eyleminin yakınında durabilir. Bir portfolyo sayfasında, büyük etkileşimli bir çerçeve ile hemen açmaktansa bir önizleme ve kısa proje açıklaması daha iyi olabilir.

Turun ardından açıklayıcı bir başlık, bir cümlelik bağlam ve anlamlı bir eylem ekleyin. Bir sonraki adım bilgi istemek, müsaitliği kontrol etmek, bir ziyaret rezerve etmek veya başka bir ilgili sayfayı görüntülemek olabilir. Eylemi ziyaretçinin az önce keşfettiği şeyle bağlantılı tutun.

Gömülü görüntüleyiciye bir alternatif sağlayın

Turun yeni bir sayfada veya sekmede açılmasını sağlayan normal bir bağlantı ekleyin. Bu, gömülü görüntüleyici engellendiğinde, ziyaretçinin daha büyük bir görünümü tercih ettiğinde veya bir yardımcı teknoloji her etkileşim kontrolünü kullanamadığında yardımcı olur. “buraya tıklayın” gibi belirsiz bir talimat yerine açıklayıcı bağlantı metni kullanın.

WordPress ve diğer web site oluşturucularında gömme

WordPress'te bir Custom HTML bloğu ekleyin ve sağlayıcının iframe kodunu yapıştırın. Sayfa oluşturucular genellikle aynı amacı gören bir HTML, Kod veya Embed widget'ı sunar. Kaydettikten sonra genel sayfayı önizleyin çünkü görsel düzenleyiciler bazen canlı iframe yerine bir yer tutucu gösterebilir.

Barındırılan oluşturucular özel kodu temizleyebilir veya iframe alan adlarını sınırlayabilir. Kod kaydettikten sonra kayboluyorsa platformun gömme kurallarını kontrol edin veya resmi URL gömme bileşenini kullanın. Geçici bir çözüm olarak turu statik bir ekran görüntüsüne dönüştürmeyin; bir ekran görüntüsü önizleme olabilir, ancak etkileşimli deneyimi sağlamaz.

Güvenlik, gizlilik ve erişilebilirlik kontrolleri

Karma içerik engellemesini önlemek için hem web sitesi hem de tur için HTTPS kullanın. Siteniz bir İçerik Güvenliği Politikası uyguluyorsa, izin verilen çerçeve kaynaklarına tam tur ana bilgisayarını ekleyin. Aşırı geniş izinlerden kaçının ve yalnızca turun gerçekten ihtiyaç duyduğu iframe özelliklerini dahil edin.

Üretim kodunda iframe'e ekran okuyucu kullanıcılarının tanımlamasına yardımcı olacak, örneğin “Mülkün sanal turu” gibi kısa bir title özniteliği verin. Klavye gezinmesini, görünür odak halini, renk kontrastını, medya altyazılarını ve önemli bilgilerin normal sayfa metni olarak da bulunup bulunmadığını kontrol edin. Bir tur sayfayı zenginleştirmeli, kritik bilgilerin tek erişim yolu haline gelmemelidir.

Yaygın sanal tur gömme sorunları

iframe boş: URL'nin herkese açık olduğunu, HTTPS kullandığını ve başka bir alan adında gömme izni verdiğini doğrulayın.
Tur kırpılmış: Çakışan sabit boyutları kaldırın ve hem kapsayıcı hem de iframe'in kullanılabilir bir yüksekliğe sahip olduğunu doğrulayın.
Çerçeve mobilde taşma yapıyor: %100 genişlik kullanın ve üst kapsayıcıları sabit genişlikler veya aşırı dolgu için inceleyin.
Tam ekran çalışmıyor: Tam ekran iznini dahil edin ve bir üst iframe veya site politikasının bunu engelleyip engellemediğini kontrol edin.
Sayfa yavaş yükleniyor: Katmanın altındaki gömmeleri tembel yükleyin, rekabet eden medyayı azaltın ve turun panorama varlıklarını optimize edin.
Tıklamalar yanıt vermiyor: Bir çerez çubuğu, bindirme, yapışkan öğe veya yanlış z-index'in iframe'in üzerini kapatıp kapatmadığını kontrol edin.

Yayınlamadan önce gömülü turu test edin

Herkese açık sayfayı aç: Düzenleyici dışı ve gizli bir tarayıcı penceresinde test edin.
Duyarlı boyutları kontrol et: Geniş masaüstü, dizüstü, tablet ve dar telefon düzenlerini gözden geçirin.
Tüm kontrolleri kullan: Sahneyi sürükleyin, etkileşim noktalarını ve menüleri açın, sahneleri değiştirin ve tam ekranı test edin.
Yüklemeyi gözden geçir: Ayrılmış alanın düzen kaymalarını önlediğini ve tembel yüklemenin doğru zamanda etkinleştiğini doğrulayın.
Bağlantıları ve eylemleri doğrula: Yedek bağlantıyı ve sayfanın sonraki adım CTA'sını test edin.
Güncellemelerden sonra tekrarla: Turun URL'si, web sitesi teması, onay ayarları veya güvenlik politikası değiştiğinde gömmeyi tekrar kontrol edin.

If you are still preparing the experience itself, the guide on interaktif sanal turların nasıl oluşturulacağı sahneleri, etkileşim noktalarını, gezinimi, medyayı ve test etmeyi kapsar. Turların ve varlıkların nerede barındırılacağı üzerinde kontrol sahibi olmak için kendiniz barındırma ile bulut sanal tur yazılımlarını karşılaştırın.

Sıkça Sorulan Sorular

Sanal turu herhangi bir web sitesine gömebilir miyim?

Web sitesi iframe kodunu kabul ettiği ve tur ana bilgisayarı başka alanların görüntüleyiciyi çerçevelemesine izin verdiği sürece bir turu gömebilirsiniz. Bazı barındırılan oluşturucular özel HTML'yi kısıtlar, bu yüzden resmi gömme bileşenlerine veya genel bir bağlantıya ihtiyaç duyabilirsiniz.

Gömülü bir sanal tur hangi boyutta olmalı?

Kullanılabilir içerik genişliğinin %100'ünü kullanın ve 16:9 kapsayıcı ile veya masaüstü yüksekliği olarak yaklaşık 500 ila 700 piksel ile başlayın. Kontrollerin telefonlarda nasıl çalıştığını test edin ve arayüz sıkışık görünüyorsa mobil yüksekliği artırın.

Bir iframe bir web sitesini yavaşlatır mı?

Bir iframe, yüklediği içeriğin ağ ve işlem maliyetini ekler. Tembel yükleme, alanı rezerve etme, gömme sayısını sınırlama ve tur varlıklarını optimize etme, başlangıç sayfa performansı üzerindeki etkisini azaltır.

Sanal turum doğrudan çalışıyor ama web sitesinin içinde neden çalışmıyor?

Tur ana bilgisayarı iframe kullanımını engelliyor olabilir, sayfa HTTPS ve HTTP içeriğini karıştırıyor olabilir veya bir İçerik Güvenliği Politikası tur alan adını reddediyor olabilir. Tarayıcı geliştirici araçları engellenmiş çerçeve veya güvenlik mesajının tam nedenini belirleyebilir.

Sanal tur tam ekranda mı açılmalı?

Tam ekran, özellikle telefonlarda detaylı keşif için değerlidir, ancak isteğe bağlı kalmalıdır. Ziyaretçiler turun sayfa içinde kullanılabilmesini ve tam ekrandan kolayca çıkabilmeyi de isteyebilmelidir.

Her ekranda çalışan bir gömme yayınlayın

Güçlü bir sanal tur gömme, geçerli bir genel URL'yi duyarlı bir kapsayıcı, pratik boyutlar, mobil test, kontrollü yükleme ve net sayfa bağlamıyla birleştirir. iframe'i tamamlayıcı kullanıcı yolculuğunun bir parçası olarak ele alın: tanıtın, keşfetmeyi rahat hale getirin ve erişilebilir bir sonraki adım sağlayın.

Simple Virtual Tour etkileşimli turlar oluşturup yayımlamanıza yardımcı olur ve bunlar kendi web sitesi deneyiminizin bir parçası haline gelebilir. Canlı demoyu keşfedin bir turun uygulamada nasıl göründüğünü görmek için veya mevcut seçenekleri inceleyin sanal turlar oluşturma ve barındırma için.