Tüm web tasarımcılarının bilmesi gereken 7 SEO şartı

Yayınlanan: 2017-09-05

Web tasarımcıları ve SEO uzmanları, kafa kafaya verme eğilimindedir.

Niye ya?

Çünkü bu iki unsur herhangi bir web sitesi için kesinlikle gerekli olsa da bazen birbirlerine karşı çalışırlar.

Tasarımcılar kullanıcıya harika bir görsel deneyim sunmaya odaklanırken, SEO uzmanları arama motorlarına sitenin gerçekçi bir görünümünü vermekle ilgileniyor.

Tasarım olmadan, bir web sitesi yeterince takdir görmez. Ancak SEO olmadan, harika tasarlanmış bir web sitesi bile okuyucular tarafından asla bulunamaz.

google web sayfası açık ve kitap kalemleri ve mobil cihaz ile masada volan SEO temel dizüstü bilgisayar düzeni

Çatışmayı düzeltmenin bir yolu var mı?

Bu makalede, tasarımcıların herhangi bir web sitesinde arama motoru optimizasyonu sürecine yardımcı olabilecekleri yedi yolu inceleyeceğim. SEO için hangi tasarım öğelerinin önemli olduğunu ve hem web tasarımcılarını hem de SEO uzmanlarını sonuçtan memnun eden bazı ilginç ipuçlarını öğreneceksiniz.

1. Arama motorlarının resimlerinizi "okumasına" izin verin

Web tasarımının en büyük bölümlerinden biri, metni bölmek için görüntü eklemektir. Ancak Google, bu resimleri insanların gördüğü gibi görmez.

HTML <img> etiketi, arama motoruna bir resim olduğunu söyleyecektir. Ancak görüntünün gerçek içeriği arama motoru botları tarafından okunamaz.

Peki arama motorunun bu görseli “okumasına” nasıl izin verebiliriz?

WordPress Medya Yöneticisi, kullandığımız herhangi bir görüntünün başlığını ve alternatif metnini değiştirme olanağı sağlar.

Tek yapmanız gereken Medya Yöneticisine tıklamak, optimize etmek istediğiniz resmi seçmek ve bir başlık ve alternatif metin eklemek. Bu, arama motoru botlarının okuyabileceği kelimeler ekleyerek HTML kodunu değiştirir.

Web sitelerinize medya eklemek ister misiniz? Bu eğitimle bir WordPress video galerisinin nasıl oluşturulacağını öğrenin!

Örneğin, Paris ile ilgili bir gönderiye Eyfel Kulesi'nin resmini ekledim diyelim. Alternatif metin olarak "Paris'teki Eyfel Kulesi"ni ekleyebilirim. Artık arama motorları sadece bir görsel olduğunu değil, aynı zamanda o görselin neyle ilgili olduğunu da biliyor.

Bu, o sayfa için SEO'ya yardımcı olur ve ayrıca görselin ek bir arama türünde görünmesine izin verir: görsel arama.

2. Mobil erişim için optimize edilmiş olduğunuzdan emin olun

Geçen yıl, mobil web kullanımı aslında masaüstü web kullanımını aştı. Bu, giderek daha fazla insanın internette gezinmek için akıllı telefonları ve tabletleri kullandığı anlamına geliyor. Sonuç olarak, arama motorları, mobil kullanıma uyum sağlayan web sitelerine daha olumlu bakmaktadır.

Bir web tasarımcısı olarak, tasarımlarınızı nasıl mobil uyumlu hale getireceğinizi bilmek artık her zamankinden daha önemli.

cep telefonunda buzlu kahve ile volan SEO temel kadın tarafından düzeni

Google'a göre web sitenizi mobil uyumlu hale getirmenin kabul edilebilir iki yolu vardır: duyarlı web tasarımı ve dinamik sunum. Bunların her ikisi de, site otomatik olarak kullanıcının mobil tarayıcısına uyum sağlarken URL'nin aynı kalmasına izin verir.

Mobil uyumluluğu sürdürmek için sitenizin ana içeriğinde Flash videodan kaçınmak da önemlidir. Flash'ın modasının geçtiğini hepimiz biliyoruz, ancak bu ölmekte olan video biçiminden kaçınmak, mobil kullanım için optimizasyon yaparken çok önemlidir.

3. Taranabilir tasarımlar oluşturmak için web yazı tiplerini ve HTML'yi kullanın

Daha önce alt etiketleri kullanmanın, arama motorlarının görselleri "okumasına" izin vermenin harika bir yolu olduğundan bahsetmiştim, peki ya resimlerinizde metin varsa? Peki ya bu metin alt etiketi için çok büyükse?

İşte kurtarmaya gelen web yazı tipleri! Fonts.com veya Google gibi web sitelerinden web fontları da dahil olmak üzere metin içeren afişler veya resimler tasarlıyorsanız, tasarımlarınızın arama motoru botları tarafından hala okunabilir olmasını sağlar.

Ayrıca tasarımınızdaki metnin gerçekten "canlı" olmasını sağlamak için bu web yazı tiplerini HTML ile birleştirebilirsiniz. H1 veya H2 başlıkları, kalın metin vb. gibi HTML öğeleri ekleyerek, tarama botları grafiğin ne hakkında olduğunu görebilir. Bu metindeki herhangi bir anahtar kelime daha sonra okunabilir ve bu, sayfa SEO'suna yardımcı olacaktır.

4. Minimalist tasarımı optimize edilmiş içerikle birleştirmek için genişletilebilir bir div ekleyin

Minimalist tasarım ilginizi çekiyor ancak sayfaya SEO için nasıl metin ekleyeceğinizden emin değilseniz, dinleyin!

Diyelim ki bir web sayfasında ürün görsellerinden oluşan bir paneliniz var. Bunları resim olarak bırakmak ve arama motoru botlarına resimlerin ne olduğunu söylemek için alt etiketleri kullanmak harika bir minimalist tasarım olacaktır.

Tahmin et ne oldu: SEO uzmanınız hala mutlu değil.

Önemli metni eklemek için yalnızca alt etiketleri kullanmak yerine, her görüntü için genişletilebilir bir div yerleştirmeyi deneyin. Bu şekilde, resme tıkladığınızda, altta bir <div> genişler ve hem kullanıcıları hem de arama motorlarını mutlu edecek ilgi çekici ve SEO açısından zengin içerik için alan sağlar (SEO uzmanınızdan bahsetmiyorum bile!).

Bu metin, arama motorları tarafından tamamen taranabilir. Ancak, tıklanana kadar görünmediğinden, minimalist tasarımınızı yine de koruyabilirsiniz.

Mac masaüstünde kod üzerinde çalışan volan SEO temelleri adam tarafından düzen

5. Gelişmiş site işlevi için HTML5 ve CSS3 ile kodlayın

HTML5 ve CSS3 kullanmanın birçok farklı avantajı vardır. Günümüz konularına daha spesifik olarak, bu iki geliştirilmiş biçimlendirme dili, bir web sayfasının SEO'su üzerinde kesin bir etkiye sahip olabilir.

Tasarladığınız web sayfaları iyi yapılandırılmamışsa, SEO için diğer tüm çabalar temelde pencereden atılabilir. HTML5 kullanmak, web sayfalarının iyi yapılandırılmış ve anlamsal olarak doğru olmasına yardımcı olur, bu da daha iyi arama motoru sıralamasına yol açar.

Bunun da ötesinde, HTML5, korkunç Flash'ın yerini almak için harika bir araçtır! Ayrıca, her web sayfasındaki kod miktarını azaltmaya yardımcı olabilir, böylece botların gezinmesini kolaylaştırır.

CSS3 transform özelliğiyle 3B tasarımların nasıl oluşturulacağına dair bu harika eğiticiye göz atın!

6. Hızlı yanıt için tasarımları optimize edin

2010 yılında Google, sıralama algoritmalarının bir parçası olarak site hızını dahil edeceklerini duyurdu. O zamandan beri, site hızı SEO'da her zamankinden daha önemli hale geldi.

Peki, tasarımlarınız web sitenizin hızlı çalışmasını nasıl sağlayabilir?

Anahtar, görüntü kalitesi ve dosya boyutu arasındaki dengeyi bulmakta yatar. Elbette hepimiz büyük dosyaların yüklenmesinin daha uzun sürdüğünü biliyoruz, bu nedenle resimlerinizin daha küçük olmasını istiyorsunuz. Ancak kaliteden ödün vermediğinizden emin olun.

Hızlı yanıt için görüntüleri optimize etmenize yardımcı olabilecek bir ipucu: HTML ile boyutu küçültmediğinizden emin olun. Daha büyük bir resim yüklemek ve HTML'yi daha küçük bir çözünürlükte gösterecek şekilde değiştirmek yerine, yüklemeden önce resminizin boyutunu küçültün. Bu, bant genişliğinden tasarruf sağlar ve yanıt süresini hızlandırır.

(Yalnızca bir not: HTML5 ve CSS3 kullanmanın bir başka avantajı, web sitesi yanıt süresini hızlandırmaya yardımcı olmalarıdır. SEO için harika olmalarının bir nedeni daha!)

7. Harika bir içerik oluşturucuyla ekip oluşturun

Henüz yapmadıysanız, bu SEO dostu tasarımlar oluşturmak için en iyi ipuçlarından biridir. İçerik ve tasarım el ele gider. Bir SEO içerik oluşturucuyla birlikte çalışmak, size başkalarının sahip olamayacağı bir avantaj sağlar. İçerik oluşturucunuz, anahtar kelime araştırması yaparak, web sayfaları için içeriği optimize ederek ve tasarımlarınıza dahil edilecek metinler hakkında size ipuçları vererek size yardımcı olabilir.

İnternet, yıllardır içerik öncelikli tasarımın avantajlarının lansmanını yaptı ve bu, içerik oluşturucular ve tasarımcılar bir ekip olarak çalıştığında en iyi şekilde elde edilir.

Çözüm

Analitik çizelgeleri ve ekranda verilerle masada volan SEO temelleri tableti ile düzen

Web tasarımcıları: SEO uzmanlarıyla gerçekten iyi geçinmeye hazır mısınız? Bu makaleyi okuduktan sonra, tasarımlarınız içerisinde herkesi mutlu edebilecek SEO dostu fikirler sunmaya hazır olacaksınız.

Bununla birlikte, SEO ile ilgili bu ipuçları, yalnızca bir SEO uzmanıyla anlaşmaktan daha fazlası için yararlıdır. Tasarımlarınızla sayfa içi SEO'yu geliştirebilmek, bir tasarımcı olarak sizi daha da değerli kılacaktır.

Web tasarımlarınızda bu SEO ipuçlarını kullanın ve her zamankinden daha iyi sonuçlar göreceksiniz!

Yeni bir şeyler öğrenmeye hazır mısınız? Bu makalelere göz atın:

  • Yönetilen WordPress barındırmanın işletmeniz için mükemmel olmasının 3 nedeni
  • Birden çok WordPress sitesini yönetmenin anahtarı
  • WordPress'te temel SEO ve içerik yazmaya yeni başlayanlar için kılavuz