Kişiliğiniz ve arama motorlarınız için daha etkili sayfalar oluşturmak için SEO ve web tasarımı nasıl birleştirilir?
Yayınlanan: 2021-07-12SEO web tasarımının önemi, bir web sitesinin geliştirilmesine yatırım yaptığımızda, işlevsel, basit ve sezgisel gezinme sunmanın yanı sıra hoş görsel öğelerle çok şık ve arama motoru dostu olmasını istememizdir.
Tüm bunlar, iyi bir kullanıcı deneyimi sunma endişesinin bir parçasıdır. Ancak bu yaklaşımı SEO hizmetleri ve teknikleri ile bağdaştırabilir miyiz?
Arama motoru optimizasyonu ve web tasarımını birleştirirken çeşitli zorluklar olsa da, bu çok uygun bir karışımdır.
Hem insanlar hem de arama motorları için çekici sayfalar oluşturmanın önemini anladığımızda ve optimizasyonunuzu etkileyen tasarım hatalarını daha iyi anladığımızda bu durum netleşiyor.
Daha fazlasını öğrenmek ister misiniz? Ardından, aşağıyı okuyun!
SEO ve web tasarımı neden birleştirilir?
Olağanüstü bir web sitesi oluştururken SEO ve web tasarımının müttefik olarak görülmesi lehine birçok argüman var. Her ikisini de dengede tutmanın 5 ana nedenini görelim.
1. Trafiğin çoğu genellikle organik aramalardan gelir
Gelişmiş bir arama motoru optimizasyonu platformuna ve diğer internet pazarlama çözümlerine sahip bir şirket olan BrightEdge tarafından yapılan bir araştırmaya göre, organik arama ortalama olarak web sitesi trafiğinin %50,1'ine karşılık geliyor.
Bu, ücretli bir trafik stratejisi ne kadar etkili olursa olsun , sonunda web sitenize daha fazla ziyaretçi getiren doğal aramaların olduğu anlamına gelir. Bu nedenle, SEO'ya, daha fazla potansiyel müşteri çekme şansı ile bu kanalı güçlendirmek için sayfalarımızı optimize etmek için mükemmel bir fırsat olarak bakmalıyız.
[rock_performance lang=”tr”]
Şirketinizin bir süredir bir web sitesi, blogu veya e-ticareti varsa, web analizi aracınızı kontrol edin. Organik trafiğin, ziyaretçi çekmek için en büyük kanalınız olması çok muhtemeldir. Bu nedenle SEO dostu bir web tasarımına sahip olmak önemlidir.
2. Web sitenizin görünümü, şirketin taahhüdünü yansıtır
Bir sayfaya eriştiğimizde ve düzen, yazı tipi, renk, resim ve diğer görsel öğelerin seçiminde bir eksiklik fark ettiğimizde, markanın ziyaretçilerine iyi bir deneyim sağlamayı taahhüt etmediğini varsaymak yaygındır.
Bu nedenle, şirketin değerleriyle tutarlı ve kişinin özelliklerine uygun bir tasarıma sahip kaliteli bir web sitesine yatırım yapmak esastır.
3. Kötü tasarım kullanıcıları uzak tutar
Markanın itibarına zarar vermenin yanı sıra, kötü bir görsel ve kullanıcı deneyimine sahip bir web sitesi, genellikle kullanıcı davranışı üzerinde anında bir sonuç doğurur: insanlar o sayfayı terk etme eğilimindedir.
Bu hayal kırıklığının sadece kötü bir tasarıma sahip olan web sitelerinde değil, aynı zamanda çok fazla tasarım öğesine sahip olan web sitelerinde de olduğunu hatırlamakta fayda var.
Aşırı işlevsellik ve istenenin çok üzerinde bir çözünürlüğe sahip görüntüler de gezinmeyi zorlaştırır ve geri düğmesini tıklama isteğini artırır.
4. Bazı teknolojiler arama motorlarıyla iyi çalışmıyor
Flash zirvedeyken, o zamanlar web standartlarının pek izin vermediği efektler ve animasyonlarla web siteleri oluşturmanıza izin verdi.
Tasarım ve geliştirme açısından olanaklar inanılmazdı. Ancak, arama motoru robotları bu teknolojiyi izleyemez, bu da bu şekilde oluşturulmuş web sitelerini indekslemeyi (çok) zorlaştırır .
Flash en dikkate değer örneklerden biridir, ancak yalnızca tasarım yönüne değer veren bir teknolojinin kullanılmasının markanın arama sonuçları sayfalarındaki varlığını nasıl mahvedebileceğini çok iyi gösterir.
5. Web sitesi yapımı sırasında SEO yapmak, yeniden çalışmayı önler
SEO optimizasyondan oluştuğundan, şirketlerin bu adımı daha sonra, web tasarımı veya hatta tüm web sitesi geliştirmesi zaten yapıldığında bırakması yaygındır.
Bunun, SEO'nun baştan sayfa oluşturma sürecinin bir parçası olması durumunda kaçınılabilecek bir dizi değişiklik gerektirdiği ortaya çıktı.
Bu kombinasyonda hangi ilkeler eksik olamaz?
Şimdi hem kişisel hem de arama motorları için çekici bir web sitesi oluşturmanın temellerini ve temel öğelerini öğrenelim.
1. Gezinme ve site yapısı
Süpermarkete gittiğimizde, diğerlerinin yanı sıra Meyve ve Sebzeler, İçecekler, Dondurulmuş, Hijyen yazan tabelalar buluyoruz. Örneğin Hijyen bölümüne gidersek Deodorant, Sabun, Diş Macunu, Şampuan vb. ile ayrılan ürünleri göreceğiz.
Bir web sitesinin de benzer şekilde düzenlendiği söylenebilir. Bir hiyerarşiyi takip ederek ürünleri veya içeriği kategorilere ve alt kategorilere ayırıyoruz. Menülerde bulunurlar, böylece kullanıcı aradığı şeye göre göz atabilir.
Başka bir deyişle, mağazanın bölümlere ve alt bölümlere ayrılmasının - ve bunların adlarının seçiminin - bir web sitesinin yapısına eşdeğer olduğu sitede gezinmeyi tasarlamak için bir kılavuz olarak süpermarketteki departman işaretlerini kullanın.
Örnek olarak Amazon.com'u kullanalım.

Alışveriş (Mağazalar), Hesabınız ve Günlük Fırsatlar ile ilgili seçeneklerin bulunduğu küresel bir gezinme menüsü vardır. Mağazalar menüsünde Kitaplar'a gidersek daha fazla alt kategori görürüz (Tüm Kitaplar, İndirimdeki Kitaplar, En Çok Satanlar ve diğerleri).
Tüm Kitaplar'a tıkladığımızda, kullanıcının tür, yazar veya yayıncıya göre kitaplara erişebileceği teklifler ve yerel bir menü içeren belirli bir sayfaya yönlendiriliyoruz.

Amazon'un tüm olası seçenekleri aynı menüye koymamaya ne kadar dikkat ettiğine dikkat edin. Navigasyon açıkça daha geniş bir kategoriden daha spesifik bir kategoriye geçer.
Kullanıcıların sitenin neler sunabileceğini anlamalarına ve istedikleri yere gitmelerine yardımcı olmanın yanı sıra, düzeylere ve alt düzeylere göre düzenleme, arama motorlarının sayfalar arasındaki bağlamı ve önem derecesini anlamasına yardımcı olur.
Bu nedenle süslü menülerin kurgulanmasından kaçınarak sadeliğe odaklanın . Bunun yerine, içerikleri veya ürünleri uygun kategori ve alt kategorilere göre gruplayın. Bu süreçte zorluklarla karşılaşırsanız, bilgi mimarisi çok yardımcı olacaktır.
2. İçerik düzeni
SEO içerik kalitesinin Google algoritması için en önemli faktörlerden biri olduğu zaten bilinmektedir. Bu nedenle, sitenizin sunduğu bilgilere değer verin.
Web'de, muhtemelen sayfanıza ek olarak birkaç başka sekmesi açık olan kullanıcının dikkatini çekmek için rekabet ettiğimizi unutmayın. Sitenize yapılan her ziyaretin bir zafer olarak değerlendirilebileceği bu bağlamda, içeriğe odaklanmalı ve ek dikkat dağıtıcı unsurlar yaratmamalıyız.
Bu nedenle, içeriği ihmal etmemek için metni, görsel öğeleri ve boşlukları dengeleyerek okuyucunun istediğini bulmasına yardımcı olmayı her zaman düşünün.
3. Duyarlılık
Kullanıcının cihazının ekran boyutuna uyum sağlama yeteneğine sahip duyarlı bir tasarım, özellikle dünyada mobil internetin artan kullanımıyla birlikte vazgeçilmezdir. Bunu göstermek için, mobil dünya çapında birçok ülkede zaten ana internet erişimi aracıdır.
Bu alaka düzeyi nedeniyle, Google arama, sayfaların mobil cihazlarla uyumluluğunu, arama motoru sıralama faktörlerinden biri olarak görmektedir.
Bu nedenle, ziyaretçilerinizin özgürlüğüne değer verdiğinizden emin olun ve web sitenizi bir masaüstünden veya başka bir cihazdan ziyaret etmeyi tercih etmelerine bakılmaksızın her zaman hoş bir deneyim sunun.
4. Görsellerin kullanımı
Bir web sitesinin görsel çekiciliği, ziyaretçi ile marka arasında bir bağlantı oluşturmak için çok önemlidir. Bu anlamda görseller, görünümü iyileştirmek ve sayfada bulunan metin içeriğini tamamlamak için önemli müttefiklerdir.
Arama motorlarının (henüz) resimlerdekileri yorumlayamadığı ortaya çıktı. Bu nedenle SEO açısından eklemeye karar verdiğiniz görsellerle birlikte bir açıklama eklemeniz gerekir. Bunu yapmak için, alternatif metin özelliğini kullanarak bir 'alternatif metin' eklemeniz yeterlidir.
Ne yazık ki, görüntülerle ilgili tek endişemiz bu değil. Aşağıda göreceğimiz gibi, genellikle SEO'yu engelleyen birçok hatanın kaynağıdır.
Hangi web tasarım hataları SEO'yu en çok etkiler?
Her iki unsuru birleştirmenin faydalarını öğrendikten ve bu kombinasyonun temellerini anladıktan sonra, markanızın arama sıralamalarındaki konumunu bozabilecek 10 web tasarım hatasına bakalım.
1. Görüntüleri sıkıştırmayı unutmak
Kaliteli görüntüler şüphesiz iyi tasarımın önemli bir parçasıdır. Ancak çok yüksek çözünürlüğe sahiplerse sitenizin yüklenme hızını etkileyebilirler .
Kullanıcı, bir sayfanın açılmasını birkaç saniyeden uzun sürerse, hatta bir mobil cihazdan erişiyorsa daha fazla beklemeye sabrına sahip olmayacaktır. Bu nedenle, Google için bir sitenin yüklenme hızı bir sıralama faktörüdür.
Bu nedenle, web sayfalarınızı yavaşlatmamaları için resimlerinizin boyutlarına (boyut ve megabayt olarak) dikkat etmeniz önemlidir. Web sitesine eklemeden önce her zaman bir görüntü sıkıştırma aracı kullanmayı deneyin.
TinyPNG'ye göz atın. Bu örnekte, bir görüntüyü %75 oranında sıkıştırabildi!


2. Kötü içerik yayınlayın
İçerik her zaman tasarlama ve geliştirme ile ilişkilendirilmese de, kullanıcının içerikle etkileşimini engelleyebilecek estetik yönlerin olduğunu unutmamalıyız. Çok büyük paragraflar ve cümleler, çok küçük yazı tipi ve okumayı zorlaştıran metin rengi , arama yapanların algılayabildiği öğelerdir.
Aşağıdaki resimde kelimelerin nasıl aynı olduğuna dikkat edin.

Çok büyük metin bloklarının, büyük harflerle yazılmış bütün paragrafların ve uygun kontrastı olmayan bir rengin deneyimi nasıl daha da kötüleştirdiğini görün.
3. Aşırı JavaScript çağrıları ekleyin
Web, web sitelerini daha dinamik öğelerle geliştirmeye veya yerleştirme işleviyle diğer hizmetlerden medyayı birleştirmeye yardımcı olan komut dosyalarıyla doludur. Sorun şu ki, çok fazla harici kaynak istemek, hem kullanıcı deneyimi hem de SEO için zararlı olduğunu bildiğimiz yüklemeyi yavaşlatabilir.
Bunu akılda tutarak, web geliştirme yaparken üçüncü taraf komut dosyası çağrılarını dikkatli kullanın. Vazgeçilmez olup olmadıklarını veya başka çözümler kullanmanın mümkün olup olmadığını analiz edin.
Bu blog örneğine bakın: Aktarılan 2,4 megabayttan 654 kilobayt, bu belirli sayfa yüklenirken aktarım verilerinin yaklaşık %26'sı olan JavaScript'e karşılık gelir.
4. Sitenin önemli bir bölümünü Flash'ta oluşturun
Flash'ın web sitenizde inanılmaz efektler yaratabileceği doğrudur, ancak kullanıcının görüntüleyebilmesi için cihazda Adobe Flash Player'ın yüklü olması gerektiğini hatırlamakta fayda var.
Ayrıca, arama motorları bu teknolojiyle oluşturulmuş içeriği çok iyi dizine eklemez.
Bu nedenle, gezinme ve metin içeriği için Flash kullanmaktan kaçınmak veya basitçe Web standartlarına uyan diğer alternatifleri tercih etmek idealdir.
5. Mobil cihaz kullanıcılarını görmezden gelin
Tabletler ve akıllı telefonlar aracılığıyla yapılan bağlantılardaki önemli artıştan daha önce bahsetmiştik; bu, sitenize gelen çoğu ziyaretçinin büyük olasılıkla bu cihazlardan geldiği anlamına gelir.
Sayfalarınız bu cihazlara hazır değilse, ziyaretçilerinizin sitenizi terk etmesi neredeyse kesindir.
Arama motorları, sitenin mobil uyumlu olup olmadığını, sıralamasını belirlemek için dikkate aldığından, SEO açısından da duyarlı bir tasarıma yatırım yapmaya değer.
Ve mobilden bahsetmişken, sayfanıza bazı sosyal medya paylaşım butonlarını eklemeyi unutmayın!


6. Önemli HTML öğelerini resimlerle değiştirin
Etkileyici görüntüler oluşturmak ve bunları başlık etiketleri gibi önemli HTML öğelerinin yerine kullanmak göze çok hoş gelebilir, ancak SEO için işe yaramayacaktır.
H1, H2 ve H3 etiketleri, SEO içeriğinizin her bir bölümünün alaka düzeyini vurgular ve o sayfanın anahtar kelimesine daha fazla vurgu yapmanızı sağlar.
7. Resimlere çok fazla metin ekleyin
Arama motorlarının resimleri, sayfanın HTML kodunun bir parçası olan metinsel içeriği analiz edebildikleri şekilde yorumlayamadığını daha önce açıklamıştık.
Bu nedenle, sayfada gerçek metinsel öğelerle yeniden üretmek yerine, öncelikle metinden oluşan görsellere sahip olmak kötü bir uygulamadır.
Alt text özelliği bu durumlarda faydalı olabilse de tamamlayıcı metin oluşturmak veya ayrı bir resim ve metin tutmak idealdir . Bir alternatif, CSS özelliklerini kullanarak metin içeren bir kaplama katmanı oluşturmak olabilir.
8. Aşırı karmaşık menüler oluşturun
Navigasyonun kullanıcılar ve arama yapanlar için ne kadar alakalı olduğunu zaten biliyoruz. Bu nedenle, Web'de bu öğelerden zaten beklenen modeli takip eden basit menüler oluşturmaktan daha iyi bir şey yoktur - örneğin, dikey veya yatay olarak organize edilmemiş bir liste.
Navigasyonun organize edilmesi gerekir ve kişiliğiniz için kafa karışıklığı yaratmamalıdır. Bunu önlemek için dengeyi koruyun. Menü sunumunuzun kalitesi üzerinde çalışın, ancak çok yenilikçi olmaktan kaçının.
Rock Content'in blogu, üst menüdeki Kategoriler listesi ve altbilgideki erişim alternatifi ile mükemmel bir örnektir.

9. İçeriğe erişimi zorlaştıran özellikler kullanın
Kullanıcı sitenize Google gibi bir arama aracıyla ulaştığında, aradıklarını bulmaları amaçlanır, değil mi? Ana içeriğin önüne pop-up'lar, bildirimler, reklamlar ve diğer öğeleri koyarsak, bu erişimi zorlaştırırız.
Örnek olarak aşağıdaki görseldeki haber sitesini ele alalım. Ana sayfayı açarken, okuyucunun gerçekten görmek istediği bilgilere ayrılmış alanın nasıl çok küçük olduğuna dikkat edin.

Arama motorları bu tür şeyleri tespit edecek kadar akıllıdır, bu yüzden web sitesinin sıralamasını etkiler.
10. Testleri ve sonuçları dikkate almayın
Web tasarımının arama motoru optimizasyonunu olumsuz etkileyip etkilemediğini anlamanın en iyi yolu testler yapmak ve sonuçları değerlendirmektir.
İlginç bir önlem, analitik platformunuza ek açıklamalar eklemektir. Sitenin tasarımında önemli değişiklikler yayınlandığında, tarihi kaydedin ve organik trafikte önemli bir değişiklik olup olmadığını izleyin .
Organik arama yoluyla ziyaretçi edinmedeki düşüşün, sunucu sorunları ve hatta Google arama algoritmasındaki değişiklikler gibi başka nedenleri olabileceğini unutmamak önemlidir.
Hangi araçlar SEO ve web tasarımının uygun şekilde hizalanıp hizalanmadığını kontrol etmeye yardımcı olur?
Şimdi sitelerini SEO açısından geliştirmek isteyen her web tasarımcısının bilmesi gereken araçları görelim.
çığlık atan kurbağa
Screaming Frog, arama motoru robotlarının yaptığı gibi bir web sitesini taramak için kullanılır. Bilgisayarınıza yüklendikten sonra, URL'yi girin ve tarama işlemini başlatmak için Başlat'a tıklayın.
İşlemden sonra aşağıdaki gibi bilgileri görebiliriz:
- sayfa yanıt süresi;
- dahili ve harici olarak yüklenen kaynak sayısı (HTML, JavaScript, CSS, resimler, Flash, PDF ve diğerleri);
- başlık etiketleri;
- başlık etiketi;
- Meta Açıklaması;
- görüntü sayısı.

Sayfa Hızı Analizleri
PageSpeed Insights, sayfanızın hızını analiz eden ve buna göre ona 0 ile 100 arasında bir puan veren bir Google aracıdır.
Ardından, hem masaüstü hem de mobil için yükleme sürelerinin nasıl iyileştirileceğine ilişkin çeşitli öneriler içeren bir rapor sunar.

Mobil Uyumluluk Testi
Google'ın bir başka kullanışlı özelliği de Mobil Uyumluluk Testidir. Araç, web sitesinin URL'sini girdikten sonra içeriği inceler ve bu cihazlar için optimize edilip edilmediğini belirler.
Bu konuda herhangi bir sorun varsa, araç hangi yönlerin iyileştirilmesi gerektiğini gösterir.
Şimdiye kadar gördüğünüz tüm önerilerle birlikte, SEO ve web tasarımının iyi bir şekilde entegre edilmesini sağlamak için zaten mükemmel bir temele sahipsiniz. Kullanıcının her zaman önce gelmesi gerektiğini unutmayın.
Ziyaretçilerinize en iyi deneyimi yaşatan teknik ve görsel yönlere özen gösterirken, eğilim, web sitenizin arama motoru sonuçlarındaki konumunun yalnızca iyileşeceği yönündedir.
Sayfa hızının satışlarınızı nasıl etkileyebileceğini bilmek ister misiniz? Ücretsiz bilgi grafiğimizi indirin ve satış performansınızı nasıl iyileştirebileceğinizi görün!
