Duyarlı Web Tasarımı

Duyarlı web tasarımı (RWD), sunucunun tüm cihazlara her zaman aynı HTML kodunu gönderdiği ve sayfanın cihazdaki oluşturulma biçimini değiştirmek için CSS'nin kullanıldığı bir kurulumdur. Tüm Googlebot kullanıcı aracılarının sayfayı ve öğelerini (CSS, JavaScript ve resimler) taramasına izin verilirse Google'ın algoritmaları bu kurulumu otomatik olarak algılayacaktır.

Duyarlı tasarım, tüm cihazlara ekran boyutuna göre ayarlanan aynı kodu sunar.

TL;DR

  • Tarayıcıya, içeriği nasıl ayarlayacağını bildirmek için meta name="viewport" etiketini kullanın.
  • Diğer dokümanlar için Web'in Temelleri sitemize bakın.

name="viewport" meta etiketini kullanma

Tarayıcılara, sayfanızın tüm cihazlara uyarlanacağını bildirmek için dokümanın başına bir meta etiket ekleyin:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta viewport (görüntü alanı) etiketi tarayıcıya, sayfanın boyutlarını ve ölçeklemesini cihazın genişliğine göre nasıl ayarlayacağı konusunda talimatlar verir. Meta viewport öğesi eksik olduğunda, mobil tarayıcılar sayfayı varsayılan olarak masaüstü ekranı genişliğinde (cihazlara göre değişmekle birlikte, genellikle 980 piksel) oluştururlar. Ardından, mobil tarayıcılar yazı tipi boyutlarını büyüterek ve içeriği ekrana uyacak biçimde ölçekleyerek veya içeriğin sadece ekrana sığan bölümünü göstererek daha iyi görünmesine çalışırlar.

Kullanıcılar için bu durum, yazı tipi boyutlarının tutarsız bir görünümde olması ve kullanıcının, içeriği görerek onunla etkileşimde bulunabilmek için iki kez dokunması veya yakınlaştırmak için parmaklarıyla sıkıştırma hareketi yapmak zorunda kalması demektir. Google, mobil cihazlarda bu tür bir etkileşim gerektirdiği için sayfayı mobil uyumlu olarak nitelendirmeyebilir.

Solda, meta görüntü alanı belirtilmemiş bir sayfa - mobil tarayıcı bu durumda masaüstü genişliğini varsayar ve sayfayı ekrana sığacak biçimde ölçeklendirir. Bu durum içeriğin okunmasını güçleştirir. Sağda, cihazın genişliğine uyan bir görüntü alanı belirtilmiş olarak aynı sayfa - mobil tarayıcı sayfayı ölçeklendirmez ve içerik okunaklı olur.

Duyarlı resimler için <picture> öğesini ekleyin.

Genel bir kural olarak, siteniz Google Chrome veya Apple Mobile Safari gibi yeni tarayıcılardan birinde çalışıyorsa, algoritmalarımızla da çalışır.

Niçin duyarlı tasarım?

Duyarlı web tasarımını aşağıdaki nedenlerle öneriyoruz:

  • Tek bir URL ile kullanıcılar kolayca içeriğinizi paylaşabilir ve ona bağlantı oluşturabilir.
  • Eşdeğer masaüstü/mobil sayfaların varlığını işaret etme gereksinimi yerine, Google'ın algoritmalarının, dizine ekleme özelliklerini doğru bir biçimde sayfaya atamasına yardımcı olur.
  • Aynı içerik için birden fazla sayfanın bakımını yapmaya kıyasla daha kısa mühendislik çalışması gerektirir.
  • Mobil siteleri etkileyen yaygın hataların olasılığını azaltır.
  • Kullanıcıların cihazlarına göre optimize edilmiş görüntü için yeniden yönlendirme yapılması gerekmediğinden yükleme süresi azalır. Ayrıca kullanıcı aracısına dayalı yönlendirme işleminin hata verme olasılığı vardır ve sitenizin kullanıcı deneyiminin kalitesini düşürebilir (ayrıntılar için Kullanıcı aracılarını algılamada tehlikeli noktalar bölümüne bakın).
  • Googlebot sitenizi tararken kaynak tasarrufu sağlar. İçeriğin tüm sürümlerini almak üzere birkaç kez farklı Googlebot kullanıcı aracıları ile taramak yerine, duyarlı web tasarımı sayfaları için tek bir Googlebot kullanıcı aracısının sayfanızı sadece bir kez taraması yeterlidir. Tarayıcı etkinliğindeki bu iyileştirme, Google'a sitenizin içeriğinin daha fazlasını dizine ekleme ve bunu uygun biçimde yenileme konusunda dolaylı olarak yardımcı olabilir.

Duyarlı web tasarımı ile ilgileniyorsanız, Web Yöneticisi Merkezi'ndeki blog yayınımızla başlayın ve Web'in Temelleri sitesini ziyaret edin.

JavaScript

Mobil uyumlu siteler oluştururken üzerinde dikkatle düşünülmesi gereken bir nokta da sitenin farklı cihazlardaki oluşturmasını ve davranışını değiştirmek üzere JavaScript kullanılmasıdır. JavaScript'in tipik kullanım örnekleri, sayfada gösterilecek reklam veya resim çözünürlüğü değişkenine karar vermeyi içerir.

Bu bölümde, JavaScript kullanma konusundaki farklı yaklaşımlar ve bunlarla Google'ın duyarlı web tasarımı kullanma önerisinin ilişkisi açıklanmaktadır.

Yaygın yapılandırmalar

Mobil uyumlu sitelerde kullanılan üç popüler JavaScript uygulaması şöyledir:

  • Uyarlanabilir JavaScript: Bu yapılandırmada, tüm cihazlara aynı HTML, CSS ve JavaScript içeriği sunulur. JavaScript, cihazda yürütüldüğünde sitenin görüntülenme veya çalışma biçimi değişir. Bir web sitesi JavaScript gerektiriyorsa Google'ın önerdiği yapılandırma budur.
  • Birleşik algılama: Bu uygulamada web sitesi, farklı cihazlara farklı içerikler sunmak üzere cihaz özelliklerini algılamak için hem JavaScript hem de sunucu tarafı algılamayı kullanır.
  • Dinamik olarak sunulan JavaScript: Bu yapılandırmada, tüm cihazlara aynı HTML sunulur. Ancak JavaScript, cihazın kullanıcı aracısına bağlı olarak dinamik bir biçimde farklı JavaScript kodu sunan bir URL'den sunulur.

Şimdi bu yapılandırmaların her birine ayrıntılı olarak bakalım.

Uyarlanabilir JavaScript

Bu yapılandırmada bir URL tüm cihazlara aynı içerikleri (HTML, CSS, JavaScript, resim) sunar. Sitenin görüntülenme ve çalışma biçimi sadece JavaScript cihazda yürütüldüğünde değiştirilir. Bu, esnek web tasarımının CSS medya sorguları kullanarak çalışmasına benzer.

Örnek olarak, bir sayfa tüm cihazlara aynı HTML'yi sunar. Bu HTML'de, JavaScript'i sunmak üzere harici bir URL isteyen <script> öğesini bulunur. JavaScript'in URL'sini isteyen tüm cihazlar aynı kodu alır. JavaScript çalıştırıldığında cihazı algılar ve sayfada bir şeyi değiştirmeye karar verir; örneğin masaüstündeki alternatifinin yerine bir akıllı telefon uyumlu resim veya reklam kodu eklemek gibi.

Bu yapılandırma, duyarlı web tasarımıyla yakından ilişkilidir ve algoritmalarımız bu kurulumu otomatik olarak algılayabilir. Ayrıca, bu yapılandırmada Vary HTTP üst bilgisi şartı yoktur, çünkü sayfanın ve öğelerinin URL'leri dinamik olarak içerik sunmaz. Bu avantajlarından dolayı, web siteniz JavaScript kullanmayı gerektiriyorsa önerilen yapılandırma budur.

Birleşik algılama

Birleşik algılama, sunucunun cihazın işlevlerini algılamak ve sunulan içeriği değiştirmek için istemcide JavaScript ile birlikte çalıştığı bir yöntemdir.

Örneğin, bir site, cihazın masaüstü veya akıllı telefon olmasına bağlı olarak içeriğin oluşturulma biçimini değiştirmeyi seçebilir. Bu durumda web sitesi, ekran boyutlarını algılayan bir JavaScript içerebilir, ardından bu boyutlar, cihaza gönderilen kodu güncelleyen veya değiştiren sunucuya gönderilir. Tipik olarak JavaScript, algılanan cihaz özelliklerini, sunucunun aynı cihazdan yapılan sonraki ziyaretlerde okuduğu bir çereze depolar.

Sunucu farklı kullanıcı aracılarına farklı HTML döndürdüğünden, birleşik algılama bir tür dinamik sunum yapılandırması olarak görülür. Tüm ayrıntılar dinamik sunum bölümünde verilmiştir. Ancak kısaca özetlemek gerekirse, farklı kullanıcı aracılarına farklı HTML içeriği sunan bir URL isteniyorsa, web sitesi “Vary: User-agent” HTTP yanıt üst bilgisini içermelidir.

Dinamik olarak sunulan JavaScript

Bu yapılandırmada, tüm cihazlara aynı HTML sunulur. Bu HTML, istekte bulunan kullanıcı aracısına bağlı olarak farklı içerikleri olabilen harici bir JavaScript dosyası eklemek için bir <script> öğesine sahiptir. Yani, JavaScript kodu dinamik olarak sunulur.

Bu durumda, JavaScript dosyasının "Vary: User-agent" HTTP üstbilgisiyle sunulmasını öneririz. Bu, İnternet önbelleklerine ve Googlebot'a farklı kullanıcı aracıları için JavaScript'in farklı olabileceğini belirten bir sinyal, Googlebot için de JavaScript dosyasını farklı Googlebot kullanıcı aracıları kullanarak taraması gerektiğini gösteren bir sinyaldir.