Teknik SEO Nasıl Yapılır?

Hiç yazılım bilgisi olmayan biri, SEO çalışması yaparken zorlanabilir veya eksik çalışma yapar. Çünkü bizlerin yazıp çizdiğini paylaşmaya yarayan araç bir yazılımdır. Paylaştığımız veriyi insanların bulmasına kolaylık sağlayan, yazılarımızı sıralayan, bizi amansız bir rekabete sokan arama motorları da bir yazılımdır. SEO bu kadar yazılımla iç içeyken, yazılımcı gözünden Teknik SEO nasıl yapılır konusuna değinmem faydalı olur. Çünkü ürettiğim yazılımlar arama motorlarıyla son derece uyumlu.

Bu yazıda “Teknik SEO nasıl yapılır” konusundan çok, SEO çalışması yaparken yazılımsal olarak hangi hususlara dikkat edilmeli, yazılım desteğiyle arama motorlarına derdimizi daha iyi anlatmayı yani kısaca rakipleri sollamayı anlatacağım. Tüm bunları sohbet havasında, birebir konuşuyormuş gibi uzun uzun (gerçekten uzun her detayıyla) anlatacağım. Anlattığım işlemleri ücreti mukabilinde senin yerine yapabilirim. Sayfa sonundaki linkten iletişime geçebilirsin.

Robotlar Siteni Nasıl Görüyor?

Arama motorlarına optimizasyon yapmak için önce onları anlamak gerek. Bu yazılımlar bir sayfaya girip inceleme yaptığında sadece o sitenin kodlarını okuyarak anlam çıkarmıyor. Evet kodları okuyor, derliyor, kriter belirliyor ancak bunun yanında sitenin fotoğraflarını da çekiyor. Sıradan bir kullanıcının gözünden bakarak “kullanıcı burayı okuyamaz” veya “şu alan taşıyor okuma zorluğu çıkarabilir” gibi kendince yorumlarda bulunup bizlere CLS, LCP, FCP gibi hataları veriyor. (Merak etme bu yazımdaki bilgilerin hepsini uyguladığında bu sorunlardan da kurtulmuş olacaksın. 😂) Bakalım Google sitemizi nasıl görmüş, nasıl dizine eklemiş.

 

Web Cache Nedir, Nasıl Kullanılır?

Web cache, sayfanın resimleriyle beraber HTML olarak depolandığı bir süre sonra silindiği veya yenisinin eklendiği önbellekleme servisidir. Yani işleyiş şu: robot geliyor senin sitene, HTML kodlarını önbelleğe alıyor olay bu. E alıyor da doğru mu alıyor, siteni olduğu gibi mi alıyor, bi hata var mı, yok mu bunları bilmiyoruz nasıl öğreneceğiz? Aşağıdaki kutuya kendi sitenin (http:// veya https:// ile beraber) adresini yaz ve kontrol et. Çıkan görüntü senin sitenin görüntüsü ile birebir aynı değilse eğer okumaya devam et çünkü bu hataları bulmayı, ayıklamayı ve gidermeye de değineceğim.

Not: Bu araç sayfanızı olduğundan farklı gösterebilir. Bunun sebebi cache dosyaları veya CORS problemleri olabilir endişelenmeniz gerekmez. Burada kontrol etmemiz gereken sitedeki içerik sizin içeriğinizin olup olmadığıdır.

Uyarı: Bu araç, eğer test ettiğiniz sayfa Google tarafından dizine eklenmişse çalışır. Aksi takdirde 404 hatası alırsınız.

Mobil Uyumluluk Testi Nasıl Yapılır?

Web dünyası ziyaretçilerinin %83’ü cep telefonu kullanarak bu işlemlerini gerçekleştiriyor. Bu masaüstüne göre aşırı ciddi bir fark. Sence de bu farkı görmezden gelmek, mobil ziyaretçilere önem vermemek dibe batmak değil midir? O yüzden sitende mobil uyum hatası var mı bunu aşağıdaki kutudan kontrol et, sorun olmadığından emin olalım ve devam edelim.

 

Eğer test ettiğiniz sayfa sorunsuz işe resimdeki gibi sorun olmadığını belirten bir mesaj almalısınız. Eğer sayfanızda yüklenme sorunları varsa, ivedi şekilde müdahale edin. Çünkü mobil tarafta sorun olması sıkıntılı bir durum.

Sayfa Hız Testi

Google amcamıza göre, site 2.5 – 3 saniyenin üstünde açılış hızına sahipse, siteye giren kişi açılmasını beklemeden terk ediyor. Bu durum da hemen çıkma oranının yükselmesine sebep olur ve sıralama kriterlerine göre bu ennn böyük günahlardan biri 😂 . Yine aşağıdaki kutudan sitemizi test edelim efenim.

Sayfanız 2.5 – 3 saniyenin üzerinde bi hızda açılıyorsa muhtemelen buna şunlar sebep oluyordur;

Sunucu & Hosting İyileştirme

Sunucu & hosting konusunda gerçekten söyleyecek o kadar çok şey var ki, onun için ayrı bi makale yazsam iyi olur ancak kısaca değineyim. Kiraladığınız VDS, VPS veya hostinglerdeki RAM, İşlemci gibi kaynaklar sanallaştırma yapılarak yüzlerce hatta bazen binlerce site tarafından kullanılabiliyor. Paylaşımlı hostinglerde çok denk gelinen bi durum başka bi müşteri kaynakları çok tüketiyor siz az tükettiğiniz halde onun yoğunluğu size de yansıyor olabilir….

WordPress site sahipleri bilinçsizce tema ve eklenti kullanıyor (herkes değil tabii) Evet o yönden WordPress güzel yazılım bazen 2 tıklamayla eklenti kurup işini halledebiliyorsun ama kurmadan önce şunları sorman lazım. O eklenti standartlara uygun kodlanmış mı, sitende yük oluşturur mu, sunucuma ve veritabanıma gereksiz istekler gönderip gereksiz işlemlerde bulunur mu?.. Vesaire.

O yüzden tema seçimlerimizi demosunu page speed testine sokarak seçiyor, gereksiz eklentilerimizi, küçük işlerinizi hallettiğimiz eklentilerimizi kaldırıyor bunları yapamıyorsak bir bilene soruyoruz. (Eklenti ve temalarınızı özellikle WordPress’i son sürüme güncellemeniz gerektiğini söylemiyorum bile)

Anlık veya Sürekli Trafik

Yazılan kod kullanıcı siteye her girdiğinde çalışır, sayfayı her yenilediğinde tekrar çalışır, 500 kere yenilerse 500 kere yeniden çalışır. Yüksek trafikli sitelerde kullanıcı sayısına göre bu istekler milyonları bulabiliyor. Zaten DDOS gibi saldırıların temeli de burdan geçer. Önlem olarak mutlaka cache kurmalı, kullanmalısın.

Nasıl yapacağın bilmiyorsan yazının devamında WordPress siteler için isteklerin nasıl düşürüldüğünü, cache kurulumunun nasıl yapıldığını anlatıyor olucam.

Doğru Boyuta Sahip Olmayan Resimler

Siteye yüklediğin resmi masaüstüne çekip, sağ tık yapıp genişlik ve yükseklik değerline bi bak bakalım. Bu boyut örneğin 2048×1024 ise ve sitede width değeri 600 height değeri 300 olarak girilmişse, bu resim gereksiz yere büyüktür.

“Resize” işlemi yapılmalı ve sitedeki width & height değerine göre yeniden oluşturulmalıdır yapılmalıdır.

MB cinsinden resim boyutunu kalite kaybetmeden düşürmek için: https://compressjpeg.com/
JPG gibi modası geçmiş resim formatlarını kullanmak yerine JPG resimlerinizi WEBP formatına çevirip sitende öyle kullan. Örnek bir resim kodu aşağıdaki gibi olmalıdır.

 

 

Tema Seçimi

Üstte buna değinmiştim ama ayrı olarak değinmek daha iyi olacak.

Tema seçimiyle sitenin kaderi belirlenir, eklentilerle ise yön verilir. Kullandığın tema CSS gibi hafif, narin, masum stil diliyle halledilebilecek işlemleri JavaScript ile hallediyorsa ve bol keseden JavaScript kullanıyorsa o temaya bir dur demek lazım.

Mesela bak benim temaya, fazla diyebileceğimiz hiçbir şey yok minimal kullanıcı dostu, sıfır JS içeren bi tema kodladım kendime. PageSpeed puanları da 100 😎 .Bunları geçtim başta PHP sürümünün en az 7.3 bak en az 7.3 ve üzeri olması, temanın yeni standartlara uygun PHP kodları ile kodlanmış olması gerek. Sonra sunucu yanıt süresi (TTFB – Time to first byte) uzun çıkınca hosting firmasına çamur atıyoruz. 😂  Sunucu yanıt süresinin Google amcamıza göre en fazla 200 mili saniye olması gerek. Tabi bunun tek sebebi kötü kodlanan yazılım değil %80 sunucu yapılandırması kaynaklıdır.

WordPress Site Hızlandırma

Özel yazılım olsa belki günlerce uğraştıracak bir işlem ancak eklentiler ve onların doğru kullanımıyla son derece çabuk yapılabilir. Ancak bu hızlandırma işleminde PageSpeed veya GTmetrix gibi yazılımların puanlarına fazla takılmamak gerekiyor.

Son zamanlarda aldı başını gidiyor puanlar yüksek olsun puanlar yüksek olsun. Hayır efenim sitenin açılma süresi 2.5 – 3 saniyenin altındaysa bu gayet yeterlidir. Neden mi böyle diyorum? Çünkü:  “PageSpeed, GTmetrix, LightHouse gibi ölçüm araçları kendilerine öğretilen şeyleri analiz eder ve bu analizlere göre puan çıkarırlar.” Senin sayfa açılış hızın belirttiğim süren altındaysa ekstra bi şey yapmak için kendini kasmana gerek yok. Örneğin Google’ın sitelerinden birini bu testlerden birine sok. Hiçbirinin puanlarının yeşil bile olmadığını göreceksin. Ancak sayfa açılışları çok hızlıdır. Facebook, Twitter veya herhangi bir büyük kuruluşun sitesini de bu testlere sokabilirsin. Dediğim şeyi daha iyi anlayacaksın.

WordPress site hızlandırma konusu kısa olmadığı için onu uzun uzun en ince detayına kadar farklı bir yazımda anlatmayı düşünüyorum. O yüzden bu makaleye eklemeyeyim ama bunu paylaştıktan çok kısa süre sonra wordpress site hızlandırma yazısını da paylaşacağım.

Sitendeki Yazılımsal Hataları Nasıl Tespit Edebilirsin?

Sen mesela bir arama motoru olsan, hatalarla dolu bir siteye üst sıralarda yer verir miydin? Şahsen vermezdim bu yüzden HTML, CSS ve JS hatalarını varsa tespit edip mümkün olduğunca aza indirmeliyiz.

HTML Hata Ayıklama

HTML kodları hatalı olsa da herhangi bir hata gösterimi olmadığı için çalışır. Bu sebeple göze batmadığından fark edip müdahale etme şansımız olmaz. Şöyle düşünelim sen Google olsan, daha kodu bile düzgün olmayan, okuyamadığın, analiz edemediğin siteye üst sıralarda yer verir misin? Haklısın ben de vermezdim HTML hatalarını tespit etme aracını kullanarak sitendeki hataları görebilirsin.

Test sonrası uyarı (bilgilendirme) ve error (hata) gösterimlerini birbirine karıştırmayın. Burada evvela müdahale etmeniz gerekenler kırmızı ile gösterilen hatalardır. Peki bunları nasıl gidereceksiniz? Yazılım bilginiz yoksa maalesef gideremezsiniz ve HTML hataları için herhangi bir müdahalede bulunmanızı da tavsiye etmiyorum çünkü muhtemelen PHP kodları ile üretiliyordur ve bozulmasına sebep olabilirsiniz. Yine tavsiyem bir bilene danışın. Ancak siteniz sadece HTML ise, paneli yoksa yani WordPresste değil ise bu gibi HTML düzenleyici araçlardan destek alabilirsin.

CSS Hata Ayıklama

CSS kodları da HTML’de olduğu gibi bir programlama dili olmadığı için ekrana basan bir hata gösterimi yoktur. Bu yüzden kodlarımızda hata olsa dahi göremeyiz 😥. Çok da üzülmeye gerek yok çünkü hataları nasıl ayıklayacağınızı göstereceğim. Yine aşağıdaki kutuyu kullanalım.

Testi yaptık hataları gördük önden şunu söyleyeyim “webkit” ile başlayan hataları dikkate almanıza gerek yok. Sanırım webkit için destek eklememişler onun dışındaki Error sekmesi hatalarını dikkate alabilirsiniz. CSS hatalarını düzeltmek için yapılacak işlem tabi ki kuralına uygun olarak yeniden yazmak olacaktır.

JavaScript Hatalarını Tespit Etme ve Giderme

Sitenizde JS kullanıyorsanız belki de düzeltirken en çok zorlanacağınız hatalar olabilir. Mantıksal hata ve şu method yerine şu method kullanılsaydı gibi işlemlere girmeyeceğim. Sadece bas bas bağıran hatalardan konuşalım. Yapmanız gereken işlemler;

1. Hata ayıklamak istediğimiz sayfayı açalım.
2. F12 tuşuna basarak veya sağ tık “öğeyi denetle veya incele veya öğeyi incele” yazısına basalım.
3. Açılan sayfada sekmeler arasında “Console” sekmesine geçelim.
4. Buradaki tüm kırmızı yazan yazılar bizlere bir sorun olduğunu belirtir.

Hataları tespit ettiğimize göre sıra hataları gidermeye geldi. WordPress siteler için jQuery migrate eklentisini kullanabilirsiniz. %100 sonuç verip JS hatalarını temizlemeyecektir, bunun için detaylı bir çalışma yapıp hatalı yerleri tekrardan kodlamak gerekir. Ancak yine de jQuery taraflı hataları aza indirmek adına kullanılabilir.

Sosyal Medya Platformları Siteni Doğru Okuyor mu?

Çağımızın en büyük trafik kaynaklarından biridir. Google emmiye göre çokça ziyaretçisi olan sitede keramet vardır. Eğer sosyal medya kaynaklarından sitene trafik alabiliyorsan, Google’da genel bir yükselme yakalaman da kaçınılmaz olacaktır. Ancak sosyal medya kaynaklarından trafik almak için her şeyin doğru çalıştığından emin olmamız gerekir.

Open Graph Meta Etiketleri

Sosyal medya platformlarının URL önizlemesi olarak kullanması maksadıyla oluşturulmuştur. “og” ile başlayan meta etiketleri, kod parçalarıdır. HTML sayfasında <head> etiketleri arasına eklenir. Pinterest, Facebook, Twitter, LinkedIn beraberinde birçok site kullanmaktadır.

Eğer WordPress bir siteye sahipsen SEO eklentileri otomatik olarak bir kısmını ekler. Bu yazıyı yazdığım gün itibariyle 17 etiket bulunuyor. Ancak bunlardan 5 veya 6 tanesini girmek yeterlidir çünkü kalanları otomatik olarak gereği varsa almaktadır.

Aşağıya başlıca kullanılması gereken Open Graph meta etiketlerini bırakıyorum.

<meta property="og:title" content="Bu alana ayfa başlığı yani title gelmelidir" />
<meta property="og:type" content="Yazının türü gelmelidir. Örneğin: video.movie" />
<meta property="og:url" content="Sayfanın linki gelmelidir." />
<meta property="og:image" content="Öne çıkarmak istediğiniz, önizlemede kullanılacak görsel linki gelmelidir." />

Bunlar başlıcalarıydı şimdi detaylandıralım ve nasıl zenginleştiririz, hangi içerikleri ekleyebiliriz onu görelim.

<meta property="og:audio" content="https://orneksite.com/ses/muzik.mp3" />

Üstteki kod ile sitenizde kullandığınız ses dosyasını belirtebilirsiniz. Tırnak içine ses dosyasının linki gelmeli.

<meta property="og:locale" content="tr_TR" />

⤴️  Sayfanın dilini belirtebilirsiniz. Türkçe için tr_TR

<meta property="og:locale:alternate" content="fr_FR" />

⤴️  Sayfada başka diller kullandıysanız, farklı diller de içeriyorsa bunu belirtebilirsiniz.

<meta property="og:video" content="https://orneksite.com/video/video.mp4" />

⤴️  Video kullandıysanız onun linkini vererek video kullandığınızı belirtebilirsiniz önizlemeye eklenmesi için.

Daha detaylı bilgi edinmek istersen Open Graph döküman sayfasını ve Facebook’un dökümanını inceleyebilirsin.

Twitter Meta Etiketleri Kartı

Üstteki etiketleri Facebook olduğu gibi alır, Twitter’da alır ancak Twitter’ın kendine özel 3 etiketi var. Bunları Open Graph ile birletirmiş ve adına Twitter Cards dediği bir önizleme yapısını oluşturmuş. Kullanımı üstteki ile aynı.

<meta name="twitter:card" content="summary"/>

⤴️  Sitede Twitter kartı bulundurduğumuzu bu etiket ile belirliyoruz content özelliği aynı zamanda “summary_large_image”, “app”, ve “player” değerlerini almaktadır. Hangisini kullanacağından emin değilsen summary olarak kalsın.

<meta name="twitter:site" content="@kullaniciadi"/>

⤴️  Sitenin bir Twitter hesabı varsa, üstteki alana @ ile beraber kullanıcı adını yazabilirsin.

<meta name="twitter:creator" content="@kullaniciadi"/>

⤴️  Yazıyı yazan kişinin bir Twitter hesabı varsa üstteki alana yazabilirsin bu da @ ile beraber.

Pinterest Rich Pins

Pinterest abimiz de Open Graph meta etiketlerini kullanmakta. Fakat, buna ek olarak sayfanın aşağısında anlattığım Schema yapısını da kullanıyor. Open Graph’e göre çok çok daha detaylı giriş yapabildiğiniz bu yapıya da birazdan bakalım. Pinterest için ek olarak başka bir şey yok. Sadece Rich Pins kullanmak istemiyorum derseniz aşağıdaki kodu sitenize ekleyin.

<meta name="pinterest-rich-pin" content="false" />

Sitem sağlıklı bir şekilde Pinterest Rich Pins destekliyor mu diye merak ediyorsan validator aracını kullanabilirsin. Makaleler için daha fazla pin bilgisi edinmek istersen dökümanı şöyle park edeyim.

Yapısal Veri İşaretlemesi ile Arama Sonuçlarına Hükmedin!

Yapısal veri yani Schema markup ile kullanıcı daha siteye girmeden farklı bir görünüm ile sitenin gerçekten bilgi dolu olduğunu gösterebilir, siteye çekebiliriz. Birçok kişinin sorduğu sıfırıncı sıra yani rich snippets kazanmanıza da yardımcı olacaktır.

Schema Nedir?

Schema.org, web site yöneticilerinin makalelerini veya ürettiği sayfaların, arama motorları tarafından daha iyi anlaşılabilecek şekilde Microdata, RDFa ve JSON-LD türünde işaretlenmesi için oluşturulmuş bir kılavuzdur. Yani kısaca sen, sitende bir yemek tarifi verdiysen, mikro veri işaretlemesi ile bunu arama motorlarına daha iyi anlatıyorsun.

Neden Schema Kullanmalısın?

Arama motorları web sayfalarını okumakta ve anlamakta sınırlı bir anlayışa sahiptir. Biz insanlar gibi iyi şekilde okuyup yorumlayamazlar. Web sitenin HTML kodlarına işaretlediğimiz ek verilerle: “Google amca, bu sayfadaki bilgi Türkiyede tanınmış bir kişinin hayatını içermektedir.” şeklinde ek bir bilgiyle sayfada ne yaptığımızı daha iyi anlatabiliriz. Ayrıca kim aşağıdaki görselde olduğu gibi sitesini en üst sıranın da üstüne, yani 1. sıranında üstüne 0. sıraya taşımak istemez ki?

Schema Nasıl Kullanılır?

Burdan sonrasına somut örneklerle yani kodlarla devam edelim. Cem Yılmaz’ın G.O.R.A filmiyle ilgili bir sayfa oluşturduğunu düşünelim. Buna yönelik HTML kodunuz şuna benzer olacaktır.

<div>
   <h1>G.O.R.A</h1>
   <span>Yönetmen: Cem Yılmaz (23 Nisan 1973)</span>
   <span>Bilim Kurgu</span>
   <a href="https://orneksite.com/fragman.mp4">Fragman</a>
</div>

Başlamak için bu bilgilerin bulunduğu kapsayıcı HTML etiketine itemscope ögesini ekleyin. Bunu yaparak “hakkında” bilgisini vereceğimizi arama motorlarına açıklamış oluyoruz.

<div itemscope >
  <h1>G.O.R.A</h1>
  <span>Yönetmen: Cem Yılmaz (23 Nisan 1973)</span>
  <span>Bilim Kurgu</span>
  <a href="https://orneksite.com/fragman.mp4">Fragman</a>
</div>

Bilgi vereceğimizi açıkladık ancak konu belirlemedik. Yani içeriğimiz film olduğu için bunu da belirlememiz gerekiyor. Bunu yapmak için itemtype ögesine schema türümüzün movie olduğunu belirtiyoruz. Tüm türlere schema sayfasından ulaşabilirsiniz.

<div itemscope itemtype="https://schema.org/Movie" >
  <h1>G.O.R.A</h1>
  <span>Yönetmen: Cem Yılmaz (23 Nisan 1973)</span>
  <span>Bilim Kurgu</span>
  <a href="https://orneksite.com/fragman.mp4">Fragman</a>
</div>

2 div arasında bir film hakkında bilgi vereceğimizi arama motoru net şekilde anladı. Şimdi film ismi, yönetmeni gibi verileri işaretleyelim. Bunları anlatalım arama motoruna.

<div itemscope itemtype ="https://schema.org/Movie">
  <h1 itemprop="name" >G.O.R.A</h1>
  <span>Yönetmen: <span itemprop="director" >Cem Yılmaz</span> (23 Nisan 1973)</span>
  <span itemprop="genre" >Bilim kurgu</span>
  <a href="https://orneksite.com/fragman.mp4" itemprop="trailer" >Fragman</a>
</div>

Nitelikleri yani itemprop ögesini eklemek için <span> etiketini kullandığınızdan emin olun. Kodunuz bittikten sonra yapısal veri test aracını kullanarak doğru yapıp yapmadığınızı kontrol edin.

WordPresste Schema İşaretlemesi Nasıl Yapılır?

Özel yazılıma nazaran daha kolay, uygun minimal kodlanmış bir eklentiyle yapabiliyoruz.

1. Admin paneline geçip Eklentiler > Yeni ekle sayfasını açalım.
2. Arama yerine “Schema & Structured Data for WP & AMP” yazalım. Eklentiyi indirip aktifleştirelim.
3. Yazılar > Yeni ekle sayfasına geçip en alta inelim.
4. “FAQ” yazan kısımda Sıkça Sorulan Sorular bölümü için alan oluşturabilirsiniz. “Article” yazan kısım makale, “Custom Schema” ise üstte verdiğim kodların JSON-LD versiyonunu koyabileceğiniz bir kutu.

Schema gibi bir nimeti kullanmaktan çekinmeyin. Uyguladığınız schema %100 arama sonuçlarında görünmeyebilir. Google amcamız bu konuda biraz nazlı. Genelde ilk sayfadaki sitelerde görünür.

Cloudflare Nedir? Cloudflare Kurulumu ve Ayarları

Günümüzdeki bir çok yazılımda olduğu gibi Cloudflare’da ABD taraflı bir WAF servisidir. Başlıca özelliklerini listeleyeyim;

• Doğru ayarlarla siteniz %30 – 35 daha hızlı açılır.
• Global CDN servisi.
• Ücretsiz 256 bit SSL sertifikası verir.
• Ücretsiz Firewall ve DDOS koruması sunar.
• Proxy ile kötü emellerden gerçek sunucu bilgilerinizi gizler.
• Katmanlı önbellekleme özelliğiyle sunucunuzdaki yükü bir tık azaltır.

SEO faydası ise sunduğu özellikler beraberinde dolaylı olarak bulunmaktadır.

Cloudflare Kurulumu Nasıl Olur?

Kullanmak için name server adreslerinizi Cloudflare ile değiştirmeniz gerekmekte. Adım adım ilerleyelim.

1. Bir Cloudflare hesabı açalım.
2. Kurulum yapmak istediğiniz alan adını girip “Add site” butonuna basalım.
3. Açılan ekranda ücretsiz $0 olan planı seçip “Continue” diyelim.
4. DNS adreslerin taranacak ve kayıtlı bilgilerin getirilecektir. Bir sonraki ekrana geçebilirsin.
5. Bu ekranda alan adını satın aldığın siteye girelim. Kendi name server adreslerini silip, Cloudflare’in verdiklerini girmen gerekiyor.

“Done, check nameservers”  butonuna basıp beklemelisin. Kurulum işlemi bu kadar DNS yayılımı bazen 24 saate kadar sürebiliyor ancak genelde 10 dakikaya biter. Takibini yapmak için DNS yaylımı kontrol edebilirsin. Alan adının tamamının Cloudflare IP adresleri ile değişmiş olması gerekiyor.

Cloudflare Nasıl Ayarlanır?

Eğer kurulumu yaptıysanız yayılımı beklemenize gerek yok bu ayarları önceden de yapabilirsiniz. Yayılım bittiğinde otomatik olarak uygulanacaktır.

1. Speed sayfasına geçip, optimization sekmesini açalım.
2. Auto Minify adı altında JavaScript, CSS, HTML seçeneklerini işaretleyelim.
3. Brotli özelliğini aktif edelim.
4. Sayfanın aşağısına inip (eğer sitenizde JavaScript kodu varsa) Rocket Loader™ özelliğini açalım.
5. Caching sayfasına geçip, caching level özelliğini standart yapalım.
6. Browser Cache TTL özelliğini sitenizdeki trafiğe göre kendiniz ayarlayın oralama bi site için 1 gün yeterlidir.
7. Aşağı inip Always Online™ özelliğini etkinleştirelim.

Ortalama siteler için olması gereken özellikler bunlardır. Ancak saldırı aldığınız veya ek güvenlik önlemi eklemek istediğiniz durumlarda, farklı özellikleri devreye sokmak gerekir.

Progressive Web Apps (PWA) Nedir?

Konunun başından söylemek gerekirse PWA bir SEO kriteri değildir. Ancak dönüşüm oranını arttırdığı ve kullanıcı deneyimini iyileştirdiği için dolaylı olarak sıralamada etkisini görebiliriz. (demiştik ya hani content is golden, content is king…) PWA kullanıcıların hızlı ve güvenli bir şekilde isteklerini yerine getirebilmesi için oluşturulmuş JavaScript tabanlı yerel bir web uygulamasıdır.

• Google play veya App Store üzerinden indirilen uygulamalar gibidir. Eklendiğinde telefonda bir simgesi oluşur.
• Normal uygulamalardan farklı olarak; index alabilir, arama motorları tarafından fark edilebilir bir yapıdadır.

PWA Kurulumu

WordPress siteler için yapmanız gerekenler basit. Eklentiler sayfasına girip PWA yazıyosun ve önüne çıkan hoşuna giden birini kurup aktif ediyosun😂 . Biraz fazla basit gibi görünüyor ama WordPress’in güzelliklerinden biri de bu yani özel yazılım için anlatmaya kalksam 1000 kelimelik yeni bir makale yazmam gerekebilir.

Siteni Diğer Tarayıcılarda Nasıl Göründüğünü Test Et

Hemen hemen her tarayıcının varsayılan stilleri farklıdır ve her tarayıcı CSS kodlarını aynı yorumlamaz. Bu sebepten ötürü -webkit gibi ek CSS kodları yazarız. Siteniz tüm tarayıcılarda aynı görünüyorsa tebrikler tüm dünya sitenizi aynı görüyor… Fakat bunu nasıl test edeceksiniz? işte bu test aracıyla.

Efenim az önce yazılımcı gözünden Teknik SEO nasıl yapılır öğrenmiş oldunuz. Bu makalenin 2. bölümünü yayınlayabilirim çünkü 2900 kelime oldu ve fazla uzatmak istemiyorum. Eğer yazılımcı gözünden sitenize SEO çalışması yaptırmak isterseniz benimle iletişime geçebilirsiniz.
Ben Emre Nogay,
Sevgiler.