Hızlı, pratik, kullanıcı dostu olması gibi nedenlerle son zamanlarda çoğu web projesinde gördüğümüz Font Awesome hakkında bilgi vermek istiyorum. Font Awesome nedir, ne değildir, ne işe yarar, nasıl kullanılır gibi soruların yanıtlarını bu yazıda vermeye çalışacağım.
Font Awesome Nedir?
Font Awesome, vektörel ikonların font olarak bir araya geldiği, @font-face özelliğiyle çalıştığı için kullanımı oldukça kolay olan açık kaynaklı bir font/ikon kütüphanesidir.
Kısacası font awesome herkesin kullanımına açık olan bir font yani yazı tipi topluluğudur. Fakat bildiğimiz fontlarda harfler ve rakamlar varken font awesome’da ikonlar vardır.
Font Awesome Kullanmanın Avantajları Nelerdir?
Yukarıdaki tanımda da okuduğunuz üzere font awesome’ı kullanmaktaki amaç eski tip .jpg, .png, .gif grafik ikonlarının yerine daha hızlı, modern ve basit karakter ikonları göstermektir. Grafik ikonlar yerine font awesome ikonları kullanmanın avantajları kısaca şunlardır:
Blogger’da Font Awesome Nasıl Kullanılır?
Font awesome ikonlarını Blogger’da kullanmanız için yapmanız gereken ilk şey font awesome dosyasını tanıtmak tır. Bunun için Şablon > HTML’yi Düzenle diyerek <head> kodunun altına şu kodu eklemelisiniz:
Şimdi font awesome'ın ikon kütüphanesini ziyaret ederek kullanmak istediğimiz ikonun üzerine tıklayalım ve o ikona ait kodu alalım. Örnek olarak ben futbol topu ikonunu seçtim ve bu ikonu blogda göstermek için yapmam gereken tek şey o ikona ait HTML kodunu istediğim yere eklemek. Futbol topu ikonunun kodu şu:
Bunu kodu eklediğimizde elde ettiğimiz sonuç ise şu:
Futbol topu örneğinden devam edelim. Futbol topu ikonunu daha farklı boyutlarda kullanmak istediğimizi düşünelim. Bunun için mevcut koda çok küçük bir ekleme yapacağız. Farklı ikon boyutları için odlar şu şekilde:
Ortaya çıkan sonuç ise şu şekilde:
Örneklerle devam ediyoruz. Şimdi de yine font-awesome'ın nimetlerinden faydalanarak sosyal ikonlardan bir yatay menü yapalım. Bunun için kullanacağımız kod şu şekilde olmalı:
Ortaya çıkan sonuç ise şu şekilde:
İkonlarının renginin yeşile döndüğünü fark ettiniz sanırım. Bunun nedeni sosdyal takip hesapları için ikonlara link vermem ve Blog Hocam'da tüm linklerin renginin yeşil olarak tanımlanmış olması. Sizin blogunuzda linkler kırmızı ise ikonlar da otomatik olarak kırmızıya dönüşecektir.
Fakat font awesome ikonlarını CSS ile istediğiniz gibi kontrol edebilirsiniz. Örneğin her ikonu farklı renk yapabilirsiniz. Bunu da bir örnekle gösterelim isterseniz. Bunun için her bir class için stil kodu tanımlamamız yeterli olacaktır:
Ortaya çıkan sonuç ise şu şekilde:
Aynı örnek üzerinden devam edelim. Font awesome yardımıyla gadget olarak ekleyebileceğimiz bir sosyal takip eklentisi yapalım. Bunun için yukarıdaki örnekte kullandığımız ikonları alt alta sıralayalım ve yanlarına da takip seçeneklerini yazalım. Bunun için kodu şu şekilde düzenliyoruz:
Ortaya çıkan sonuç ise şu şekilde oluyor:
Kodlarda değişiklikler yaparak ve Font Awesome resmi sitesindeki dökümanlar ile örneklerden faydalanarak bu ikonlardan çok güzel çalışmalar yapabilirsiniz.
Font Awesome Nedir?
Font Awesome, vektörel ikonların font olarak bir araya geldiği, @font-face özelliğiyle çalıştığı için kullanımı oldukça kolay olan açık kaynaklı bir font/ikon kütüphanesidir.
Kısacası font awesome herkesin kullanımına açık olan bir font yani yazı tipi topluluğudur. Fakat bildiğimiz fontlarda harfler ve rakamlar varken font awesome’da ikonlar vardır.
Font Awesome Kullanmanın Avantajları Nelerdir?
Yukarıdaki tanımda da okuduğunuz üzere font awesome’ı kullanmaktaki amaç eski tip .jpg, .png, .gif grafik ikonlarının yerine daha hızlı, modern ve basit karakter ikonları göstermektir. Grafik ikonlar yerine font awesome ikonları kullanmanın avantajları kısaca şunlardır:
- Blogda kullanacağınız ikonlar grafik olmadığı için sayfanın açılması daha hızlı olacaktır.
- Font awesome ikonları hiçbir optimizasyona gerek duymadan mobil cihazlara uyacaktır.
- Çok geniş bir ikon paketi mevcut olduğundan sadece basit bir HTML kodu kullanarak yüzlerce ikondan ücretsiz faydalanabileceksiniz.
- İkonlar birbiriyle uyumlu olduğundan ve hepsi aynı familyadan geldiğinden görsel açıdan şık olacaktır.
Blogger’da Font Awesome Nasıl Kullanılır?
Font awesome ikonlarını Blogger’da kullanmanız için yapmanız gereken ilk şey font awesome dosyasını tanıtmak tır. Bunun için Şablon > HTML’yi Düzenle diyerek <head> kodunun altına şu kodu eklemelisiniz:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Şimdi font awesome'ın ikon kütüphanesini ziyaret ederek kullanmak istediğimiz ikonun üzerine tıklayalım ve o ikona ait kodu alalım. Örnek olarak ben futbol topu ikonunu seçtim ve bu ikonu blogda göstermek için yapmam gereken tek şey o ikona ait HTML kodunu istediğim yere eklemek. Futbol topu ikonunun kodu şu:
<i class="fa fa-futbol-o"></i>
Bunu kodu eklediğimizde elde ettiğimiz sonuç ise şu:
Futbol topu örneğinden devam edelim. Futbol topu ikonunu daha farklı boyutlarda kullanmak istediğimizi düşünelim. Bunun için mevcut koda çok küçük bir ekleme yapacağız. Farklı ikon boyutları için odlar şu şekilde:
<i class="fa fa-futbol-o fa-lg"></i>
<i class="fafa-futbol-o fa-2x"></i>
<i class="fa fa-futbol-o fa-3x"></i>
<i class="fa fa-futbol-o fa-4x"></i>
<i class="fa fa-futbol-o fa-5x"></i>
Ortaya çıkan sonuç ise şu şekilde:
Örneklerle devam ediyoruz. Şimdi de yine font-awesome'ın nimetlerinden faydalanarak sosyal ikonlardan bir yatay menü yapalım. Bunun için kullanacağımız kod şu şekilde olmalı:
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a>
<a href="#"><i class="fa fa-rss fa-lg"></i></a>
Ortaya çıkan sonuç ise şu şekilde:
İkonlarının renginin yeşile döndüğünü fark ettiniz sanırım. Bunun nedeni sosdyal takip hesapları için ikonlara link vermem ve Blog Hocam'da tüm linklerin renginin yeşil olarak tanımlanmış olması. Sizin blogunuzda linkler kırmızı ise ikonlar da otomatik olarak kırmızıya dönüşecektir.
Fakat font awesome ikonlarını CSS ile istediğiniz gibi kontrol edebilirsiniz. Örneğin her ikonu farklı renk yapabilirsiniz. Bunu da bir örnekle gösterelim isterseniz. Bunun için her bir class için stil kodu tanımlamamız yeterli olacaktır:
<a href="#"><i class="fa fa-facebook fa-lg"></i></a><style>.fa-facebook{color:#3b5998}</style>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a><style>.fa-twitter{color:#00aced}</style>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a><style>.fa-instagram{color:#125688}</style>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a><style>.fa-google-plus{color:#dd4b39}</style>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a><style>.fa-linkedin{color:#007bb5}</style>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a><style>.fa-pinterest{color:#cb2027}</style>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a><style>.fa-youtube{color:#bb0000}</style>
<a href="#"><i class="fa fa-rss fa-lg"></i></a><style>.fa-rss{color:#ff6600}</style>
Ortaya çıkan sonuç ise şu şekilde:
Aynı örnek üzerinden devam edelim. Font awesome yardımıyla gadget olarak ekleyebileceğimiz bir sosyal takip eklentisi yapalım. Bunun için yukarıdaki örnekte kullandığımız ikonları alt alta sıralayalım ve yanlarına da takip seçeneklerini yazalım. Bunun için kodu şu şekilde düzenliyoruz:
<ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-facebook fa-lg"></i>Facebook</li></a><style>.fa-facebook{color:#3b5998}</style>
<li><a href="#"><i class="fa-li fa fa-twitter fa-lg"></i>Twitter</li></a><style>.fa-twitter{color:#00aced}</style>
<li><a href="#"><i class="fa-li fa fa-instagram fa-lg"></i>Instagram</li></a><style>.fa-instagram{color:#125688}</style>
<li><a href="#"><i class="fa-li fa fa-google-plus fa-lg"></i>Google+</li></a><style>.fa-google-plus{color:#dd4b39}</style>
<li><a href="#"><i class="fa-li fa fa-linkedin fa-lg"></i>LinkedIn</li></a><style>.fa-linkedin{color:#007bb5}</style>
<li><a href="#"><i class="fa-li fa fa-pinterest fa-lg"></i>Pinterest</li></a><style>.fa-pinterest{color:#cb2027}</style>
<li><a href="#"><i class="fa-li fa fa-youtube fa-lg"></i>YouTube</li></a><style>.fa-youtube{color:#bb0000}</style>
<li><a href="#"><i class="fa-li fa fa-rss fa-lg"></i>RSS</li></a><style>.fa-rss{color:#ff6600}</style>
</ul>
Ortaya çıkan sonuç ise şu şekilde oluyor:
Kodlarda değişiklikler yaparak ve Font Awesome resmi sitesindeki dökümanlar ile örneklerden faydalanarak bu ikonlardan çok güzel çalışmalar yapabilirsiniz.
Anahtar kelime yoğunluğu SEO’da çok önemli kriterlerden biri. Özellikle bizler gibi web içeriği üreten blog yazarları anahtar kelime yoğunluğu konusunda daha hassas olmalı. Bu yazıda anahtar kelime yoğunluğunun ne olduğundan, bloggerlar ve SEO için öneminden, anahtar kelime yoğunluğunun nasıl hesaplanacağından ve kaç olması gerektiğinden bahsedeceğim.
Anahtar Kelime Yoğunluğu Nedir?
Anahtar kelime ve yoğunluk kavramlarından ayrı ayrı bahsederek işe başlayalım. Anahtar kelime arama motorlarında sorgulanan ve bizlerin yazılarımızda kullandığı kelime veya kelime gruplarıdır.
Örneğin konumuz “güzel bloglar” olsun ve güzel bloglarla ilgili bir blog yazısı yazdığımızı düşünelim. Burada amaç “güzel bloglar” şeklinde yapılan aramalarda üst sıralarda çıkmaktır. Yani anahtar kelimemiz “güzel bloglar”dır.
Anahtar kelime yoğunluğu ise kullandığımız anahtar kelimenin yazının bütününde kullanılan kelimelere oranıdır.
Anahtar Kelime Yoğunluğu Nasıl Hesaplanır?
Anahtar kelime yoğunluğunun tanımında da okuduğunuz üzere anahtar kelime yoğunluğunu hesaplamak için yazıda kullandığımız anahtar kelimenin tekrar sayısını yazıdaki tüm kelimelerin sayısına bölüp 100 ile çarpmamız gerekmektedir.
Örnek verecek olursak toplam 1000 kelimelik bir yazı yazdığımız düşünelim. Hedef anahtar kelimemiz olan “güzel bloglar” anahtar kelimesinin ise yazıda 20 kez geçtiğini düşünelim. Bu durumda “güzel bloglar” için anahtar kelime yoğunluğu şu şekildedir:
(20/1000)x100=2 Yani anahtar kelime yoğunluğu %2’dir.
İdeal Anahtar Kelime Yoğunluğu Ne Olmalı?
İdeal anahtar kelime yoğunluğu içeriğin toplam kelime sayısı, anahtar kelimenin rekabet oranı gibi faktörlere göre değişkenlik gösterse de genellikle %1 ile %5 arasında olması fikri ağır basıyor.
Google içerikte olağan dışı bir hareket algıladığında o içeriği SPAM içerik olarak nitelendirebiliyor. Bu nedenle aşırı anahtar kelime tekrarı içeriğinizi riske atabilir. Bu nedenle %5-%6 anahtar kelime yoğunluğunu geçmeniz önerilmez.
Anahtar Kelime Yoğunluğunu Hesaplayabileceğiniz Araçlar
Tek tek kelimeleri saymak, özellikle bizim gibi binlerce kelimelik içerikler üreten blog yazarları için imkansız elbette. Bunun için ücretsiz kullanabileceğiniz bazı online araçları listelemek istiyorum.
- Seo Book Keyword Density Analyzer
- SEO Centro Keyword Density Checker
- Live Keyword Analysis
- Seo Chat Page Keyword Density Analysis
Bu araçlar sayesinde hem webde yayınlanmış sayfaların, hem de yayınlamaya hazır içeriklerinizin anahtar kelime kullanım oranlarını görebilir, bun göre düzenlemeler yapabilirsiniz.
Anahtar Kelime Yoğunluğu Nedir?
Anahtar kelime ve yoğunluk kavramlarından ayrı ayrı bahsederek işe başlayalım. Anahtar kelime arama motorlarında sorgulanan ve bizlerin yazılarımızda kullandığı kelime veya kelime gruplarıdır.
Örneğin konumuz “güzel bloglar” olsun ve güzel bloglarla ilgili bir blog yazısı yazdığımızı düşünelim. Burada amaç “güzel bloglar” şeklinde yapılan aramalarda üst sıralarda çıkmaktır. Yani anahtar kelimemiz “güzel bloglar”dır.
Anahtar kelime yoğunluğu ise kullandığımız anahtar kelimenin yazının bütününde kullanılan kelimelere oranıdır.
Anahtar Kelime Yoğunluğu Nasıl Hesaplanır?
Anahtar kelime yoğunluğunun tanımında da okuduğunuz üzere anahtar kelime yoğunluğunu hesaplamak için yazıda kullandığımız anahtar kelimenin tekrar sayısını yazıdaki tüm kelimelerin sayısına bölüp 100 ile çarpmamız gerekmektedir.
Örnek verecek olursak toplam 1000 kelimelik bir yazı yazdığımız düşünelim. Hedef anahtar kelimemiz olan “güzel bloglar” anahtar kelimesinin ise yazıda 20 kez geçtiğini düşünelim. Bu durumda “güzel bloglar” için anahtar kelime yoğunluğu şu şekildedir:
(20/1000)x100=2 Yani anahtar kelime yoğunluğu %2’dir.
İdeal Anahtar Kelime Yoğunluğu Ne Olmalı?
İdeal anahtar kelime yoğunluğu içeriğin toplam kelime sayısı, anahtar kelimenin rekabet oranı gibi faktörlere göre değişkenlik gösterse de genellikle %1 ile %5 arasında olması fikri ağır basıyor.
Google içerikte olağan dışı bir hareket algıladığında o içeriği SPAM içerik olarak nitelendirebiliyor. Bu nedenle aşırı anahtar kelime tekrarı içeriğinizi riske atabilir. Bu nedenle %5-%6 anahtar kelime yoğunluğunu geçmeniz önerilmez.
Anahtar Kelime Yoğunluğunu Hesaplayabileceğiniz Araçlar
Tek tek kelimeleri saymak, özellikle bizim gibi binlerce kelimelik içerikler üreten blog yazarları için imkansız elbette. Bunun için ücretsiz kullanabileceğiniz bazı online araçları listelemek istiyorum.
- Seo Book Keyword Density Analyzer
- SEO Centro Keyword Density Checker
- Live Keyword Analysis
- Seo Chat Page Keyword Density Analysis
Bu araçlar sayesinde hem webde yayınlanmış sayfaların, hem de yayınlamaya hazır içeriklerinizin anahtar kelime kullanım oranlarını görebilir, bun göre düzenlemeler yapabilirsiniz.