Html5 ile neler yapılabileceğini gösteren harika bir websitesi. İnternet hızınıza göre sayfanın açılması biraz vakit alabilir. O yüzden sayfayı direk kapatmadan sonuna kadar bekleyin. Site hakkında bilgilendirme yapmıyorum sadece izleyin ve görün…
Html 5 ile hazırlanmış sitelere örnekler 1: http://www.discobreaker.com/
Frame tagı ile ne yapabiliriz?
Frame tagı sayesinde sayfamız içerisinde başka bir sayfa çalıştırabiliriz.
Bu tagı kullanmak siteme katkı sağlar mı?
Kesinlikle HAYIR
Google ve diğer arama motorları bu davranışı kesinlikle etik bulmazlar. Hiç bir emek sarfetmeden içerik elde etme yoluna gitmektir bu! Frame tagını kullanmak bu saydığımız neden yüzünden kullanılmamalıdır.Güncel ve özgün içerik giren kullanıcıların başını okşayan onları evladı gibi seven arama motorları, frame tagları ile beleşe getirilen içeriklerle dolu siteleri hiç bir şekilde tasvip etmiyor evladlıktan reddedebiliyorlar.
Yinede kullansak işe yarar mı?
Frame tag ‘ını websitemizde kullanmamalıyız. Seo açısından çok ama çok zararlı olacak bu davranış sitemiz içerisinde ciddi hit kayıplarına neden olabilir.
Olsun yinede nasıl kullanılır öğrenelim!
Frame aşağıdaki şekilde kullanılır.
<iframe src=”http://htmlarsiv.com” width=”200″ height=”150″></iframe>
Yukarıdaki kodları sitemizde eklediğimizde sitemiz içerisinde 200 x 150 büyüklüğünde bir çerçeve içerisinde htmlarsiv.com sitesi görüntülenecektir. Genelde haber sitelerinin iframe ‘leri sitemizde çok sık kullanılmaktadır. Bunun faydadan çok zarar getireceğini asla unutmamalıyız. Ayrıca Frame kodu siteme ekleyeyim arama motoru farketmez tarzı bir düşünceye kesinlikle dalmayın arama motorları bu tür davranışları çok ama çok basit şekilde farkedebiliyorlar…
Target kodu, linke tıklanılması halinde sayfanın nasıl açılması gerektiğini belirten koddur. Örnekle açıklayacak olursak, bağlantı kodumuza target=”_blank” kodunu eklediğimiz de linkin yeni sayfada açılması gerektiğini belirtmiş oluruz.
<a href=”http://htmlarsiv.com” title=”htmlarsiv” target=”_blank”> htmlarsiv</a>
Yukarıdaki kullanım şekli güncel web teknolojileri tarafından evlatlıktan reddedilmiştir. Bunun yerine yeni pencerelerimizi Rel=”external” ile açtırmak seo açısından çok büyük önem taşır.
Seo nedir ne işe yarar diyorsanız önce bir aşağıdaki sayfayı ziyaret edin.
http://www.htmlarsiv.com/tag/seo-ve-html5
Daha öncede bahsettiğimiz gibi sitelerimizi kodlarken son teknolojilere değer vermemiz gerekmektedir. Ne demiştik arama motorları eski teknolojileri sevmez yeni her zaman iyidir. Bu yüzden ilk örneğimizdeki demode kodlama tekniği yerine yeni ve kabul gören rel=”external” ile yeni sayfalarımızı açtırmaya özen göstermemiz gerekiyor.
Target kodu html5 ‘in gelmesi ile birlikte w3c ‘nin standartları ile uyumunu yitirmiştir. İşte bu yüzden w3c ‘nin belirlediği standartlara sadakatimizi gösterip rel=”external” ile yeni sayfalarımızı açmak sitemizi yeni teknolojiyle uyumlu olarak gösterme açısından büyük önem taşımaktadır.
http://www.w3.org ziyaret edebilirsiniz.
<a href=”http://htmlarsiv.com” rel=”external”>yeni bir sayfa</a>
Rel kodu herhangi bir linki yeni sayfada açtırma görevi görmez bu kodu direk sitemize alıp yapıştırdığımızda çalışmayacağını göreceğiz.
Rel kodunun tarayıcıya anlatmak istediği şey “bu link bir harici bir link”. Tabi bunu java kodları ile desteklememiz gerekiyor.Bunu nasıl yapabileceğimizi aşağıdaki sitelerden öğrenebilirsiniz.
http://www.eburhan.com/web-standartlarina-uygun-yeni-pencere-actirmak/
Ayrıca target ‘i neden kullanmıyoruz?
http://www.seohocasi.com/target-yerine-external-neden-gereklidir-nasil-saglanabilir/
Kaynaklar : wikipedia
seohocasi
Eburhan
Bazı sayfalarınızın arama motorları tarafından indexlenmesini istemiyor olabilirsiniz.Örneğin hata sayfası , yada size özel bir sayfa, yada bir websayfanızı yeni tasarlıyorsunuz ve bu şekilde google sayfamı indexlemesin diyorsanız aşağıdaki meta kodları sayfanızın indexlenmesini önleyecektir.
<meta name=”robots” content=”noindex, follow” />
Veya
<meta name=”robots” content=”noindex, nofollow” />
Yukardaki kodları <head> </head> taglarınızın arasına yazmanız durumunda arama motorları bu kodu eklediğiniz sayfayı indexlemeyecektir.
htmlarsiv.com
<img src=”http://siteadresi.com/r0000240240220482.jpg”> / YANLIŞ
<img src=”http://siteadresi.com/konubasligi.jpeg” alt=”başlıkla alakalı kelime” /> DOĞRU
Hazırladığımız web sayfalarındaki en önemli unsurlardan birtanesi kuşkusuz ki resimlerdir. Sitemiz içerisinde html5 ile nasıl resim ekleyebileceğimiz konusunda anlatım yapmıştık.
Bu konuda sıkıntısı olan arkadaşlarım aşağıdaki bağlantıyı ziyaret etsinler.
http://www.htmlarsiv.com/tag/html-resim-ekleme-tagi
Şimdi bu eklediğimiz resimlerin arama motorları tarafından daha çabuk tanınması ve daha üst sıralarda çıkması için bir kaç ipucu vereceğiz.
Seo nedir ne işe yarar daha bundan bile haberim yok diyorsanız lütfen birde aşağıdaki bağlantıyı ziyaret edin.
http://www.htmlarsiv.com/tag/seo-ve-html5
* Resimlerimizi kendi sunucumuzda barındırmamız başka sitelere hit kazandırmamak açısından çok önemlidir. Yazınıza ekleyeceğiniz resmi başka yerde gördüyseniz bile bilgisayarınıza indirip sunucunuza atmanızda fayda var.
* Resim dosyalarınızın ismi ( 945r84.jpeg ) gibi isimler yerine ( Konubasligi.jpeg) , ( konubasligiilealakalibirkelime.jpeg) olursa google aramalarında bu resmi arayan kişilerin karşısına çıkmanız daha olasıdır.
* Resim dosyamızın boyutu ! ( Yüksek boyutlardaki resimler hem sunucumuzu yorar hemde ziyaretçilere geç gösterilir. Bu yüzden ziyaretçi kayıpları yaşamanız doğaldır. Sitemizdeki resimlerin boyutlarına çok dikkat etmeliyiz.Ayrıca gereksiz resimler sayfamızda bir yük oluşturacağı için sayfanın açılış hızını etkileyecektir.Ve başdada söylediğim gibi o pek kıymetli ziyaretçilerimiz sitemize uğramaz olacaklardır.
* Alt ( Açıklama ) Bu html5 ile önem kazanan ve w3c’nin en çok dikkat ettiği özelliklerden birtanesidir. Her resmin bir açıklaması olmasını istiyor w3c bu gereklilik arama motorları açısından da çok önemli. Şimdi örnek bir bağlantılı resim kodu yazalım arkadaşlar. Hem seo standartlarına uygun hemde w3c ‘nin onayladığı bir resim kodu yazıyoruz.
<a href=”http://siteadresi.com/95839538.html”><img src=”http://siteadresi.com/90348343843908430.jpeg”> ( YANLIŞ )
Yeri gelmişken bir notkadan daha bahsedeyim seo açısından verilen bağlantılardaki linklerin önemi çok önemlidir. Yukardaki yanlış bağlantıda verilen bağlantıdaki html uzantısına baktığımızda çok saçma bir uzantı karşımıza çıkıyor. id ( değer ) uzantıları yerine kelime odaklı uzantılar seo açısından daha önemlidir. Onu şu şekilde düzenlememizde fayda var ( verilenbaglantidakikonubasligi.html ) resim uzantısıda oldukça sıkıntılı gözüküyor 
Şimdi bu kodları düzgün bir şekilde hem seo hemde html5 standartlarına göre düzenleyelim.
< a href=”http://htmlarsiv.com/htmlarsiv.html” title=”html arşiv”><img src=”http://www.htmlarsiv.com/wp-content/themes/seohocasiv2/grafik/default.png” alt=”html arsiv default resmi” /></a> ( DOĞRU )
Yukarıda verdiğim bağlantıda title ( Başlık girdim ) Bu arama motorlarına verdiğim bağlantı hakkında bilgi veriyor. Yani benim bağlantı verdiğim sayfa “html arşiv” dir diyorum. Daha sonra resim ‘e girdiğim alt ( Açıklama ) ile bu bir html arşiv default resmidir diyorum.
Arama motorları sayfamı ziyaret ettiği zaman verdiğim bağlantının html arşiv ‘e gittiğini ve bu bağlantıdaki resmin html ile alakalı olduğunu anlayacaktır.Herhangi bir açıklama yada başlık girilmeyen bağlantı ve resimleri arama motorları arka sayfalara atarlar.Çünkü kullanıcının fayda görebileceği bir konu olduğunu düşünmezler.Biz resimlerimize açıklama girerek bağlantılarımıza başlık girerek hem arama motorları ile aramızı iyi tutuyor hemde w3c standartlarına uygun kodlama yaparak onların gönlünü bir kez daha fethediyoruz.
Kaynak :
Uzmanından seo ( http://seouzmani.com )
w3c html img tag ( http://www.w3schools.com/tags/tag_IMG.asp )
Mustafa Aydemir Seo Kitabı ( http://www.mustafaaydemir.org/seo-kitabi )
Konu hakkında aklınıza takılan kısımlar var ise yorum yaparak katılım sergileyebilirsiniz.
Eski html sürümlerinde sayfamıza bir video eklemek istediğimizde plugin kullanmak zorundaydık.Html5 bu olaya bir son verdi ve artık hiç bir zorluk yaşamadan html5 video tag ‘ı sayesinde sayfamıza video ekleyebiliriz.
<video src=”video_adresi.ogg” width=”300″ height=”250″ controls=”controls”> Tarayıcınız desteklemediği için buradaki ses yada video dosyasını açamıyorsunuz</video>
Bu tag’ı destekleyen tarayıcılar.
Firefox , Chrome, Opera , Safari , son sürümler İnternet explorer 9
Özellikler
Autoplay = Videomuzun hazır olduğu an çalışıp çalışmayacağını belirler.
Controls 0 Medya kontrollerinin gösterilip gösterilmeyeceğini belirler.
Height = video playerimizin yüksekliğini belirler. (pixel)
Width = Video playerimizin genişliğini belirler. (pixel)
Loop = Videomuz sona erdiği zaman tekrar çalışıp çalışmayacağını belirler.
src= Çalışacak dosyanın yolunu belirlemekte kullanılır. ( video.mp4)
Html5 ile gelen bazı yeniliklerden bahsediyoruz sık sık.Bu site içerisinde de bir çok ipucu “arama motoru optimizasyonu ( seo ) ” içerikli makaleler bulabileceksiniz. Aslında html5 ‘i iyi kavrayan ve css konusunda uzmanlaşan kişilerin arama motorlarından hit almaları o kadar da zor olmaz. Arama motorları işini iyi yapan webmasterları severler. Daha öncede bahsettiğimiz gibi html5 standartlarını belirleyen konsorsiyuma yani w3c ‘ye sitemizi taratıp onay olmamız çok büyük önem taşıyor.Arama motorlarının en çok dikkat ettiği hususlardan birtanesidir bu. Seo açısından iyi yerlere gelmek isteyen arkadaşların öncelikle kurdukları sitelerdeki hataları bir bir ayırt edip düzeltmeleri gerekir. Kod çöplüğüne dönmüş , demode (Eski teknolojiler ile) kodlanılmış websiteleri seo açısından kötü olduğu gibi tarayıcılar (internet explorer , mozilla firefox , opera , chrome ) tarafından geç çözümlenir ve kullanıcıyı siteden bir an önce uzaklaştırır.
Seo konusunda bilgilenmek isteyen arkadaşlar için aşağıdaki siteleri ziyaret etmelerini öneririm.
ingilizce’niz varsa seomoz isimli site çok işinize yarayacaktır.
Kullanımı:
<div style=”color:#00ff11″>
<h1>Burası başlık</h1>
<p>Bu alanımız bir metin içeriyor.</p>
</div>
<adress>
Copyright (c) htmlarsiv.com <br />
<a href=”mailto:iletisim@htmlarsiv.com”>email</a> <br />
Adres: New york caddesi , los angels sokak , taksim apartmanı <br />
Telefon : 0900 0000000xx
</adress>
Adress etiketinin html5 sayfası içerisinde kullanımını gördük arkadaşlar.
htmlarsiv.com
Kullanımı:
<mark>vurgulanmak istenilen kelime</mark> şeklinde kullanılır.
Mark etiketinin kullanımını daha iyi anlamanız için aşağıdaki örnek sayfasını incelemenizde fayda görüyorum.
http://htmlarsiv.com/htmlkodarsiv/html5marketiketi.html
