En Etkili SEO için Site İçi Ayarlamalar Nasıl Yapılmalıdır?

En Etkili SEO için Site İçi Ayarlamalar Nasıl Yapılmalıdır?

En Etkili SEO için Site İçi Ayarlamalar Nasıl Yapılmalıdır?

En Etkili SEO için Site İçi Ayarlamalar Nasıl Yapılmalıdır?

Etkili SEO

Etkili SEO

SEO açısından her sitede bulunması gereken araçlar vardır. Bu araçlalr arama motoru botlarının siteyi daha iyi algılaması, hatasız tarama ve değerlendirme yapması ve site sahibi tarafından belirlenen önceliklere dikkat etmesini sağlar. Bu uygulamaların bulunması yetmemekte düzgün ve etkili kullanımıyla da bu uygulamalardan elde edeceğiniz performans değişmektedir. Bunlardan ilki olan robots.txt ile anlatıma devam ediyoruz.

Robots.TXT

Robots.txt daha önceki yaptığımız açıklamada, arama motoru botlarının site üzerindeki erişim yeteneklerini düzenleyen dosyalar olduğunu belirtmiştik. Arama motorları tarafından algılanan bir metin belgesidir ve sitenin ana dizininde hep aynı isimle yer alır.

Robots.txt

Robots.txt

Bu dosyalara ait eklenen kodlar ile arama motorlarına site haritasının bulunduğu konumu, arama motoru tarafından ziyaret edilmesi istenilmeyen sayfa veya klasörler kolaylıkla belirtilebilir. Arama motorları siteleri ziyaret ettikleri zaman ilk olarak robots.txt dosyasını inceler ve bu dosyadaki erişim sağlama veya erişim kısıtlama yetkilerine bağlı olarak siteyi gezerler.

Neden Arama Motorlarının Ziyareti Engellenmelidir?

  • Yapım aşamasında olan sitelerin arama motorları tarafından görüntülenmesini engellemek.
  • Tüm ziyaretçilere açık olmayan içerikleri engellemek. Sadece sizin mail veya paylaşım yoluyla özel kullanıcılar için oluşturduğunuz sayfaları engellemek.
  • Site hakkında kötü bir izlenim oluşturabilecek sayfalar.
  • Yönlendirme yapılmış sayfaları engellemek.
  • Arama motoru dışındaki zararlı botları engellemek.
  • Hata sayfaları, cgi-bin klasörü, çok az metin bulunan veya bulunmayana sayfaları engellemek.

Robots.Txt Örnek Kullanımları

Örnek kullanımlarda user-agent hangi botlara yönelik bir düzenleme olduğunu gösterir. Eğer * yıldız işareti kullanılırsa tüm botlar için geçerli anlamına gelir. Bir bot ismi yazılırsa, sadece o bota yönelik bir müdahale olduğu anlamına gelir. Örnek olarak User-agent: Googlelebot kullanımı sadece Google botları için yapılan erişim izinlerini gösterir. Ancak yayında bir slaş veya yıldız kullanılırsa hiçbir sayfanıın indexlenmemesi istenilir. Disallow ile birlikte bir klasör veya link kullanılırsa sadece o klasör veya linkin indexlenmesi önlenir.

Tam erişim yetkisi vermektedir. Tüm botlar tüm sayfaları indexler.

User-agent: *

Disallow:

Tam kısıtlama sağlar. Tüm botlar hiçbir sayfayı indexlemez.

User-agent: *

Disallow: /

Kısmi kısıtlama sağlar. Tüm botlar için gizli klasörü, ve diğer iki sayfanın indexlenmesini sağlar.

User-agent: *

Disallow: /gizli/

Disallow: /bana-ozel-yazilar.html

Disallow: /404.html

Sadece Altavista botu için kısıtlama sağlar. Altavista arama motoru hiçbir sayfayı indexlemez.

User-agent: Scooter

Disallow: /

Google botlarının resim dosyalarına erişimini kısıtlar.

User-agent: Googlelebot-image

Disallow: /

Site Haritası

Site haritaları bir site için olmazsa olmazlardandır. Bunun birçok sebebi vardır. Bence en önemlisi ve en sık yaşanan sorun olan. Site üzerinden link verilemeyen sayfalardır. Örnek olarak bir JavaScript yardımıyla oluşturulmuş açılan menü ile bazı içeriklere ulaşılıyorsa, HTML yapısı olmadığı için arama motoru botları bu sayfaya erişemez. Ancak bu sayfanın linkleri site haritasına eklenmişse, arama motoru botları site haritası üzerinden bu sayfaları ziyaret ederek içerikleri ve linkleri indexleyebilecektir.

Site haritası farklı dosya konumu veya farklı formatlarda kullanabilmektedir. Ancak şiddetle tavsiye edilen bir kullanım biçimi, ana  dizinde, sitemap ismiyle ve XML formatında kullanılmasıdır. Çünkü ilave olarak belirtilmeye ihtiyaç duyulmadan botların ulaşabildiği en iyi sitemap yapısıdır.

Site Haritası

Site Haritası

Site haritası, siteye ait tüm linkleri içerisinde barındırmalıdır. Aynı zamanda her yeni içerikte mutlaka güncellenerek arama motorlarına bu güncelleme bildirilmelidir. Bu şekilde yeni sayfalar arama motorları tarafından daha kolay ve hızlı indexlenebilmektedir.

Örnek olarak site haritasından kesit yukarıda gibidir. Burada site haritasının mutlaka taşıması gereken özellikler bulunmaktadır. Bunlar;

URLSiteye ait linklerin listesidir. Tüm linkler yer almalıdır.

PriorityLink önceliğidir. Arama motoru botlarının hangi ilk sayfayı önce ziyaret etmesi gerektiği belirtilmektedir. Değeri yükseldikçe o sayfanın daha fazla öneme sahip olduğunu gösterilir. Etkisi arama sonuçlarına yansımaktadır.

Change FrequencyDeğişim sıklığını yani güncelleme sıklığını belirtir. Arama motorlarının tekrar eden ziyaretleri için etkilidir. Belirtilen sayfalara ne kadar arayla uğraması istendiği söylenmiş olur. Gerçek güncelleme aralığını belirtmek en doğru sonucu verir.

Last ChangeBelirtilen sayfaların son değişim tarihini vermektedir. Arama motorunun site haritasını ziyaretinde en son yapılan değişikliği bilerek o sayfalara önem vermesi gerekmektedir. Site haritası sıralaması da bu veriye göre yapılmaktadır.

Site haritası WordPress, Drupal ve vbulletin gibi hazır sistemler tarafından eklentiler vasıtasıyla kolaylıkla oluşturulabilmektedir. Asp ve PHP gibi sistemler için sitenin veritabanında bulunan tüm linklerin bu önceliğe göre XML formatında listelenerek site haritasının oluşturulması gerekir. Html yapısındaki siteler için elle oluşturulabileceği gibi çok sayıda sayfa olması durumunda online ve offline araçlar devreye girmektedir.

Tüm kodlama yapısına sahip siteler için kullanılabileceği online site haritası oluşturma siteleri aşağıdaki gibidir.

  • www.xml-sitemaps.com
  • www.sitemapdoc.com

Htaccess

Htaacces dosyası (hypertext access fil,), düzeyinde sunucuda çeşitli ayarlar ve uygulamalar yapan özelleştirilebilir dosyadır.

Htacces dosyası ile sitelerinizde pek çok düzenleme, yetki ve kısıtlama işlemlerini yapabilirsiniz. 100’lerce farklı komut ile oldukça kullanışlı olan Htacces dosyası gerekli uygulamaları yapmak üzere farklı kodlamalar kullanmayı gerektirir.

Htacces Dosyası İle Neler Yapılabilir?

  • SEO uyumlu link yapısı.
  • Hotlink güncellemesi.
  • Dosyaları gizlemek.
  • Hata sayfaları.
  • Klasör yetki sınırlandırması.
  • Düşman botları engellemek.
  • WWW yapılandırması.
  • Dosya şifreleme ve şifre koruması gibi güvenlik işlemleri.
  • Ip engellemek.
  • Domain yönlendirme.
  • Veri sıkıştırma.
  • Bakım sayfası oluşturma.
  • Spam engelleme.
  • İphone algılama ve yönlendirme.

ve daha pek çok işlemi Htacces ile yapabilirsiniz.

Örnek Htacces Uygulamaları

Tüm klasörlere erişimi engellemek için;

#deny all Acces

deny from all

Sadece belirli iplere erişim izni vermek için;

#deny all Acces

deny from all

allow from xxx.xxx.xxx # tek ip adresi

allow from xxx.xxx.xxx. # ip bloğu

allow from xxx.xxx. # daha kapsamlı ip bloğu

Hata sayfaları için yönlendirme;

ErrorDocument 401/errors /401.php

ErrorDocument 403/errors /403.php

ErrorDocument 404/errors / 404.php

ErrorDocument 500/errors / 500.php

301 Kalıcı yönlendirme;

Redirect 301 /eskisayfa.html http://seo.hocasi.com/yenisayfa.html

Zararlı örümcekleri engelleme;

Sitenizdeki verileri çekerek arşiv oluşturma veya offline olarak bilgisayara indirme gibi zararlı program ve botların engellenmesini sağlar. Burada bunlardan birkaçı listelenmiştir.

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]

RewriteCond %{HTTP_USER_AGENT} ^Bot\ mailto:craftbot@yahoo.com [OR]

RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]

RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]

RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]

RewriteCond %{HTTP_USER_AGENT} ^Download\ Demon [OR]

RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]

RewriteCond %{HTTP_USER_AGENT} ^EirGrabber  [OR]

RewriteRule ^.* – [F , L]

Resim koruması; Sitenizde bulunan resimlerin kopyalanarak başka siteler tarafından görüntülenmesini engellemek için aşağıdaki kodu kullanabilirsiniz.

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond  %{HTTP_REFERER} !^http:// (www\.) ?meden.com.tr/.*$ [NC]

Rewrite \. (gifjpgpng)$ – [F]

Resim Koruması 2;

Sitenizde bulunan resimlerin kopyalanarak başka sitelerde görüntülenmesi durumda görüntülenen resmi değiştirebilirsiniz. Bu resim üzerinden sitenizin ismiyle bu site üzerinden kopyalanmıştır şeklinde uyarı koyabilirsiniz.

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond  %{HTTP_REFERER} !^http://(www\.)?seohocasi.com/.*$ [NC]

RewriteRule \.(gifjpg)$ http://www.meden.com.tr/foto.jpg [R , L]

Linklerden category yazısını kaldırmak;

http://www.meden.com.tr/category/seo-incelemeleri yerine

http://www.meden.com.tr/seo-incelemeleri şeklinde olacaktır.

RewriteRule ^category/(.+)$ http://www.meden.com.tr/$1 [R=301, L]

Bakım sayfaları oluşturmak;

Ana sayfa giren ziyaretçileri bakım sayfasına yönlendirir. 3. Satırdaki kod ile kendi ipnizi yazarak bu yönlendirmenin sizin için geçerli olmasını engellersiniz. Aynı zamanda bakım sayfası için yönlendirme tipi 302 geçici yönledirme olduğu için eski indexler de korunacaktır.

RewriteEngine on

RewriteCond %{REQUEST_URI} !/bakim.html$

RewriteCond %{REMOVE_ADDR} !^123\.123\.123\.123

RewriteRule $ /bakim.html [R=302, L]

Bu konuda htacces dosyalarının ne işe yaradıklarını ve örnek uygulamaları anlattık. Htacces i daha pratik bir şekilde uygulayabilmek için www.meden.com.tr/htaccess/ htaccess aracını kullanabilirsiniz.

404 Hata Sayfaları

404 hata sayfaları, sitede bulunmayan sayfalar yani site içi kırık linkler için özel olarak oluşturulması gereken sayfalardır. Hata sayfası kullanmanın çok büyük sakıncaları vardır. Bir kişi sitenize ait bir linki hatalı olarak bir forum veya sitede paylaştığında arama motorları o sayfayı indexler ancak aslında öyle bir sayfa yoktur. Bu durumda sitenin suçu olarak görülür ve sitenin kalite notu düşer. Aynı zamanda bu tür paylaşılan hatalı linkler üzerinden gelen ziyaretçiler sayfaları açamadıklarında hata ile karşılaştığını ve olası çözümleri belirten özel bir sayfa yapısı olmalıdır. Hali hazırda gelen ziyaretçileri ana sayfaya veya en yakın doğru sayfaya yönlendirerek ziyaretçileri kazanmak oldukça mantıklıdır. Bu sebeple yanlış sayfalar üzerinden yapılan girişleri oluşturduğunuz özel hata sayfalarına yönlendirerek, ziyaretçilere yol göstermeniz gerekir. Aynı zamanda bu hata sayfalarına noindex meta kodu ekleyerek indexlenmesini önlemelisiniz.

Özel Hata Sayfası Oluşturmak

Sitenize ait kodlama türüne göre uygun bir şablon oluşturmanız gerekir. Bu şablonda kullanıcıya hata sayfasında olduğunu ve bulunduğunu siteden en etkili ve istediği sonuca yakın olarak nasıl istifade edebileceğini anlatmanız gerekir. Örnek olarak seohocasi.com hata sayfasını gösterebiliriz. http://www.seohocasi.com/hatali.

Seohocasi.com’a ait hata sayfasında toplamda 6 adet yönlendirme bulunmaktadır. Sitedeki son 10 yazıya yönlendirme, arama formu ile yeni bir arama motoru yapma, hatasız url yazılımını kontrol etme, site sahibine ileterek çözüm bekleme şeklinde öneriler sıralanmaktadır.

Hata Sayfasına Yönlendirme

Siteye yapılan hatalı girişlerin, oluşturulan hata sayfasında yönlendirilmesi için htaccess dosyası kullanılmalıdır. Aşağıdaki kodu hata sayfanızın ismine göre düzenleyerek htaccess dosyanıza ekleyiniz.

ErrorDocument 404 /hata.php

Hata Sayfasının İndexlenmesini Önleme

Kırık linklerin, oluşturulan özel hata sayfalarına yönlendirilmesiyle bu uygulama bitmemektedir. Hata sayfalarının arama motorları tarafından indexlenmesini de önlemek gerekir. Bunun için de hata sayfası şablonuna aşağıdaki kodu ekleyiniz.

<meta name=”robots” content=”noindex, nofollow” />

veya

<meta name=”robots” content=”noindex, follow” />

Hata Sayfalarını Tespit Etme

Yukarıda anlatılan işlemleri yapmak, arama motorları açısından büyük avantaj sağlar. Ancak hata sayfasını da azaltmak ziyaretçiler açısından memnuniyet dolayısıyla fayda sağlar. Bu sebeple hata sayfalarını tespit etmek de önem taşımaktadır. Her kırık link bir bir hata sayfası oluşturur. Dolayısıyla hata sayfalarını site içi kırık linklerin tespitiyle de bulabiliriz. Bunun için eklenti ve aracı siteler bulunmaktadır. WordPress sistemler için “Broken Links” eklentisi kurarak kolaylıkla tüm kırık linkleri tespit edebilirsiniz. Online olarak da sitenizdeki kırık linkleri tespit edebilirsiniz. Bunun için aşağıdaki 2 siteyi öneriyorum.
ul class=”list list-icons list-icons-style-3 list-icons-lg”>

  • validator.w3.org/checklink/
  • www.iwebtool.com/broken_link_checker

Bunların dışında Google webmaster araçlarından giriş yaparak Tanımlamalar > Tarama Hataları bölümünden 404 hatası veren sayfaları tespit edebilirsiniz. Hata sayısının az SEO açısından kalite göstergesidir. Bu sebeple tespit edilen bu sayfalardaki hataları çözmeye çalışınız.

Site İçi Nesneler

Javascriptler

JavaScrip’ler grlişen web teknolojisi ve geniş kullanım alanlarının oluşturulması sebebiyle web sitelerinin vazgeçilmezleri arasında yer almaktadır. Bir hareketlilik ile görselliği aynı anda yaşatan JavaScript’ler, sitelerde pek çok farklı amaç ve uygulamalar için kullanılabilmektedir.

Bir web sitesi oluşturulurken görselliğin dışında performansa da önem verilmelidir. Sıkça kullanılmaya başlanılan JavaScript’ler, kullanım şekilleri önemsendiği zaman sitede aşırı yük oluşturarak siteyi fazlasıyla yavaşlatabilmektedir. Bu yazımızda, JavaScript’lerin daha etkin kullanılarak sitelerin nasıl daha hızlı hale getirilebileceğini anlatacağız.

Html İçi JavaScript

İnline js olarak da anılan HTML içi JavaScript, harici bir kaynaktan çağırılmayarak HTML kod yapısı içerisine <script type=”text/javascript”></script> şeklinde yerleştirilerek sitede HTML kodu gibi görünen ve gereksiz yere yük olan bu tür kodlamalar için kullanılmaktadır.

Örnek olarak aşağıda HTML için kullanılmış bir JavaScript kodu bulunmaktadır.

<script type=”text/javascript”>

try {

var pageTracker = _gat._gerTracker(“UA-1887021-5″} ;

}  catch(err) {}

</script>

Bu kod, sitenin HTML dosyasının boyutunu gereksiz yere arttırır. <script type=”text/javascript”> ve </script> komutları arasında JavaScript kodlarını kopyalayarak sayac.js gibi bir JavaScript dosyası içerisine yapıştırarak sunucuya yüklüyoruz ve inline JavaScript kodunu aşağıdaki gibi düzenliyoruz.

<script type=”text/javascript” src=”sayac.js”></script>

Yukarıda yer alana kod ile sunucuya yüklediğimiz kodu dışarıdan bir kaynak olarak çağırıyoruz. Sonuç olarak hem HTML boyutunu küçültmüş oluyoruz hem de JavaScript kodunun harici bir kaynaktan çağırılarak site açılırken sitedeki tüm kaynakların bölüm bölüm yüklenerek hızlı açılmasını sağlıyoruz.

Örnek olarak belirttiğimiz JavaScript kodu boyu olarak küçük olduğu için sitenin yavaşlığını az etkileyecektir. Daha büyük boyutlardaki JavaScript kodlarına bu işlemi uyguladığınızda site hızına etkisi gözle görülür şekilde fazla olacaktır.

Html dosyanıza sadece JavaScript değil, CSS kodlarını da azaltabilirsiniz. İlerleyen zamanlarda İnline CSS makalesini sitemizde bulabilirsiniz.

JavaScript Konumlandırma

JavaScriptler web sitelerinde genellikle, görselliği arttırmaktan ziyade, kullanışlılık ve uygulamalarda kullanılmaktadır. Doalyısyla bir web sitesi yüklenirken bu kullanılabilir olan uygulamalar ilk etapta gerekli olmazlar. Bu amaçla JavaScript kodlarını sitenin alt kısımlarına yerleştirmek, HTML yüklendikten sonra JavaScript’lerin yüklenmesini sağlayacak ve sitenin daha hızlı açılması izlenimi elde edilecektir.

JavaScript Sıkıştırma-Optimize Etme

JavaScript’ler yazılırken okuma ve düzenleme kolaylığı ön planda tutulur. Buna göre kodlar arasında boşluklar, boş satırlar fazlasıyla yer alır. Bu boşluk ve JavaScript kod yapısına fayda sağlamayan açıklamaların ortadan kaldırılması JavaScript dosya boyutunu azaltacak ve daha hızlı yüklenmesini sağlayarak siteyi hızlandıracaktır .

Javascript kodlarını sıkıştırmak için aşağıda yer alan siteyi kullanabilirsiniz.

www.xtreeme.com/javascript-optimizer/

Stil Dosyaları

Site yapımlarında görselliğe yüksek oranda önem verilmesi gerekir. Bu görsellik CSS dosyası ile sağlanabilir. CSS dosyaları siteler için büyük önem taşır ve görsellik ancak CSS dosyaları ile geliştirilebilir. CSS dosyalarının konumlandırılması, optimize edilmesi ve yeniden yapılandırılması ile hızlı ve görsel bir web sitesi elde edebilirsiniz. Bu makaleyi okuduktan sonra sitelerinizin CSS dosyalarında büyük oynamalar yapacaksınız.

İnline CSS

Her internet kullanıcısı, sitelere girince hızlı açılmasını ve hızlı dolaşılmasını ister. Sitede bulunan herhangi bir sayfadaki CSS kodlarını CSS dosyasından küçük bir kod yardımıyla çekerek sitenizin hızlanmasını sağlayabilirsiniz. Örneğin, span style=”font-size:9px;” kodunda style=”” de gördüğünüz style kodlarını direk yazma yerine span class=”a” kodunu yazabilirsiniz. Bu kodu ekledikten sonra CSS dosyanıza şöyle bir kod ekleyin;

.a { font-size:9px; }

Bu kod ile sitedeki sayfanın boyutunu azaltıp, gerekli kodları CSS dosyanızdan çekebilirsiniz. Hem sayfa hizalanmış olur, hem de SEO açısından daha yararlı olur. Daha önceden Inline Js’yi anlatmıştım sitede. Bu da onun gibi sadece CSS hali.

Bu yöntemin dışında bir yöntemimiz daha mevcut. Bazı sistemlerin hazır temalarında sitenin üzerine direk şu kod eklenir;

<style type=”text/css”>

.wp-polls .pollbar {

margin: 1px;

border: 1px solid #c8c8c8;

}

</style>

Bu kodlar da diğerleri gibi Html sayfasını gereksiz yere yavaşlatır. Bunun yerine üstteki kodlardan şunları alıp CSS dosyasına ekliyoruz;

.wp-polls .pollbar {

margin: 1px;

border: 1px solid #c8c8c8;

}

Daha sonra <style type=”text/css”></style> kodlarını silip, yerine şu kodu ekliyoruz;

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Son olarak üstteki kodu da ekledikten sonra işleminiz tamamlanıyor.

CSS Conbine

Birden fazla stil dosyası, sitelerde hem gereksiz sorgulama HTML kod boyutunun artması ve SEO açısından da olumsuz bir durum oluşturacaktır. Bu sebeple bir sayfada birden fazla Css stil dosyası çağırmak gereksiz ve hız ve kalite açısından zararlı bir durumdur. Yapılması gereken bu CSS dosyalarının kodları tek bir CSS’de birleştirilerek tek stil dosyası çağırılmalı ve bu birleştirme işlemi yapılırken body gibi benzer olarak kullanılabilecek sınıflar özel olarak dikkatle belirlenmelidir. Sınıf kodlarının da birden fazla tekrar etmesi önlenmelidir.

CSS Optimize

Stil dosyaları, düzenleme kolaylığı olması sebebiyle okunabilirliği arttırmak için boşluklar bırakılarak ve satırlar atlanılarak yazılırlar. Bu şekilde yazılan stil dosyaları okunurluğu fazla olmasıyla birlikte dosya boyutları da büyümektedir. Siteler açılırken stil dosyalarının hızlıca yüklenerek sitenin görsel düzeninin en kısa sürede oluşturulması için stil dosyaların boyutu kodlama yapısı ile minimuma indirilmelidir.

Stil dosyalarının kodlama boyutlarını azaltmak için, belirli sınıflar tek satırda toplanabilir, boşluklar silinebilir, aynı içeriğe sahip farklı sınıflar bir başlık altında toplanabilir. Tüm bu işlemleri yapmak kodlama bilmeyen kişiler için zor olması sebebiyle, bunların tamamını ve daha istediğiniz özelliklere uygun seçenekler ile Clean CSS sitesinden rahatlıkla yapabilirsiniz.

CSS Sıkıştırma

Html kod yapısı ile küçültülen stil dosyaları gzip gibi çeşitli sıkıştırma teknikleriyle daha küçük boyutlara getirilebilir. Bu şekilde var olan stil dosyası boyutundan %70’e kadar tasarruf yapılarak, stil dosyalarının daha hızlı yüklenmesiyle siteler hızlandırılabilir.

CSS Gzip

Scripts Gzip eklentileri ile stil dosyanızı sıkıştırabilir veya WordPress olmayan siteler için aşağıdaki yöntem kullanılabilir.

<link rel=”stylesheet”type=”text/css” media=”screen” href=”stil.css”/>

sonuna .php eklenerek düzenlenir.

<link rel=”stylesheet type=”text/css” media=”screen” href=”stil.css.php”/>

ve bu PHP stil dosyasının en üstüne ve an altında sırasıyla aşağıdaki kodlar eklenir.

<?php if (extension_loaded(“zlib”)){ ob_start( “ob_gzhandler”); } header(“Content-type: text/css”); ?>

<?php if (extension_loaded(“zlib”)){ ob_end_flush(); } ?>

CSS Konumlandıma

Sitelerin hızlı yüklenmesi izlenimini en çok kazandıran öğe stil dosyalarıdır. Çünkü stil dosyalarının yüklenmesiyle birlikte görsellik hemen oturur ve sitenin hızlı açılması izlenimi oluşur. Stil dosyasının önce veya sonra yüklenmesi toplam hız olarak aynı sürede yüklenmesini sağlarken, görselliğin bir an önce ekrana gelmesi sitenin hızlandığı düşüncesini oluşturacaktır. Bu sebeple stil dosyalarını sitelerin üstlerine koymaya özen göstermek gerekir.

Kod/Yazı Oranı

Özellikle Php ve Asp gibi dinamik yapıda kodlamaya sahip siteler, belirli bir içeriğin ziyaretçilere gösterilebilmesi için pek çok PHP kodunu kullanması gerekebiliyor. Bu sebeple, kısıtlı bir oranda gösterilecek metin için büyük oranlarda kodlama yapılmamış oluyor. Bugünkü dersin konusu, sitenin kaynak kodu ile arayüzünde görüntülenen metin arasındaki oran.

Metin büyüklüğü kod büyüklüğüne oranla ne kadar fazla ise, o kadar arama motoru dostudur.

Arama motorları için önemli olan 2 kriter siteyi siteyi rahat dolaşabilme ve sitenin hızıdır. İçerik metni ve kaynak kodu oranı bu 2 kriteri doğrudan etkilemektedir. Düz metinin kaynak koda oranla daha fazla olması, sitenin daha temiz bir kodlamaya sahip olduğunun göstergesidir. Bu sebeple Google botları sitelerde daha kolay gezebilir ve sayfaları daha hızlı görüntüleyebilir.

Metin kodu, kaynak kodu oranı ne kadar yüksekse site sıralama için daha iyi bir şans elde eder. Hızlı indexlenmesi de cabası. Google açısından en etkili kaynaklar ile açıklanmış bu hususun biraz daha detaylarına inelim.

İçerik Metni/Kaynak Kodu Oranını Nasıl Arttırabiliriz?
  • Sitede yer alan resimleri css kaynaklı kullanarak, resim URL’si kadar kaynak kodda azalma sağlayabiliriz.
  • Sitedeki urllerin kısayollarını kullanarak. Örneğin www.meden.com.tr yerine sadece “/” ve www.meden.com.tr/seo yerine / seo kullanarak, bu iki URL yapısı da aynı sonuca gidecektir.
  • Inline css ve inline js’leri minimuma indirerek.
  • HTML tablosu yerine CSS tablo yapısı kullanarak.

Kodlama Uygunluğu

W3C Kodlama Uygunluk Sertifikası

Web Standartları, internet sitelerini web tarayıcıları tarafından genel kabul görmüş bir kodlama yapısı içerisinde bulundurmayı amaçlamaktadır. Sitelerin tasarımı esnasında gözden kaçan veya yanlış bilinen kodlama hataları sebebiyle web siteleri farklı tarayıcılarda aynı şekilde görüntülenmez. Aynı zamanda bu hataların tarayıcılar tarafından okunarak yorumlanması güçleşmekte ve site hızında düşüş yaşanmaktadır. Web standartlarını düzenlemede en çok kullanılan w3c.org sitesi ile sitenizin HTML kod yapısına ve CSS kod yapısına ait hataları tespit ederek, hatalar altında geçen açıklamalar ile hataların düzeltilmesini sağlayabilirsiniz.

Sitelerin oluşumu veya düzenlenmesi sırasında meydana gelen hataları temizlemek sitelerin farklı tarayıcılarda aynı şekilde hatasız açılmasını sağlayacağı gibi hızlı açılmasını da sağlayacaktır.

Firefox kullanıcılar içini HTML Tidy eklentisini kurarak kaynak kodunda yer alan HTML hatalarını kolayca görebilir ve çözümünü örneklemelerle inceleyerek hataları giderebilirsiniz.

Html Tidy İle Hatasız Kodlama

Firefox HTML Validator Tidy eklentisi gezdiğiniz sayfaların HTML Validator hatalarını gösteren çok önemli bir eklentidir. Bu eklentinin güvenilir yanı w3c.org tarafından destekleniyor olması. Eklenti Tidy isminde bir W3C çalışanı tarafından yazılmıştır.

Web sitelerinde w3c hataları sebebiyle, sitenin SEO kalite puanı düşmekte ve web tarayıcıları tarafından sitenin doğru şekilde okunması gerçekleştiği için site yavaşlamaktadır.

HTML Validator eklentisi sayesinde sitenizin HTML Validator hatalarını, frame hatalarını, yanlış kodlamaları görebilirsiniz. Kaç adet hata olduğunun tespitini siz sayfaya girdiğiniz anda gerçekleştiriyor. Sonrasında ise sağ köşede eklentinin simgesine çift tıklayarak hatalarınızı görebiliyorsunuz. Bunun yanında, size hatalarınızı düzeltebilmenize yardımcı olmak için hatanıza ait kodlama örnekleri sunuyor. Tüm bu özellikleri sayesinde web sitenizin düzenli ve doğru bir kodlamaya sahip olmasını sağlamakta bir numaralı yardımcınız olabilir.

HTML Validator Tidy yapımcı sitesindeki açıklamaları (çeviridir) :

  • HTML Tidy Webmaster’ların HTML hatalarını görmelerini sağlayan bir yardımcıdır. Bit Html sayfasının hatalarını ve hata sayısını Firefox tarayıcınızın durum çubuğunda gösterir. Hata ayrıntılarını görmenize olanak sağlar.
  • Html Tidy kodlama hatalarını bulur ve 3 kategoride sınıflandırılır:

Errors: Kodlamada yaptığınız hatalardır.

Warnings: Otomatik olarak düzeltebileceğiniz HTML hataları.(frame) (optional) accessibility warnings: İsteğe bağlı, erişilebilir uyarılar.

Eski Tip Kodlamalardan Arınmak

Table

Eski tip kodlamalar içerisinde en yoğun kullanılan kodlama yapısı tablo kodlamalarıdır. Bu kodlamalar eski tip HTML tablo oluşumu yerine yeni tip css tabanlı tablo yapısı kullanılmalıdır. Sitelerin eski tip kodlamalardan arınması, hem arama motorlarının siteleri daha iyi taramasını sağlar hem de web tarayıcılarının siteleri sorunsuz görüntülenmesini sağlar. Bu sebeple bu tip kodlamalardan kaçınmak gerekir.

Basit bir HTML tablo yapısı aşağıdaki gibidir.

<table border=”1”>

<tr>

<td>satır 1, sütun 1</td>

<td>satır 1, sütun 2</td>

</tr>

<tr>

<td>satır 2, sütun 1</td>

<td>satır 2, sütun2</td>

</tr>

</table>

CSS ile örnek tablo yapımı için aşağıdaki siteyi ziyaret edebilirsiniz.

www.w3schools.com/css/css_table.asp

10 CSS tablo örneği için aşağıdaki siteyi ziyaret edebilirsiniz.

designshack.co.uk/articles/10-css-table-examples

Target Kodlarından Arınma

External Nedir?

Rel=”external”, target=”_blank” ill aynı işlevi gören bir koddur. Bu kodlar her ne kadar aynı işlevi görse de, external kodu son web teknolojilerine uyumlu olarak oluşturulmuş bir koddur. External kodunu da target gibi nofollow yapmak tabii ki mümkündür. Bunun için rel=”external” koduna nofollow kodunu da ekliyoruz ve şöyle oluyor;

rel=”external,nofollow”

Target Nedir?

Target kodu, linke tıklanıldığı zaman sayfanın nasıl açılacağını belirleyen koddur. Örneğin, target=”_blank” şeklinde kullanılarak linkin yeni sayfada açılması sağlanabilir. Ancak target artık güncel web teknolojileri tarafından onaylanmayan bir koddur. Dolayısıyla bu kod yerine yeni pencereleri Rel=”external” ile açmak SEO açısından önemlidir.

Target ill External Arasındaki Farklar Nelerdir?

Target kodu, eski bir koddur ve artık w3c standartlarına uymamaktadır. Bu nedenle artık yeni pencere açma kodları yazılırken external kodu tercih edilir.

Aşağıdaki bölümden eski ve yeni kod arasındaki farkı anlayabilirsiniz.

Eski kod;

< href=”http://www.meden.com.tr” target=”_blank”>Yeni Bir Pincer Aç</a>

Yeni Kod;

<a href=”http://www.meden.com.tr” rel=”external”>Yeni Bir Pencere Aç</a>

”rel” kodunun asıl amacı, herhangi bir linki yeni pencerede açtırma olmadığı için yeni kodu kullanırken, direk sitenize yapıştırırsanız çalışmaz. JavaScript kodları ile bu kodun çalışmasını sağlayabilirsiniz.

JavaScript kodları;

function HariciLinkler() {

if (!document .getElementsByTagName) return;

var linkler = document.getElementsByTagName(”a”);

var linklerAdet =linkler.length;

for (var i=ø; i<linklerAdet; i++) {

var tekLink =linkler [i];

if (teklink.getAttribute(”href”)

getAttribute(”rel”) == ”external”) {

tekLink.target =”_blank”;

}

}

}window.onload =HariciLinkler;

Üstte belirtmiş olduğum JavaScript kodlarını, rel kullandığımız sayfaya, <script></script> tagları arasına koyarak yapıştırıyoruz. Böylelikle rel koduna, yeni pencerede açma işlevini vermiş oluyoruz.

Frame

Frame Türkçe karşılığı olarak çerçeve anlamına gelmektedir. Sitelerde oluşturulan frameler aracılığıyla başka sayfalara ait veriler bu çerçeveler aracılığıyla gösterilmiş olur. Önceleri sıkça kullanılan bu teknik arama motorlarının bo konudaki olumsuz düşüncesi sebebiyle zamanla kullanımı azaldı. bir site oluşturulurken, zahmetsizce içerik bulundurmak için kullanılan bu teknikle, başka bir sitedeki veriler frame kodları aracılığıyla sitede istenilen konumda gösterilir. Site içerisinde site çalıştırılmış olur.

Arama motorları, başka kaynaklar üzerinden yayın yapan bu tür kodlamaları tasvip etmemektedir. Zira hiçbir üretimde ve zahmette bulunmadan içerik göstermek mümkün olabilmektedir. Bir kullanıcı veya arama motoru botları tarafından kolayca fark edilebilen bu durum SEO açısından büyük bir dezavantaj oluşturmaktadır. Hatta kendi sitenize ait başka sayfaların bile frame ile kullanımı hoş karşılanmamaktadır.

Bu gönderiyi paylaş

Bir cevap yazın