Arşiv için 'CSS Makaleleri' kategorisi
Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go. Continue Reading » A CSS styled table
Etiketler: En iyi css makelesi, Turning a list into a navigation bar
Turning a list into a navigation bar
I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up. Continue Reading » Turning a list into a navigation bar
Clearing Floats The Old Fashioned Way
When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say “That’s not right!” True, IE/Win does enclose a float within a container ‘automatically’, but only if the container element happens to possess the MS-only quality called hasLayout. Continue Reading » How To Clear Floats Without Structural Markup
İlk olarak 1995′de ortaya çıkan CSS, 1996 yılında W3C (Dünya Çapında Ağ Birliği)’ne kabul edildi. W3C’ye katılması demek bu kodlama biçiminin tüm tarayıcılar tarafından destekleneceği anlamına geliyordu. Bu tarihten itibaren W3C’ye üye olan tüm tarayıcı grupları CSS’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Nitekim Mayıs 1998′de gerekli güncellemeler yapılarak CSS 2′ye geçiş yapılmıştır. Ardından CSS 2.1 ile bazı özellikler yenilenmiştir.
Gelelim CSS’nin ne işe yaradığına… Web sayfalarının iki önemli öğesi sayfalarda yayınlanan bilgi ile stilin birbirine uyarlanmasıdır. Bu nedenle HTML ve CSS’nin birbiriyle uyumlu olarak çalışması ve sayfa stillerinin birkaç değişiklikle güncellenebilmesi bize kolaylık sağlayacaktır. Terim olarak CSS’nin İngilizce’deki açılımı “Cascading Style Sheets” dir. Adından da anlaşıldığı gibi içerisinde geçen “style” kelimesi sayfada yer alan bilgilerin belirli bir stil (tarz) ile sunulması olayıdır.
Kısaca CSS, HTML sayfaların stil olarak düzenlenmesinde bize kolaylık sağlar. Mesela web sitenizde yer alan tüm sayfalarda yazı tipini “verdana”, yazı tipi boyutunu da “10 punto” olarak ayarlamak istiyorsunuz. Bunu “style” dosyasında tek bir satırla halledebilirsiniz. CSS kullanmıyorsanız bu değişikliği bütün sayfalarda yapmak zorunda kalırsınız. İşte bu noktada CSS’nin çok önemli faydası vardır.
CSS’nin temel özellikleri nelerdir?
Style dosyasında yapacağınız birkaç değişiklikle web sitenizde yer alan tüm sayfaların yazı tipini, boyutunu, rengini, arka planını vb kolayca değiştirebilirsiniz.
CSS, temel olarak kullanımı kolay bir dile sahiptir. HTML’yi bilen herkes CSS’den istifade edebilir. Ayrıca HTML’de kullandığımız etiketlerin başında ve sonunda yer alan < - > gibi işaretleri kullanmamıza gerek yoktur. Bu nedenle yazımı gayet basit ve sadedir.
Diğer bir özellik de yazı tipi gibi özelliklerin “style” dosyası ile ayarlanmasıyla belirli HTML kodların diğer sayfalarda kullanılmasına gerek kalmamasıdır. Böylece sayfaların boyutundan tasarruf edebiliriz.
CSS’yi nasıl öğrenebilirim?
CSS’yi öğrenmek hiç de zor değil. Ancak CSS’ye başlarken bir parça HTML bilginizin olması gerekir. Çünkü CSS, HTML’nin kullanımını kolaylaştıran bir tür web yazılımıdır.
Etiketler: css, External Style Sheets, stil sayfası, Stil Sayfasını HTML İçerisinde Çağırmak (CSS)
Dış Stil Sayfası (External Style Sheets)
Birden fazla sayfada tek tip stil kullamak için “style” dosyası oluşturmamız gerekir. Oluşturacağımız stil dosyasının uzantısı .css şeklinde olmalıdır.
Bunu yaptıktan sonra HTML sayfalarda “style” dosyasını çağırmamız gerekir. Her sayfanın header bloğuna ekleyeceğimiz kısa satırla bunu sağlarız:
<link rel="stylesheet" type="text/css" href="stil.css" />
Bu örnekte “style” dosyasının ismi “stil.css” dir. Bu dosyanın ana dizinde olması gerekir. Başka bir dizinde bulunuyorsa bunu “dizin/stil.css” şeklinde ilgili klasörün ismini vererek belirtmemiz gerekir.
Bu tür “style” dosyalarına “dış stil sayfası” diyebiliriz. Tüm sayfalarda tek tip stil kullanmak için bunu tercih edebiliriz.
İç Stil Satırları (Internal Style Sheets)
Ayrıca “dış stil sayfası” kullanmak yerine stilimizin tamamını ilgili sayfada header bloğuna ekleyeceğimiz “iç stil satırları” ile sağlayabiliriz:
<style type="text/css">
P {color: black; font: verdana}
H1 {color: red; font: verdana}
</style>
“İç stil satırları” bazı eski tarayıcılar tarafından desteklenmeyebilir. Zaten günümüzde Firefox 2 ve Internet Explorer 6/7 gibi yeni kuşak tarayıcılar tercih edilir. Yine de eski tarayıcılarda bunu önlemek için yukarıdaki kodun başına <!– imlecini; sonuna ise –> imlecini yerleştirerek CSS komutunu aşağıdaki gibi kapatmamız gerekir:
<style type="text/css"> <!--
P {color: black; font: verdana} /* Satır Yorumu */
H1 {color: red; font: verdana} /* Satır Yorumu */
--> </style>
Ayrıca her bir satırda C dilindeki yapıya benzer şekilde /* */ iki işaret arasında ilgili satırlar hakkında yorum ekleyebilirsiniz.
Her bir sayfada farklı stil kullanmak için bu yöntemi tercih edebiliriz.
CSS’de tüm komutlar belirli bir düzene göre sıralanır. Genel olarak iki bölüme ayrılır. Birincisi en solda bulunan kuralı uygulayacağımız elementtir. Buna seçici (selector) denir.
CSS’nin temel yapısında bir diğer özellik de bildirim bloğu (declaration)’dur. Bildirim bloğu süslü bir parantez ile açılır; benzer şekilde noktalı virgülün ardından süslü parantez ile kapanır.

Bildirim bloğunda “seçici” için istediğimiz kadar “özellik” ve “değer” atayabiliriz. Birkaç örnek vermek gerekirse;
Tek bir özellik:
H1 {font-family: Arial}
Birden fazla özellik:
H1 {font-family: Arial; font-size: 2; font-weight: bold; color: red;}
Yukarıdaki CSS kod dizilimini açıklayalım;
H1, seçici özelliktir; genellikle yazı/paragraf başlıklarını tanımlamak için kullanılan bir tür HTML kodudur. H1 kodunu kullandığımız satırlarda yer alan yazılar bildirim bloğunda bulunan özelliklere göre şekillenecektir.
Seçicinin ardından süslü parantez açıyoruz. Özellik ve değerler arasında iki nokta üst üste [:] işareti yer alır. Her bir değerin sonuna noktalı virgül [;] gelmelidir.
Seçici için tanımlayacağımız yazı tipi, yazı boyutu, kalınlık/italic ve renk gibi özellikleri her bir satırda belirtiyoruz. Ardından bildirim bloğunu süslü parantez ile kapatıyoruz.
Bu satırda kullandığımız özellikler:
font-family (yazı tipi)
font-size (yazı boyutu)
font-weight (kalın, italic, altı çizili yazı)
color (yazı rengi)
CSS kod diziliminde her bir özelliği aynı satıra yerleştirmek zorunluluğu yoktur. Yukarıda verdiğimiz örnekte yer alan özellikleri aşağıdaki gibi birden fazla satıra yayabiliriz:
H1 {
font-family: Arial;
font-size: 2;
font-weight: bold;
color: red;
}
HTML dokümanlar içerisinde sınıf (class) olarak tanımladığımız birimler vardır. İşte bu sınıf birimlerinin özelliklerini CSS ile ayarlayabiliriz. Diyelim ki html tabanlı bir sayfada aşağıdaki kod yer alıyor:
<p align=”center” class=”paragraf”>Yazı...</p>
Sınıfı “paragraf” olan imleri CSS içerisinde şöyle tanımlayabiliriz:
.paragraf {color: black; font: Arial;}
Böylece “paragraf” sınıfıyla tanımlanan birimlerde yazı rengi siyah ve yazı tipi Arial olacaktır.
“Paragraf” sınıfını birimlere göre farklı ayarlamak için aşağıdakine benzer seçiciler kullanabiliriz:
p.paragraf {color: black; font: Arial;}
h1.paragraf {color: red; font: Arial;}
Böylece <p> biriminin kullanıldığı tüm alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi siyah; <h1> biriminin kullanıldığı alanlarda sınıf “paragraf” olarak belirlendiğinde yazı rengi kırmızı olacaktır.
Ayrıca sınıf seçicileri yerine ID seçicileri de kullanabiliriz. ID seçici ile sınıf seçicileri arasındaki önemli bir fark, CSS içerisinde ID’lerin # işareti ile belirtilmesidir.
<p align=”right” ID="baslik2">Merhaba Dünya!</p>
<h1 ID="baslik2">Merhaba Dünya!</h1>
Böylece “baslik2” buyruğunu CSS içerisinde şu şekilde tanımlayabiliriz:
#baslik2 {color: blue;}
Böylece “baslik2” ID’sini kullandığımız birimlerde yazı rengi mavi olacaktır. Bu özellikleri arttırabilirsiniz.
Temel Meta Etiketleri
Abstract:
Tüm site hakkında bilgi veren cümledir.
<META name=”Abstract” content=”Site özeti”>
Author:
Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.
<META name=”Author” content=”Adınız, E-Posta Adresiniz”>
Copyright:
Sitenin telif hakları konusunda bilgi veren etikettir.
<META name=”Copyright” content=”telif hakkı cümlesi”>
Description:
Bazı arama motorlarının temel aldığı, site hakkında bilgi veren temel etiketlerden biridir.
<meta name=”description” content=”Sitenizin içeriği hakkında geniş bilgi”>
Expires:
Sitenin içeriğinin hangi tarihte zaman aşımına uğradğını arama motorlarına ileten etiket.
<META name=”Expires” content=”Mon, 12 Jan 2007 17:45:05 GMT”>
Keywords:
Yine arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket.
<meta name=”keywords” content=”kelime1 kelime2 kelime3 kelime4 kelime5″>
Language:
Sitenizin varsayılan dilini belirten etiket.
<meta http-equiv=”content-language” content=”tr”>
Revisit-After Tag:
Arama motorlarına, sitenin içeriğinin kaç günde bir güncellendiğini ileten etiket.
<meta name=”revisit-after” content=”7 days”>
Refresh:
Belli aralıklarla sayfanın yeilenmesini sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir.
<meta http-equiv=”refresh” content=”60″>
Redirect:
Sayfanın, belli bir zaman sonra başka bir sayfaya yönlenmesini sağlar. Örnekte, sayfa 2 saniye sonra başka bir sayfaya yönlenir.
<meta http-equiv=”refresh” content=”2;url=http://www.sanalbilisim.net”>
Robots:
Arama motoru robotlarının, site içerisindeki linkleri takip edip etmeyeceklerini gösteren etikettir.
<meta name=”robots” content=”none”>
<meta name=”robots” content=”index,follow”>
<meta name=”robots” content=”noindex,follow”>
<meta name=”robots” content=”index,nofollow”>
<meta name=”robots” content=”noindex,nofollow”>
gibi kullanımları mevcuttur.
Bunlar dışında;
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>
gibi bir kodla, sayfanın karakter kodlamasını belirtebilirsiniz. Bu kod, sayfanızdaki Türkçe karakterlerin düzgün görünmesini sağlar.
Not:
Tüm meta etiketleri <head> .. </head> kodları arasına yazılır.
Ayrıca XHTML standartlarına göre, meta etiketleri > ile değil /> ile kapatılır.
Örnek: <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>
Etiketler: Algoritma, AllTheWeb, ALT Tags, Anchor Text, Apache Web Server, Arama Motoru Dostu, Arama Motoru Optimizasyonu, Backlink, Cloaking, Cookie, Crawler, css, Description, Domain, Doorway Page, Dynamic Content, Flash, Google Toolbar, GoogleBot, Header Tags, Hidden Text and Hidden Links, Hits, Home Directory, Hyper Text Markup Language, Hyper Text Transfer Protocol, içerik, Image map, Inbound Links, Indexing, IP Address, Keyword, Kırık Link, Link Farm, Linking, Log Files, META Data, Meta Tag, Outbound Links, Page Title, PageRank, Pay-Per-Click, PR, Robot, Robots.txt, Search Engine Results Pages, Search Enginee Optimization, Site Map, Spam, Top Ten Ranking, Visitor-User
Algorithm (Algoritma)
Arama Motoru tarafından örümcekleri vasıtasıyla buldukları web sayfaları sıralamak için kullanılan Matematiksel formüldür.
ALT Tags
Web site içinde mouse ile bir fotoğrafın üzerine geldiğinizde görüntülenen kısa bir açıklama yazısıdır. Image ALT taglar sayfanızın ziyaretçileri için kullanılır. Tüm ALT taglar abahtar kelime yoğunluğuna bağlı olarak arama motorudaki sıranızı yükseltir.
Örn:
< img src = ” silver-porsche.jpg ” width = ” 150 ” height = ” 225 ”
ALT = ” Photo of a Silver Porsche “>
Anchor Text
Anchor text hyperlink içinde görünen, tıklanılabilir yazıdır.
Örn:
< a href:” http ://www.sanalbilisim-yardım.com/” > Burası Anchor Text < / a>
Apache Web Server
Yaygın olarak kullanılan bir web sunucu
ATW
AllTheWeb arama motorunun kısaltılmışıdır.
Backlinks
Başka bir web sayfasından sizin sayfanıza bağlı linklerdir. Incoming ya da inbound Link olarakta kullanılır. Bazende “IBLs” olarakta kullanılabilir.
Broken Link (Kırık Link)
Kullanıcının tıkladığında bulunamayan bir sayfaya yönlendirdiği linklerdir. Ölü link (dead link) olarakta bilinir.
Cloaking
Kullanıcılar tarafından çekici bir sayfa gibi görünen yüksek rank elde etmek için kullanılan aldatıcı arama motoru hilelerinden biridir.Hiç bir arama motoru bunu sevmez. Google da bunların başında gelir.
Content (içerik)
Web site içinde bulunan bilgidir. (metinler, resimler vs.)
Cookie
Cookie web site kullanıcılarının bilgisayarında depolanan küçük text dosyalarıdır. Kullanıcın sayfayı bir sonraki ziyaretinde tanınması için kullanılır.
Crawler
Arama Motorları tarafından sayfaları taramak için kullanılan bir programdır. Crawler arama motorlarının web sayfalarını bulum indekslemesi için kullanılır. Spider, robot yada bot olarak ta adlandırılırlar.
CSS
Cascading Style Sheet. Biçimlendirilmiş Stil Şablonlar. Web sayfalarınızın görüntüsünü istediğiniz gibi tasarlamanızı sağlar.
Description
Bir web sayfasındaki kısa bir cümle yada paragrafla açıklanan içerikler. Çoğunlukla Anchor textlerde kullanılır.
Description Meta Tag
Bulunan web sayfanın içeriğini açıklar.
Domain
Bir Web sitedeki URL dir.
Doorway Page
Çoğunlukla köprü sayfalar olarak bilinir. Giriş ve çıkış sayfalarını birbirleriyle köprülerler. Seçilen anahtar kelime ile iyi rank elde etmek için ve ziyaretçileri asıl sayfalarına göndermek için kullanılır. İki çeşit köprü sayfalar vardır. Birisi tema üzerine otomatik olarak oluşturulur bir diğeride manuel olarak oluşturulmuş anahtar kelime odaklı içerik sayfalarıdır.Bunlardan ilki bir çeşit spamdır ve çoğu arama motoru tarafından cezalandırılır., ikincisi ise önemli ve çok etkin bir SEO tekniğidir.
Dynamic Content (dynamic pages)
Web sayfaları içinde içerik yönetim sistemi bulunan veritabanından yönetilir. Dinamik sayfalar çoğunlukla URL nin içindeki soru işareti gibi karakterler içerir. Dinamik sayfalardaki URL ler çoğunlukla : .asp, .cgm yada .cgi dir. Google ın da içinde bulunduğu çoğu arama motoru dinamik sayfaları iyi indeksleyemezler.
Flash
Macromedia nın grafik programıdır. Grafikler ilgi çekicidir fakat spider ve robotlar bunları göremezler.İyi görünürler fakat iyi rank sağlayamazlar.
GoogleBot
Google ın kullandığı görevi bulmak ve yeni site indekslemek olan bi web tarayıcısıdır.
Google Toolbar
Google Toolbar Google ın web sitesini ziyaret etmeden arama yapabileceğiniz bir eklentidir.Google Toolbar browser da PageRank değerinide gösterir.
Header Tags
HTML tagları web sayfanın profiline yardımcı olur önemli bilgilere dikkat çekmek için kullanılır. Anahtar kelimeler header taglarının içine yazılabilir.Eğer doğru tasarlanmışsa arama motorlarındaki rankınızı arttırır.
Örn:
< h1 >Bu h1 header tagı< / h1 >
< h2 >Bu h2 header tagı< / h2>
Hidden Text and Hidden Links
Yazı rengini arka plan rengiyle aynı vermektir. Böylece yazı yada link görünmez veya okunması çok zor olur. Hidden text yada hidden links çoğunlukla yapay sayfanın anahtar kelime popülaritesini arttırmak için kullanılan bir aldatmaca yöntemidir.Bu yöntem Google ve diğer arama motorları tarafından onaylanmayan bir yöntemdir ve ceza almanıza maruz kalmanıza neden olabilir.
Hits
Hits terimi çoğunlukla yanlış anlaşılır.Hit bir web siteniz varsa onun ziyaret edilmesi olarak bilinir.Ama bu değildir.Hit web sitenizde her zaman bulunan bir dosyadır.
Home Directory
Sitenizin ana içerik sayfasının bulunduğu yerdeki ana dizindir.
HTML(Hyper Text Markup Language)
Internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir.
HTTP(Hyper Text Transfer Protocol)
HTML dosyalarının aktarımı için kullanılır.
Image map
Aynı resimde ayrı hyperlinkleri farklı alanlara yerleştirmek. Resmin farklı alanlarını tıkladığınızda sizi farklı farklı sayfalara götürür.Arama motoru dostu değildir.
Inbound Links
Başka bir web sayfasından sizin sayfanıza bağlı linklerdir. Incoming ya da Backlinks olarakta kullanılır.
Indexing
İndeksleme işlemi. Arama motoru web taraması yaptığında URL leri farklı kriterler kullanarak dercelendirir ve içeriğine ekler.
IP Address
Internet Protocol Address in kısaltmasıdır. Her bilgisayarı internete bağlar ve tekil olarak numaralandırılmıştır.IP adresler statik(asla değişmeyen) yadar dinamik(internete her bağlanışta değişen) olabilir.
Keyword (Key Phrase)
Bir kullanıcının herhangi bir siteyi bulmak için sitenin konusuyla ilgili olarak arama motoruna yazdığı kelime yada kelime gruplarıdır.
Link Farm
Yalnızca Arama Motorlarında rank elde etmeyi amaçlayarak oluşturulmuş bir Web sayfasıdır.tamamen ilişkisiz linklerin bulunduğu bir listeden ibarettir.Bu tip sayfalar çoğu arama motorları tarafından cezalandırılır.
Linking
Bir Web sayfasından başka bir Web sayfasına geçmek için kullanılan URL dir.
Log Files
Web Server ınızda devamlı ve otomatik olarak oluşturulmuş ve güncellenmiş dosyalardır.Log doyalarında URL ler, IP adresleri ziyaret edilmiş sayfalar, Tekil ziyaretçi numaraları, Toplam sayfa görüntüsü, Toplam hit ve daha fazlası vardır.
META Data / META Tag
Meta Data Bir sayfa yada dökümana ait olan bilgidir. Sayfa açıklaması içerebilir. Uygun anahtar kelime listesini yada yazar adı içerebilir.
Örn:
< META NAME = ” TITLE ” CONTENT = ” Burası sayfa başlığı “>
Outbound Links
Web sayfanızdan başka bir web sayfasına olan bağlantıdır. Çoğunlukla diğer sizin sitenizden başka bir sitede bulunur.
Page Title
Sayfa başlığı bir sayfadaki en önemli yerdir.Sayfa başlıkları arama sonuçlarında link olarak görünürler.
PageRank / PR
PageRank Google ın bulucularından Larry Page ve Sergey Brin tarafından geliştirilen bir algoritmadır. Bu algoritma size sıralanmış en iyi web sayfalarını görüntülemek için kullanılır.
Pay-Per-Click
Arama Sonuçlarında ilan veren kişilerin kullanıcıların ilanlarını tıkladığı kadar para ödedikleri sistem.
Robot
Arama motorları tarafından yeni web sayfaları bulmak, sıralamak ve taramak için kullanılan bir programdır. Daha çok bots olarak bilinir.
Robots.txt
Web sitenizin ana dizinine koyulan özel bir text dosyadır. Arama motorları sitenizi gezerken tüm sayfalarınızı tek tek ziyeret edip içeriğini depolar. Eğer sitenizde hazır olmayan sayfalar varsa yada arama motorları tarafından görünmesini istemediğiniz bölümler varsa Robots.txt dosyasına koyabilirsiniz.
Search Engine Friendly(Arama Motoru Dostu)
Aldatıcı yöntemler kullanmadan Arama Motorları ile aynı düşünerek dizayn ve optimize etme işlemi.
Search Enginee Optimization(Arama Motoru Optimizasyonu)
Bir Web sayfasını Arama Motoru sıralamalarında yüksek rank elde etmek için optimize(iyileştirme) etme işlemidir.
Search Engine Results Pages (SERPS-Arama Motoru Sonuç Sayfaları)
spesifik bir arama sorgusu sonucunda geri dönen web sayfa sıralamasıdır. Basit olarak, Arama Motoruna arama sorgunuzu yazıp arama yaptıktan sonra size sunulan arama motoru sonuç sayfasıdır.
Search Query-Search Term
İlginizi çeken konularla ilgili bir web siteyi bulmak için Arama Motoruna yazdığınız anahtar kelime veya anahtar cümledir.
Spam
Diğer sayfalara nazaran daha yüksek rank elde etmek için adaletsiz olarak kullanılan her türlü tekniktir.Genel olarak istenmeyen mail olarak bilinir.Açık olarak spam karalisteye alınmanıza neden olurlar.
URL
URL (Uniform Resource Locator)basit deyimle Web adresidir.
Spider
Daha çok crawler olarak adlandırılan bu programlar arama motorları tarafından oluşturulmuş web üzerinde sayfaları indekslemek için kullanılır. Web sayfalarını ziyaret ederler ve sitelerin içeriklerini toplarlar.
Site Map
site haritası herhangi bir web sitenin içinde kullanıcılara yardımcı olmak için ve arama motorlarının siteyi kolaylıkla taraması için dizayn edilmiş bir sayfadır.Bu sayfada web sitenin içindeki tüm sayfalar görünür ve tüm sayfalara erişilebilir.
Top Ten Ranking
Google da arama sorgusu sonucunda listelenmiş ilk 10 siteyi gösteren bir Web sayfasıdır.
Visitor-User
Sitenizi ziyaret eden kişiler yada kullanıcılar.
Arama Motorlarının listelerinde üst sıralarda kalmanın garantisi yoktur. Fakat sıralamada siteyi üst sıralarda tutmak için 1-2 etken vardır.Bunlar on page ve off page faktörlerdir.
On Page faktör sayfada yapılacak olan optimizasyon işlemi ile kendi elimizde olan faktördür.
Off Page faktör sayfanın haricinde, kendi elimizde olmayan faktördür.Sayfaya başka sitelerden verilen linklere bağlı faktördür.
Arama Motorları için Sitelerde anasayfalardaki metinlerin ilk birkaç satırları önem taşır.Bu yüzden bu satırların anlamlı olması sitelerin yararına olacaktır.Bir sitenin arama motorlarına yaptığı kaydın indekslenmesi ve arama sonuçlarında bulunması için iyi optimize edilmiş olması gerekir.Arama Motorları yapılan kaydın indekslenmesi için başvuran sitenin tümünün gezilmesine yardımcı olan, örümcek(Web-Spiders) veya robot denilen programlar kullanırlar. Dolayısıyla indekslenmesi için sitenin bir de içeriği olması şarttır.Ayrıca sitenin server ının bulunduğu ana klasöre robots.txt dosyası konulması örümceklere yardımcı olacaktır.
Sitenin tasarımından ve programlanmasından önce nasıl optimize edilmesi gerektiği düşünülmelidir. Bunun için kullanılacak anahtar kelime ve kelimelerinin belirlenmesi gerekir.
Site Tasarımı da arama motoru optimizasyonunda büyük önem taşır.
- Arama motorlarında siteleri incelemek için örümcek ve robotların kullanıldığından bahsetmiştik.Sitelerin yapım aşamasında daha çok metin kullanılması uygun olacaktır.Kullanılan bol miktarda resim ve grafikler arama motorlarındaki konumu olumsuz etkileyecektir.Çünkü örümcekler resimleri okuyamazlar.Metinler CSS kullanarak çok daha güzel bir hale getirilebilir. Çok sayıda grafik ve resim kullanmak sağlıklı olmayacaktır.
- Eğer resim kullanılıyorsa mutlaka bir alt tag kulanılmalıdır.Ayrıca kullanılan resimlere de anahtar kelimelerle isim vermek te yerinde olur.




