Ders Adı: Püf Noktaları
Kategorisi: Püf Noktaları
Ekleyen: zebaniz - Tarih: 07.11.2005 - 21:48

Arama Motorlarına Eklemede Dikkat Edilecek hususlar

Arama Motorlarına sitemizi eklerken dikkat edeceğimiz hususlar;
Hazırladığımız web sitelerinin arama motorlarında yer alması ve daha da önemlisi arama sonuçlarının da üst sıralarda yer alması için dikkat edeceğimiz hususlar:
Title:
Arama Motorlarının bir çoğu tarafından aranan kelime öncelikle Title'da aradığından sitemizin en önemli bölümüdür. Sitenize özgü 100 karakteri geçmeyen bir başlık yazmanız uygun olacaktır. Ayrıca sayfanızdaki ilk üç HTML kodunun
<html><head><title> sırası ile bulunması önceliğinizi arttıracaktır. Örn; <title>Web Tasarımı ile ilgili tüm webmaster ların buluşma yeri <title>
Meta Description:
Sitenizin cümle olarak tanımlandığı bu bölüm de Arama Motorları tarafından ilk bakılacak yerlerdendir. internet dilinin İngilizce olduğunu düşünerek, kısacık İngilizce bir tanım da yapabilirsiniz. Örn;
<Meta Name="Description" CONTENT="Web tasarımı ile ilgili tüm webmaster ların bilgi tazeleme ve kaynak merkezi."
Meta Keywords:
Arama motorlarınca sitenizde bulunmasını istediğiniz kelimeleri yazacağınız bölümdür. Öncelikle sizin için en önemli 40-50 kelimeyi yazmalısınız. Aralarına virgül koymayı unutmamalısınız. Hatta bazı motorlar boşluk istediklerinden virgül ve boşluk beraber de kullanılabilir. Ancak unutmayınki her ikisi de 255 sayısının içindedir. 255'i açıklarsak; Arama Motorlarının bazıları az ve öz açıklamayı tercih ettikleri için 255 kelimeyi kabul ederler. bazıları,
<Meta Name="Description" ve <Meta Name="Keywords" da ilk 255 kelimeyi kabul ederlerken bazıları da 255 kelimeyi aşan siteleri otomatik olarak banlarlar. Örn; <Meta Name="Keywords" CONTENT="grafik, web tasarımı, webmaster, web design, image, graphics">
Image Alt:
İmaj aramaları için imajlara vereceğimiz alt textleri(açıklamaları) çok önemlidir. Özellikle Altavista gibi resim aramalarına önem veren arama motorları tarafından hemen farkedilirler. Örn;
<img src="anasayfa.gif" alt="Webmaster ların Merkezi">
index.html
Arama Motorları index sayfasındaki linklerden ilk üç tanesini kopyalayabilir. Yani index sayfası özelliklerinde en az üç alt sayfanızın olması yararlıdır. Sadece imajlarla dolu bir index sayfası yerine sitenizin içeriği ile ilgili pek çok konuyu başlık halinde de olsa barındıran ve 100kb geçmeyen text ağırlıklı bir index sayfası da çok yararlı olacaktır. Arama Motorlarının, arananı index sayfasında bulması tercih sebebidir.
Author & Copyright:
Author tagı'na sayfayı hazırlayanın kişisel bilgileri yazılır. Örn;

<Meta Name="Author" CONTENT="aeyStudio.com">
Copyright tagı'na ise sayfanın telif hakları ile ilgili cümleler yazılır. Örn;
<Meta Name="Copyright" CONTENT="Bu sitenin tüm yasal hakları aeyStudio.com'a aittir. İzinsiz kopyalanamaz.">
Refresh:
Bu tag ile sayfanızı istediğiniz sürede yenileyebilir veya sayfa açılınca başka bir URL ye yönlendirebilirsiniz.
<meta http-equiv="Refresh" content="5; URL=http://www.aeystudio.com">
Burada ( 5 ) ile belirtilen, saniye cinsinden süre, URL= ise yönlendirilecek olan sayfanın adresidir.
Türkçe Karakter tag'ı:
Bu tag ile browserlara Türkçe karakterleri tanıtabilirsiniz.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

Yazı(Text) Linklere Açıklama Eklemek:
Yazı Linklerine açıklama ekleyerek anlaşılır hale getirebiliriz. Örnek olarak Mause'unuzu üzeride tutun!
Bu işlemi gerçekleştirmek için web sayfamızın HTML kodu içinde yer alan ve link verdiğimiz kod olan <a href="..."> tagı içine  title="Açıklamanız" komutunu eklemeniz yeterlidir. Yukarıdaki örnek link'in kaynak kodu:
<a href="http://www.aeystudio.com" title="aeyStudio.com Ana Sayfası"><b>Mause'unuzu üzeride tutun!</b></a>

Resimleri Yazılardan Ayırmak:

Örneğin, bir yazımız var ve bu yazımızın yanına bir resim eklemek istersek görüntüsü yan taraftaki daki gibi yazı ve resim arasında boşluk olmayacaktır.
Yandaki resimdeki web sayfasının HTML tagı:
<html>
<head>
<meta http-equiv=
"Content-Type" content="text/html; charset=windows-1254">
<title>
Deneme</title>
</head>
<body topmargin=
"0" leftmargin="0"> <div align="left">
<table border="0" width="70%"> <tr> <td width="55%">
<font face=
"Verdana,Arial,Geneva,Sans Serif" color="#000000" size="1">Bütün bu anlatılanlar da Photoshop'un web'e etkisi <img  src="http://www.aeystudio.com/webtas/images/jaguar.jpg" width="201" height="144" border="0" align="left"> üzerinde duracağımızdan daha önceden bahsetmiştik. Bu nedenle ..... </font>
</td></tr></table></div>
</body>
</html>
şeklinde olacaktır.

Bu sıkışıklığı ortadan kaldırmak için
<img  tagı arasına vspace="8" hspace="8" taglarını eklemeliyiz. vspace= Vertical Space:Düşey boşluğu, hspace= Horizontal Space: Yatay boşluğu belirler. Biz burada her ikisini de 8 olarak verdiğimizden resim ve yazı arasındaki boşluğa ait görüntümüz yan tarafta bulunan resimdeki gibi olacaktır.
İmaja ait HTML tagı ise,
<img  src=
"http://www.aeystudio.com/webtas/images/jaguar.jpg" width="201" height="144" border="0" align="left"
vspace="8" hspace="8" >

şeklinde değişmiştir.

Bazı Etiketler 

Fazla dikkat çekmeyen,  del, ins, sub, sup, big, small, pre gibi bazı HTML kodlarını açıklayalım.
del:
Bu kodlar arasındaki tüm yazıların üstü çizilmiş oluyor. Örneğin, geçersiz olan kelimeler veya cümlelerde kullanılırlar.
<del>
Bu Bölüm
<br>
Geçici bir süre için
<br>
Kapatılmıştır.
</del>

ins:
Bu kod arasındaki tüm yazıların altı çizili hale gelir. Önemli bulduğunuz dikkat çekici mesajlarda kullanabilir.
<ins>
Bu bölümü
<br>
Özellikle inceleyiniz!
</ins>

sub & sup:
sub tagı, alt faktör'ü, sup tagı ise üst faktörü belirler. Genellikle formüllerde kullanılırlar.
H
<sub>2</sub>
SO
<sup>4</sup><br>
a
<sup>10 </sup>- m<sup>2</sup>-m<sup>3</sup>

big & small:
big tagı, içine giren yazılar büyük hale gelir. Başlıklarda kullanılabilir. small tagı ise big'in tam tersi olarak,yazıları küçültür. dip notlarda kullanılabilir.
<font face="Verdana,Arial,Geneva,Sans Serif" size="3"><big>
Ana Sayfamıza
<br>
Hoş Geldiniz.
<br>
</big>
<small>
Bu not
<br>
Hatırlatma içindir.
</small></font>

pre:
Bu kod arasına yazılan yazı HTML kodunda nasıl yazılmışsa o şekilde görüntülenir. Kodda görüldüğü üzere font tagını tanımadığı gibi satırların altına geçerken
<br> tagı yazılmadığı halde bir alt satıra geçiyor.
    
<font face="Verdana,Arial,Geneva,Sans Serif" size="3">
     
<pre>Merhaba,
                               İlginç bir tag!!
                        Ne dersiniz?
</pre>
        </font>


HTML Etiketleri İle Link Oluşturmak

HTML unsurlarının en önemlilerinden birisi olan ve <a></a> tagları arasına yazılarak browser lara hedef gösteren "Bağlantıları (linkleri)" bildiğinizi tahmin ediyoruz.
Bu bölümde, merak edilen bazı bağlantıların nasıl yapıldığını inceleyeğiz.
Öncelikle genel bir tanım yaparsak, internet adresleri, ses ve grafik dosyaları, sıkıştırılmış (zip) dosyalar, e-mail adresleri, aynı sayfa içinden bağlantı veya başka bir sayfanın herhangi bir bölümüne yapılacak bağlantılar, vs. bu bağlantı etiketleri kullanılarak browser lara hedef gösterilip tanıtılır.
İnternet adreslerini, web sayfalarını birbirlerine bağlamak (linklemek) için,
<a href="....."> ....... </a> etiketi kullanılır. Buradaki <a href= etiketi hedef başlangıcıdır, browser'a bir bağlantının olduğunu anlatır hedef gösterilen (link) adres,  "....." (çift tırnak) arasına yazılır ve > işareti ile hedef başlangıcı bitirilir. Daha sonraki ....... kısmına da ziyaretçinin browserında göreceği bir açıklama yazılır. Son olarak da </a> etiketi ile verilen bağlantı (link) sonlandırılır.

Örneklersek; Tıklayın, Web Tasarımına gidin şeklindeki bir bağlantının kodu şöyledir: 
<a href="http://www.aeystudio.com/forums/index.php?act=Tutorials#webdesign">Tıklayın, Web Tasarımına gidin </a>

Aynı şekilde e-mail adresine de link verebiliriz. Örneğin;  Bana e-mail atın şeklindeki bir linkin kodu da:
<a href="mailto:webmaster@aeystudio.com"> Bana e-mail atın </a> şeklindedir.

Şayet bir resim, imaj göstermek istiyorsak, Örneğin; Jaguar'ı görmek için Tıklayın! şeklinde bir linkde hata yapmamak için özellikle imajımız hangi klasörde (dizinde) ise tam adresini yazarak kodu oluşturuyoruz. Şöyleki; 
<a href="http://www.aeystudio.com/tips/photoshop/img/jaguar.jpg"> Jaguar'ı görmek için Tıklayın! </a>

Browserlar, html, htm, asp, text, gif, jpeg, ... gibi uzantılı dosyaları görüntüleyebilirken, zip, doc, mp3, ... uzantılı dosyaları görüntüleyemediğinden bu tür bir dosyaya link verildiğinde, browser bu dosyayı açmak mı yoksa kaydetmek mi istediğimizi soran bir pencere açar. Bu pencerede yapacağımız tercihimize göre işlemi yapar. Genelde download ettirmek amacıyla sıkıştırılmış (zip) bir dosyaya link verelim. Örneğin,  PDF formatlı ve zipli Offline Web Tasarımını indirmek için Tıklayın!  şeklindeki bir linkin kodu şöyledir: <a href="http://www.siteadi.com/download/file.zip">PDF formatlı ve zipli Offline Web Tasarımını indirmek için Tıklayın!</a>

Bir imaja yada web sitelerinin bannerlarına tıklamak yoluyla link vermek için HTML koduna imajın, örneğimizdeki banner'ın tam yolunu yazmalıyız; Örneğin; aeyStudio.com Ana SayfasıaeyStudio.com sitesine link vermek için yan taraftagörünen banner'ın HTML kodu: <a href="http://www.aeystudio.com" target="_blank"><img border="1" src="http://www.aeystudio.com/links/baner1.GIF" alt="aeyStudio.com Ana Sayfası" width="88" height="31"></a>
Bu kod a dikkat ederseniz, önce <a href= ile link hedef belirlendi, target="...." parametresi ile linki açacak olan browser penceresinin ne şekilde açılacağı belirleniyor. target= parametresi özellikleri;
target="_blank"   :Link yeni bir pencerede açılır. (Örneğimizde bu özellik şeçildi.)
target="_self"      :Link aynı pencere içerisinde açılır. 
target="_top"      :Link aynı pencere içerisinde en üstten itibaren açılır. 
target="_parent"  :Link, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. 
<img border="..." imajda link olduğunu belirten çerçeve kalınlığını belirlenir. Genelde 0 verilir, ancak örneğimizde 1 olarak verildi. src="..." browser a imajı bulacağı adresi, tam yolu gösterilir (image search). alt="..." mause, imaj üzerinde bir süre kalınca görünecek olan açıklama yazısı yazılır. width="..." imajın pixel cinsinden genişliğini belirtilir. height="..." imajın pixel cinsinden yüksekliğini belirtilir. Nihayet </a> etiketi de link'i sonlandırıyor.

Sayfa içi linkleri (dahili linkler) hazırlamak için <a href="#.....">.....</a> ve <a name"#.....>.....</a> komutları kullanılır. Örneğin, sayfanın üst tarafında sayfanın konularını belirten sayfa index'i varsa ve bu konulara kısa yoldan ulaşmak istenirse yukarıdaki komutlar kullanılır.
Örnek için HTML Etiketleri sayfasına bakabilirsiniz. Bu sayfada üst taraftaki konu başlıklarına tıklayarak, ilgili konulara sayfa içinde ulaşabilirsiniz.

Örneklersek, sayfa içinde ilgili konunun bulunduğu kısma gitmek için konu başlığının HTML kodu başına
, <a href="#a konusu">A Konusu</a> komutu yazılır. Açılacak olan A konusu başlığının bulunduğu HTML kodunun başına da <a name"#a konusu>A Konusu</a> komutu verilir.

Örneğimiz olan, HTML Etiketleri sayfasındaki "Ortak Nitelikler" isimli konu başlığını ve tıklayınca gidilecek yeri incelersek; öncelikle "Ortak Nitelikler" isimli konu başlığının HTML kodu: <A HREF="#ortak">Ortak Nitelikler</a> dir. Bu "Ortak Nitelikler" linkine tıklayınca sayfa içinde gidilecek yer olan "Ortak Nitelikler" konu başlığının HTML kodu da: <a name="#ortak">Ortak Nitelikler</a> dir. 

Bu anlatılanlara göre işin özü; linkin gideceği hedef adres, <a href="#.....">.....</a> komutu ile, bu komuta göre varılacak adres de <a name"#.....>.....</a> komutu ile gösterilir.

Aynı mantıkla bulunduğumuz bir sayfadan başka bir sayfanın ilgili yerine de link verebiliriz. Örneğin, bu sayfadan HTML Etiketleri sayfasındaki "Ortak Nitelikler" kısmına gitmek için şu şekilde bir link oluşturabiliriz: HTML Etiketleri sayfasındaki "Ortak Nitelikler"e gitmek için Tıklayın!
Bu linkin HTML kodu:
<a href="http://www.aeystudio.com/webtas/tag.html#ortak">HTML Etiketleri sayfasındaki "Ortak Nitelikler"e gitmek için Tıklayın!</a> şeklindedir. Böyle bir link'e tıklama sonucu, ilgili konu browser penceresinde en üst tarafta yer alır.

Aynı şekilde bu sayfadan HTML Etiketleri sayfasındaki "Etiketler" kısmına gitmek için şu şekilde bir link oluşturabiliriz: HTML Etiketleri sayfasındaki "Etiketler"e gitmek için Tıklayın!
Bu linkin HTML kodu:
<a href="http://www.aeystudio.com/webtas/tag.html#etiket">HTML Etiketleri sayfasındaki "Etiketler"e gitmek için Tıklayın!</a> şeklinde olur.

Bir örnek daha verirsek, aynı şekilde bu sayfadan HTML Etiketleri sayfasındaki "Title" kısmına gitmek için şu şekilde bir link oluşturabiliriz: HTML Etiketleri sayfasındaki Title etiketine gitmek için Tıklayın! Bu linkin HTML kodu: <a href="http://www.aeystudio.com/webtas/tag.html#title">HTML Etiketleri sayfasındaki Title etiketine gitmek için Tıklayın!</a> şeklindedir.
Dikkat ederseniz, burada normal link adresini yazıp sonuna da gidilecek sayfadaki konu başlığının  [
<a name"#.....> etiketi ile verilen] adını,  başına # işaretini koyarak, #.....  şeklinde belirttik.

Burada bir hatırlatma yapalım, <a href="  ve <a name="  komutlarındaki #..... kısmına istediğiniz ismi veya rakamı verebilirsiniz. Ancak birden fazla link varsa vereceğiniz isimlerin birbirlerine karışmamasına dikkat etmelisiniz.
Bulunduğunuz sayfanın başına gitmeyi sağlamak için de
<a href="#">Sayfa Başı</a> şeklinde link oluşturulur. 
Örnek: Sayfa Başı

Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=74
Web Sitesi: http://www.aeyStudio.com