Renk Paletim

Web/Grafik Tasarım Çalışmalarımda Kullandığım Renkler

#e9e8ef

#f5dfd5

#ed393a

#4251b6

#6ed6df

#f2ce20

#56f8bc

#42b1ff

#fce55b

#ff9f1d

#e71d35

#30c4b6

#011627

#0eadf1

#fa3263

#f8ad30

#28cda3

#135b4d

#fcd76c

#686459

#975592

#a1834d

#9f353f

#cbbb80

#cb3c74

#6d5b97

#e18bb8

#c59169

#c59169

#d2b356

#b66ba4

#f37a29

#d74061

#fdb33a

#6d5b97

#1180ae

#d9ba2e

#6a6d52

#b32f3d

#ca457e

#83b14f

#81313a

#45223a

#ef5229

#93366b

Saygılarımla...
Turgut Arslan

Bu yazıda SEO uyumlu Sayfa Nasıl Hazırlanır? Onu Araştırdım ve YOAST eklentisini baz alarak bir örnek sayfa oluşturdum. Sayfada yazı olarak lorem ipsum hurufat kelimelerini kullandım.

Örnek Sayfa

SEO UYUMLU SAYFA ÖRNEĞİ

Lorem ipsum dolor sit amet, seo uyumlu sayfa consectetur adipiscing elit. Donec volutpat blandit risus ornare tempor.

 SEO ile ilgili  tanım için Mauris a ipsum venenatis, commodo enim a, dignissim metus. Proin eget molestie odio. Maecenas porttitor urna et elit eleifend euismod. Suspendisse facilisis sem vel lorem tristique auctor. Sed sed ultricies elit. Pellentesque euismod placerat lobortis. Aliquam sollicitudin tincidunt dui, vitae faucibus orci mollis sit amet. Nunc vitae tortor sodales, fermentum tortor eu, luctus risus. Sed eget ligula ac tortor mollis ultricies. Aenean augue ipsum, ornare sit amet tristique et, dapibus vitae lectus seo uyumlu sayfa. Quisque gravida quam at turpis consectetur, et pellentesque nibh gravida. Integer lacinia fringilla turpis non iaculis.

SEO uyumlu sayfa yapmanın faydası nedir?

Donec hendrerit dui vitae nisi sagittis, imperdiet porta odio pulvinar. Nam tempor velit metus. Maecenas tempus ipsum lectus, vel blandit urna imperdiet sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas seo uyumlu sayfa. In placerat molestie laoreet. Aenean felis felis, accumsan id pulvinar ut, varius at tellus. Sed eu tortor quis dui imperdiet gravida porta nec erat. Morbi tincidunt dui in ultricies fringilla. Mauris porta sapien ac justo tempus blandit. Vivamus porta eros a elit dignissim laoreet. seo uyumlu sayfa Nam ornare, ipsum cursus faucibus posuere, diam dolor vulputate nunc, sed volutpat massa leo sed dolor. Aliquam finibus dignissim libero a aliquet. Nullam molestie tellus et orci gravida, ut ullamcorper tortor rhoncus.

Sayfam Neden SEO Uyumlu Olmalı?

Because sagittis diam eget odio consequat ultrices. Vestibulum a leo aliquam neque cursus aliquam seo uyumlu sayfa örneği quis non risus. Praesent ultrices pretium nisl, in finibus magna malesuada in. Aliquam vulputate neque in mauris euismod, nec euismod ipsum tempus. Nunc lobortis rutrum nulla, nec mollis leo porttitor et. Proin aliquam auctor enim id feugiat. Duis laoreet, augue vitae feugiat pretium, orci purus ullamcorper diam, at semper magna ligula ut libero. Nam ligula felis, commodo eget ligula nec, dictum fringilla tortor seo uyumlu sayfa. Nam a convallis tortor, ac rutrum ligula. Nullam id rhoncus arcu. In sit amet leo dui.

Nasıl daha iyi seo uyumlu sayfa hazırlarım?

Sonuç In pulvinar sem risus, feugiat porta metus auctor at. Nullam vehicula mauris eget laoreet luctus. Duis nec massa ornare, imperdiet augue sed, bibendum justo. Donec vel elit augue. Suspendisse seo uyumlu sayfa ac felis pulvinar, vulputate ante quis, blandit leo. Sed justo sem, pretium scelerisque libero vel, auctor dictum velit. Vestibulum iaculis porttitor placerat.
As a result Donec id tincidunt felis. Donec vulputate enim blandit mauris gravida, a suscipit leo venenatis. Pellentesque seo uyumlu sayfa non pharetra sem, eu hendrerit nisl. Maecenas non volutpat nisi. Integer laoreet mi erat, sit amet dignissim urna interdum id. Mauris viverra id diam nec malesuada. Mauris nec consectetur diam. Maecenas ac ex eu felis tincidunt blandit vitae eleifend nunc.

Sayfada özelikleri başlıca şöyle;

Anahtar Kelimesi : SEO Uyumlu Sayfa

Sayfa Başlığı (Title Etiketi) : SEO Uyumlu Sayfa Nasıl Olur? Sizin İçin Araştırdım ve Bir Örnek Hazırladım

Meta Açıklaması (Description) :  İyi bir seo uyumlu sayfa oluşturmak ve google'da üst sıralara çıkmak için nasıl bir çalışma yapılmalı? Bu sorunun Cevabını araştırdığımız çalışmamızda. En çok bilinen SEO kriterlerine göre bir sayfa oluşturmaya çalıştık. Umarım SEO çalışmalarımızda hepimize faydası olur.

URL Uzantısı(Slug) : seo-uyumlu-sayfa

Bu örnek sayfada,

İlk paragrafta anahtar kelimem olan SEO Uyumlu Sayfa yı kullandım. aynı şekilde H1 etiketli başlıkta da anahtar kelimem geçiyor. Sayfada 1 adet H1, Bir adet H2 ve iki adet H3 kullandım. Sayfanın anahtar kelime yoğunluğu %2,3. Mümkün olduğunca anahtar kelime maksimum sayı değerini göstermek istedim. Bu yazıda toplam 469 kelime bulunuyor. Bunların 11 tanesi anahtar kelime.

Sayfada bir adet dahili bir adet de harici bağlantı kullandım. Ayrıca bir örnek görseli de anahtar kelimeyi içeren alt özelliğini de yazarak sayfaya ekledim.

Konu ile ilgili değerlendirmelerinizi bekliyorum

Saygılarımla...
Turgut Arslan

CSS ile Overlay Yapmak

Resim Başlığı

Resim Yazısı.

<!DOCTYPE html>
<html>
<head>
<title>CSS Overlay Efekti</title>
<style>
.kapsayici{

width:800px;
height:476px;
overflow:hidden;
text-align:center;
position:relative;
}
.perde{
position:absolute;
top:100%;left:0;right:0;bottom:0;
background:rgba(237,71,74,0.5);
color:#fff;
z-index:1;
padding-top:45%;
transition:top 0.5s;
}
.kapsayici:hover .perde{
top:0;
}
</style>
</head>
<body>
  <div class="kapsayici">
           <img src="/kirmizi-mercedes.jpg" />
     <div class="perde">
         <h3>Resim Başlığı</h3>
         <p>Resim Yazısı.</p>
    </div>
</div>

</body>
</html>
CSS overlay efetki ve diğer pratik bilgiler için Arin Yazılımın videolarını izleyebilirsiniz
https://www.youtube.com/watch?v=3aoOP_1mpws&list=PL-Hkw4CrSVq9GTqLreY9l5MiJJm6EOkal&index=7

Saygılarımla...
Turgut Arslan

Günlük SEO Çalışması

SEO İş Listesi

Search Console İçinde Yapılması Gerekenler

- Search Console'da Arama Trafiği altındaki Search Analytics panelinden çalışılan anahtar kelimeler için anahtar kelime gösterim, tıklama ve sıralama istatistiğinin incelenmesi.
Burada anahtar kelimelerin konumları ve tıklanma oranlarının yanı sıra o anahtar kelimenin yönlendirdiği sayfaların da incelenmesi gerekir.

- Search Console ekranında Arama Görünümü altında HTML Geliştirmeleri panelinde Meta açıklamalar ile ilgili hataların düzeltilmesi
Bu panelden site içindeki Yinelenen Meta Açıklamalar, Uzun Meta Açıklamalar, Kısa Meta Açıklamalar, Eksik Başlık Etiketleri, Yinelenen Başlık Etiketleri, Uzun Başlık Etiketleri ve Kısa Başlık Etiketleri gibi çeşitli uygulama hataları görüntülenir.

- Google Dizin Durumunun denetlenmesi.
Burada dizine eklenen sayfa sayısını ve robots.txt dosyanız tarafından engellenen sayfa sayısını görebilirsiniz, Ayrıca URL kaldır bölümünden istemediğiniz linklerin arama sonuçlarından ve Google indeksinden kaldırılmasını isteyebilirsiniz.

- Tarama Hatalarının denetlenmesi.
Buradan 404 ve 500 gibi standart hataların denetimini yapabilirsiniz. Google botlarının tarama istatistikleri, ve robots.txt dosyanızın test edilmesi gibi işlemleri yapabilirsiniz. Google gibi getir özelliğini kullanarak sayfalarınızın Google botları tarafından nasıl göründüğünü görebilir; isteğe bağlı olarak indekslenmesi için talimat verebilirsiniz. site haritaları kısmından sitemap.xml dosyanızı ekleyebilir, güncelleyebilir ve hatalarınız denetleyebilirsiniz.

Saygılarımla...
Turgut Arslan

JQuery Toggle Açılır Kapanır Menü

Menünün Çalışır Hali
Aslına bakarsanız önceden bu şekilde bir planlama yapmamıştım ama menü responsive olmuş :)

See the Pen Jquery Toggle Menü by Turgut Arslan (@draguth) on CodePen.

Menü Kodları Aşağıdaki Gibidir

<!DOCTYPE html>

<html>

<style>

  div.menuKutu {

    float: left;

    width: 200px;

    display: block;

    height: auto;

    background-color: #269470;

    cursor: pointer;

    font-size: 14px;

    font-family: Arial;

    text-align: center;

    color: white;

    padding: 5px;

    font-weight: bold;

    line-height: 18px

  }

  div.menuKutu p {

    height: 50px;

    line-height: 50px;

    display: none;

    background-color: #45b0a3;

    padding: 0px;

    margin: 0px;

  }

  div.menuKutu p:hover {

    background-color: #ebb753;

    padding: 0px 1important;

  }

</style>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

  <script type="text/javascript">

    $(document).ready(function() {

      $("div.menuKutu").click(function() {

        if ($(this).find("p").css('display') == 'none') {

          $("div.menuKutu").find("p").slideUp();

          $(this).find("p").slideToggle();

        } else if ($(this).find("p").css('display') == 'block') {

          $(this).find("p").slideUp();

        }

      });

    });

  </script>

  <div class="menuKutu">Toggle Menüyü Çalıştırmak için Tıkla<br/>

    <p>Menü Elemanı 1</p>

    <p>Menü Elemanı 2</p>

  </div>

  <div class="menuKutu">Toggle Menüyü Çalıştırmak için Tıkla<br/>

    <p>Menü Elemanı 1</p>

    <p>Menü Elemanı 2</p>

  </div>

</body>

</html>

Saygılarımla... Turgut Arslan

SEO'nun Arama Sonuçlarına Etkisi

Günümüzde insanoğlunun en büyük ortak sorunu çevre kirliliği. Havayı, suyu ve toprağı hiç düşünmeden kirletiyoruz. Çevremizi oluşturan, yaşamamızı sağlayan tüm etmenler bizim ürettiğimi atıklar yüzünden kirleniyor. Giderek dünyamız yaşanması imkansız bir yere dönüşüyor. Karaları, denizleri ve havayı kirlettiğimiz gibi, dünyanın ses dengesini de bozuyoruz. Kullandığımız araçlar ve yüksek sesle dinlediğimiz müzikler yüzünden ses kirliliği diye yeni bir şey icat ettik. Tüm bunlar aslında bir nevi aç gözlülükten ve tatminsizlikten kaynaklanıyor. Sınırlarımızı bilmiyoruz.

Bu açgözlülük ve sınır tanımamazlık sanal ortamda da kendisini gösteriyor. Bilişim teknolojisinin baş döndüren bir hızla ilerlediği şu zamanda büyük bir bilgi bombardımanı altına alınmış durumdayız. Hemen her konu ile ilgili bilgiye her an, her yerden ulaşabildiğimiz gibi; çoğu kez bu yerlerden de bir enformasyon yüklemesiyle de karşı karşıyayız. Nasıl yaşamamız gerektiği, ne yememiz-içmemiz, giymemiz gerektiği gibi pek çok konuda sürekli bir bilgi akışına maruz bırakılıyoruz. Bir nevi bilgi kirliliği içindeyiz. Bu olayın pasif kısmı. Bir de bilgiye ulaşmak amacıyla hareket ettiğimiz zaman karşılaştığımız aktif durum var. Mesela televizyon ile ilgili bir araştırma yapmak istediniz. Eskiden araştırma yapmak için kütüphaneye giderdiniz. Artık çoğu kez buna gerek kalmıyor. Google, Yahoo, Yandex ve Bing gibi arama motorları sizin için bu işi yüklenmiş durumdalar. Amacınıza ulaşmak için doğal olarak  televizyon anahtar kelimesi ile  bir arama yaptınız. Karşınıza şöyle bir sayfa çıktı.

Gördüğünüz gibi arama motorları için kütüphane rolünü üstlendiğini düşünülse de sonuç pek de öyle görünmüyor. En üst sıralarda televizyon satıcılarını reklamları, sonrasında gelen diğer sonuçlar da hep televizyon satan firmalara ait. Halbuki kütüphanede bir  araştırma yapıyor olsaydınız sonuç televizyon ile ilgili bilgileri içeren bir dizi ansiklopedi fasikülü olurdu. Tabii ki de burada arama anahtar kelimesini değiştirip istediğiniz sonuca ulaşmak kütüphanede araştırma yapmaktan daha hızlı. Şimdi de televizyon nedir diye aratın. Bu kez de aşağıdaki gibi bir sonuçla karşılaştınız.

Evet bu sefer arama sonuçlarında istediğiniz kaynaklar listelendi. Peki ilk aramada neden amaçladığınız sonuca ulaşamadınız? Bunun sebebi arama motoru optimizasyonu denilen bir dizi işlem. Özellikle e-ticaret firmaları sattıkları ürünler ile ilgili bazı anahtar kelimelerde arama motorlarını bu işlem ile manipüle etmekteler. Dünya genelinde SEO(Search Engine Optimization) olarak bilinen bir dizi sayfa indeksleme çalışmasının sonucu olarak burada denediğimiz "Televizyon" anahtar kelimesinde ilk sayfa sonuçlarında, en üst sıralara yerleşmişler. Arama motoru bu sayfalardaki anahtar kelime oranı ve sayfanın ziyaret edilme sıklığına bakarak; anahtar kelime araması ile en alakalı sonuç olduğuna karar vermiş. Bu sebepten "Televizyon" aramasında en üst sırada çıkıyorlar. Ancak sizin amacınız televizyon almak değil, cihaz ile ilgili bilgi sahibi olmak.

Arama sonuçlarını değerlendirmek lazım
İkinci aramaya ait sonuçlarda ticari sitelerin çıkmamasının iki sebebi var. Birincisi Google'ın zaman içinde yaptığı güncellemeler sonucu sizin televizyon almak istemediğinizi tahmin edebilecek algoritmik seviyeye gelmiş olması. İkinci sebep ise SEO ve dijital pazarlama uzmanlarının  Google ile aynı sebepten dolayı bu anahtar kelimeye zaman, emek ve para harcamak istememeleri. "Televizyon nedir?" diye aratan birinin satın alma amacının olmadığı aşikardır dediğinizi duyar gibiyim. ama Google'ın da aslında bir bilgisayar olduğunu unutmayın. Bu bilgisayar 2000'li yılların ilk başlarında kolayca aldatılabiliyordu. O zamanlarda böyle bir arama yaptığınızda içine anahtar kelimeler ve sayısı sonsuza ulaşan bağlantılı etiketler deryasının olduğu mp3 indirme siteleri sizi karşılıyordu. İnsanları doğru sonuçlara ulaştırmayı hedefleyen Google zaman içinde evrildi ve bu günkü halini aldı. Bu değişimi görmek için aşağıdaki videoyu bir izleyin derim.

İnternetten para kazanmak ve mümkünse zengin olmak; günümüzde pek çok kişinin hayallerini süslüyor. Geçtiğimiz on yıllık dönemde bu teknolojinin sunduğu imkanları akıllıca değerlendirerek milyarlarca dolar servet edinen insanların hayat öyküleri, girişimcilerin ruhlarını kamçılamakta. Günümüzde bunu başarmanın formülü de Google'da ilk Sayfada ya da ilk sırada çıkmak diye artık dillere pelesenk olmuş bir sözcükten geçiyor. İşte SEO'nun karanlık ve rahatsız edici tarafı da bu aşamada ortaya çıkıyor. Google ne kadar geliştirilirse geliştirilsin yine de manipüle edilebiliyor. Uygulanan her algoritmaya karşı geliştirilen yeni bir taktik mutlaka var. Mühendisler her ne kadar sizin için sürekli çalışsa da "SEO" uzmanları yeni bir yol bulup gene arama sonuçlarını etklemeyi başaracak. İşini iyi yapan insanlara bir şey demiyorum ama anahtar kelime avcılığı ve ticareti arama sonuçlarını etkilemeye devam edecek gibi görünüyor.

Saygılarımla...
Turgut Arslan

CSS Header

LoginSign In

John Doe

Kaynak Kodu:
<div dir="ltr" style="text-align: left;" trbidi="on">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dxf50fSZQNYJwFS_tbqS-7AJpgvZNHulPbRbJORIzv0OJTgWNNuteviqbmPpTcuLwUz26PnZBjGEZYjgMKzIOlHwlAR2f7qilqhTGqJNXz1nWMCiC-WP9UlIFgFiESdMbLot2xcTNbU/s1600/chevrolet_camaro_muscle.jpg" style="width:50%;height:auto;" /><div style="width:100%;height:120px;position:relative;border:solid 1px #e1e1e1;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dxf50fSZQNYJwFS_tbqS-7AJpgvZNHulPbRbJORIzv0OJTgWNNuteviqbmPpTcuLwUz26PnZBjGEZYjgMKzIOlHwlAR2f7qilqhTGqJNXz1nWMCiC-WP9UlIFgFiESdMbLot2xcTNbU/s1600/chevrolet_camaro_muscle.jpg&#39;);background-position:50% 50%;font-family:arial;">
<div style="width:100%;height:120px;background:rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);color:white;">
    <a href="http://arslanturgut.blogspot.com.tr" style="display:block;color:#fff;float:right;width:auto;height:14px;margin-right:15px;text-decoration:none;">Login</a><a href="http://arslanturgut.blogspot.com.tr" style="display:block;color:#fff;float:right;width:auto;height:14px;margin-right:15px;text-decoration:none;">Sign In</a>
    <div style="float:left;display:block;position:absolute;bottom:10px;left:150px;">John Doe </div>
    </div>
<div style="width:110px;height:110px;position:absolute;bottom:-35%;left:3%;border:solid 1px #e1e1e1;background-color:white;box-shadow:1px 1px 20px #eee;border:solid 2px #e1e1e1;background-color:white;z-index:100"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-4uyI8n5IneZfBcLCz_1OfpKBzl4MemMh-B5puT9KCnj7I7FbVIe60BxLqY1aPT7V-H6ZwELj51NhjBDWfhoU7qGqQ8IpiqmBZnTXf-DqKLc4BibgQDH4E5tXJ0njh1Ft6htdl0vjeg/s1600/profil-fotosu-erkek.png" style="width:100%;height:auto;" /></div>

</div>

</div>

Saygılarımla...
Turgut Arslan