Front-End Checklist, HTML sayfanızı yayına almadan önce test etmeniz gereken tüm öğelerin kapsamlı bir listesidir.
Liste, diğer açık kaynaklı listelerden gelen eklemelerle birlikte Front End geliştiricilerinin yıllara dayanan deneyimlerinin bir ürünüdür.
Çoğu proje için Front-End Checklist içerisindeki öğelerin tamamının kullanılması gerekir. Ancak bazı öğelerin kullanımı ihmal edilebilir. (Örneğin bir yönetim paneli uygulamasında, RSS beslemesine ihtiyacınız olmayabilir). Öğelerin önemi konusunda 3 seviye belirledik:
etiketi önerilen ancak bazı durumlarda es geçebileceğiniz öğeleri ifade eder.
etiketi kesinlikle önerilen ve sadece nadir durumlarda görmezden gelebileceğiniz öğeleri ifade eder. Bazı elementlerin ihmal edilmesi performans ve SEO konusunda kötü sonuçlara neden olabilir.
etiketi öğe kullanımının zorunlu olduğunu ve hiçbir şartta görmezden gelinemeyeceğini ifade eder. Aksi halde sayfanızda fonksiyonel kayıplar yaşayabilir, ulaşılabilirlik ve SEO konusunda ciddi sorunlarla karşılaşabilirsiniz. Test önceliği daima bu etikete sahip öğelerdedir.
Bazı kaynaklar içeriğin türünü anlayabilmeniz için çeşitli ifadeler içerir.
- 📖: dokümantasyon veya makale
- 🛠: çevrimiçi araç / test aracı
- 📹: medya veya video içeriği
Not: HTML dökümanının
<head>
bölümünde bulunması gereken elementlerin tam listesini türkçe açıklamaları ile burada bulabilirsiniz.
<!-- Doctype HTML5 -->
<!doctype html>
Sonraki 3 meta tag (Charset, X-UA Compatible ve Viewport) head bölümünün en başında yer almalıdır.
<!-- Dökuman için karakter kodlaması -->
<meta charset="utf-8">
<!-- Internet Explorer'a en son oluşturma motorunu kullanmasını söyleyin -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Responsive bir tasarım için viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
- Title:
Başlık tüm sayfalarda kullanılmalıdır. (SEO: Google, başlıkta kullanılan karakterlerin piksel genişliğini hesaplar; 472 ve 482 piksel arasında kesilecektir. Buna göre ortalama karakter limiti 55 civarındadır).
<!-- Döküman Başlığı -->
<title>55 karakterden daha kısa bir başlık</title>
<!-- Meta Açıklaması -->
<meta name="description" content="Description of the page less than 150 characters">
- Favicons:
Tüm faviconlar ayrı ayrı oluşturulmalı ve doğru şekilde ayarlanmalıdır. Eğer sadece
favicon.ico
dosyasına sahipseniz, dosyayı sitenizin ana klasörüne koyun. Normal şartlarda dosyayı işaret eden bir element kullanmanıza gerek yok ancak aşağıdaki örnekte olduğu gibi döküman içerisinde belirtmek iyi bir pratik olabilir. Günümüzde.ico
formatında (boyut: 32x32px). PNG biçiminin kullanılması önerilmektedir.
<!-- Standart favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Önerilen favicon biçimi -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- Apple Touch Icon:
Apple touch favicon (apple-mobile-web-app-capable) kullanılmalıdır (Desteklemek isteyebileceğiniz tüm boyutları karşılayacak, en az 200x200px boyutlarında bir Apple Icon oluşturun).
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
Browserconfig.xml dosyası için gerekli minimum xml betiği aşağıdaki gibidir:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
<!-- Yinelenen içerik sorunlarını önlemeye yardımcı olur -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
- Language attribute:
Web sitenizde
lang
niteliğini kullanmalı ve geçerli sayfanın dili ile ilişkilendirmelisiniz.
<html lang="en">
- Direction attribute:
Sayfa yazıların yönü html etiketinde belirtilmelidir. (Farklı bir html etiketi kullanılabilir).
<html dir="rtl">
<link rel="alternate" href="https://es.example.com/" hreflang="es">
-
RSS feed:
Eğer projeniz bir blog ise ya da makaleler içeriyor ise; bir RSS link sağlanmalıdır.
-
Inline critical CSS:
Sayfanın yüklenmesi sırasında (Tüm içeriklerden önce) mutlaka görünmesi gereken CSS betikleri kritik CSS olarak adlandırılır. Genel CSS içeriklerinden önce
<style></ style>
arasında tek bir satırda (sıkıştırılmış) verilmelidir.
- 🛠 Critical, Addy Osmani on GitHub bu işlemi otomatik hale getirir.
- CSS order:
Tüm CSS dosyaları JavaScript dosyalarından önce
<head>
bölümünde tanımlanmalıdır. (JS dosyalarının asenkron olarak sayfanın en üstünde yüklenebildiği durumlar dışında).
Facebook OG ve Twitter Cards tüm web siteleri için önerilir. Eğer belirli bir sosyal siteyi hedefliyor ve içeriklerinizi tanıtmak istiyorsanız diğer etiketlerde kullanılabilir.
- Facebook Open Graph:
Tüm Facebook Open Graph (OG) verileri test edilmeli ve hiçbiri eksik ya da hatalı bilgi içermemelidir. Resimler en az 600 x 315 piksel boyutunda olmalıdır. 1200 x 630 piksel önerilir.
Not:
og:image:width
veog:image:height
tanımlarını kullanarak resim boyutlarını belirtmeniz; örümceğin asenkron olarak resimleri yükleyip işleme sokmadan, direk kullanabilmesine olanak sağlayacaktır.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Sonraki etiketler opsiyoneldir ancak kullanılması önerilir -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 Web Yöneticileri için Paylaşım Kılavuzu
- 📖 En İyi Teknikler - Paylaşım
- 🛠 Sayfanızı Facebook OG test aracı ile test edin.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Twitter card'larına giriş — Twitter Developers
- 🛠 Sayfanızı Twitter card doğrulayıcı ile test edin.
- HTML5 Semantic Elements:
HTML5 Semantik Elementler doğru şekilde kullanılmalı (header, section, footer, main...).
-
Error pages:
404 Hata sayfası ve 5xx sayfası bulunmalıdır. 5xx hata sayfalarındaki CSSlerin sayfa içine entegre edilmesi gerektiği unutulmamalıdır. (Sunucuya herhangi bir çağrı yapılmamalıdır).
-
Noopener:
target="_blank"
ile harici bağlantılar kullanmanız durumunda, tab nabbing'i önlemek için bağlantınızrel="noopener"
niteliğine sahip olmalıdır. Eğer Firefox'un eski versiyonlarına destek vermek istersenizrel="noopener noreferrer"
şeklinde kullanabilirsiniz.
- W3C compliant:
HTML kodundaki olası sorunları tanımlamak için tüm sayfaların W3C doğrulayıcıyla test edilmesi gerekir.
- Link checker:
Sayfanızda kırık link bulunmamalıdır. Herhangi bir 404 hatası alınmadığını doğrulayın.
- Adblockers test:
Web siteniz reklam engelleme araçları aktifken doğru şekilde görüntülenebilmelidir (Bir mesaj ile ziyaretçileri eklentiyi pasif hale getirmeleri yönünde uyarabilirsiniz).
Not: Webfont kullanımı stillendirilmemiş / görünmez yazılara neden olabilir - may cause Flash Of Unstyled Text/Flash Of Invisible Text - Fallback fontlar kullanmayı ya da webfont yükleyicilerini kullanarak bunu önleyin.
-
Webfont size:
Webfont boyutları 2 MB'ı aşmamalıdır. (Tüm türevleri ile birlikte).
-
Webfont loader:
Webfont yükleyiciler ile yükleme akışını kontrol edin.
Not: Çoğu Front-End geliştiricinin takip ettiği CSS Kılavuzları ve Sass Kılavuzlarını inceleyin. Eğer CSS özellikleri konusunda çekinceleriniz var ise, CSS Kaynakçasını ziyaret edin. Tutarlılık için bu kısa Kod Kılavuzu da kullanılabilir.
- Responsive Web Design:
Web sitesinin tasarımı responsive olmalı.
- CSS Print:
Baskı(yazdırma) için tüm sayfalarda geçerli olan bir CSS bulunmalı.
- Preprocessors:
Sayfanız bir CSS önişlemcisi kullanmalı (Sass önerilir).
- Unique ID:
Eğer ID kullanılmışsa tümü eşsiz olmalı.
- Reset CSS:
Güncel bir CSS reset (reset, normalize ya da reboot) kullanılmalı. (Eğer Bootstrap ya da Foundation gibi bir CSS Framework kullanıyorsanız Normalize hali hazırda buna dahil edilmiştir)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix:
Javascript dosyalarındaki tüm sınıflar (ya da IDler) js- ile başlamalı ve CSS dosyaları içerisinde kullanılmamalıdır.
<div id="js-slider" class="my-slider">
<!-- Ya da -->
<div id="id-used-by-cms" class="js-slider my-slider">
- Embedded or inline CSS:
<style>
etiketleri arasında ya da satır içi CSS kullanmaktan kaçının: sadece geçerli bir sebebiniz varsa kullanın (örn. slider için arkaplan resmi, kritik CSS). - Vendor prefixes:
Vermek istediğiniz tarayıcı desteğine göre CSS tarayıcı önekleri kullanılmalıdır.
- Concatenation:
CSS dosyaları tek bir dosyada birleştirilmelidir (HTTP/2 hariç).
- Minification:
TÜm CSS dosyaları sıkıştırılmalıdır.
- Non-blocking:
CSS dosyaları DOM'un yüklenmesini engellememelidir.
-
Responsive web design:
Tüm sayfalar 320px, 768px, 1024px (Analitik verilerinize göre daha farklı olabilir) kırılma noktaları için test edilmelidir.
-
CSS Validator:
CSS test edilmeli ve bilinen hatalar düzeltilmeli.
- Desktop Browsers:
Tüm sayfalar bilinen tüm masaüstü tarayıcılarda test edilmeli (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
- Mobile Browsers:
Tüm sayfalar bilinen tüm mobil tarayıcılarda test edilmeli (Native browser, Chrome, Safari...).
- OS:
Tüm sayfalar bilinen tüm işletim sistemlerinde test edilmeli (Windows, Android, iOS, Mac...).
Not: Resim optimizasyonunu hakkında detaylı bilgi için ücretsiz ekitap'dan faydalanın. Essential Image Optimization from Addy Osmani.
- Optimization:
Tüm görseller tarayıcıda kullanılmadan önce optimize edilmelidir. Anasayfa gibi önemli sayfalarda WebP formatını kullanabilirsiniz.
- 🛠 Imagemin
- 🛠 ImageOptim ile resimlerinizi ücretsiz şekilde optimize edebilirsiniz.
- 🛠 Kraken.io da png ve jpg optimizasyonu için başarılı çözümler bulabilirsiniz. 1mb'a kadar olan dosyalar ücretsiz plana dahil.
- Picture/Srcset:
Kullanıcının ekran boyutuna göre en uygun resmin görüntülenmesi için srcset özelliği kullanılmalıdır.
- Retina:
Retina desteği için görsellerin 2x ve 3x formatları bulunmalıdır.
- Sprite:
Küçük resimler bir sprite dosyasında yer almalıdır (ikonlar SVG sprite dosyalarında bulunabilir).
- Width and Height:
Eğer render edilecek görselin boyutları biliniyorsa
<img>
elementlerininwidth
veheight
değerleri girilmelidir (CSS üzerinden boyutlandırmalarda kullanılmayabilir). - Alternative text:
Tüm
<img>
elementleri görseli açıklayan bir yazı barındırmalıdır.
- JavaScript Inline:
Javascript kodlar döküman içinde kullanılmamalı (HTML kodu ile karışık şekilde).
- Concatenation:
Javascript dosyaları birleştirilmeli.
- Minification:
JavaScript dosyaları sıkıştırılmalı (
.min
soneki kullanılabilir).
- Modernizr:
Bazı özel nitelikleri hedeflemeniz gerekiyorsa,
<html>
etiketinize sınıf eklemek için özel bir Modernizr kullanabilirsiniz.
- ESLint:
ESLint ile herhangi bir hata almamalısınız (Standart kurallara ya da kendi ayarlarınıza göre).
- HTTP Strict Transport Security (HSTS):
HTTP header'ı 'Strict-Transport-Security' şeklinde ayarlanmalı.
- Cross Site Request Forgery (CSRF):
CSRF saldırılarını önlemek ve sunucuya yapılan isteklerin doğruluğu için gelen isteklerin web sitenizden / uygulamanızdan geldiğine emin olun.
- Content Type Options
Google Chrome ve Internet Explorer'ın bir yanıtın içerik türünü sunucu tarafından bildirilenlerden farklı olarak algılamasını(mime-sniff) önler.
- Content Security Policy
İçeriğin sitenizde nasıl yüklendiğini ve nerede yüklenmesine izin verdiğini tanımlar. Ayrıca tıklama saldırılarına karşı koruma sağlamak için de kullanılabilir.
-
Lazy loading:
Resim, script ve CSS dosyaları sayfa yanıt süresini iyileştirmek için lazyload ile yüklenmeli (Detaylı bilgiye kendi başlıkları altından ulaşılabilir).
-
Cookie size:
Eğer çerez kullanıyorsanız, her bir çerezin 4096 bayttan fazla olmadığına ve alan adınızın 20'den fazla çerez içermediğine emin olun.
- Third party components:
Harici JS dosyalarına dayanan 3.parti iframe uygulamaları veya eklentiler mümkün oldukça statik eklentiler ile değiştirilmelidir. Böylece harici api çağrıları limitlenerek ziyaretçi aktiviteleri gizli kalabilir.
- DNS resolution:
Gerekli olabilecek üçüncü parti servislerin DNS'leri, boşta kalma süresi boyunca
dns-prefetch
ile çözümlenir.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection:
DNS lookup, TCP handshake ve servislerin TLS negotiation aşamaları için
preconnect
kullanıldı.
<link rel="preconnect" href="https://example.com">
- Prefetching:
İhtiyaç duyulacak kaynaklar (örn. lazyload resimler), yükleme esnasında
prefetch
ile getirildi.
<link rel="prefetch" href="image.png">
- Preloading:
Geçerli sayfada gerekli olan kaynaklar (örneğin,
<body>
sonuna yerleştirilen scriptler) 'preload' ile işlendi.
<link rel="preload" href="app.js">
Not: Oynatma Listesi için: A11ycasts with Rob Dodson 📹
- Progressive enhancement:
Navigasyon ve arama gibi sayfanın önemli işlevleri Javascript etkin olmadan da kullanılabilmeli.
- H1:
Her sayfa sayfa başlığından farklı bir H1 içermeli.
- Headings:
Başlık etiketleri doğru sırada kullanılmalı (H1'den H6'ya).
- Role banner:
<header>
,role="banner"
içeriyor. - Role navigation:
<nav>
,role="navigation"
içeriyor. - Role main:
<main>
,role="main"
içeriyor.
- Specific HTML5 input types are used:
Özelleştirilmiş tuş takımları ve farklı türdeki araçlar kullanan mobil cihazlar için önem arz eder.
- Label:
Her input öğesi bir label öğesi ilse ilişkilendirildi. Label'in görüntülenemediği durumlar için
aria-label
kullanılmalı.
- Accessibility standards testing:
Sayfanızın erişilebilirlik standartlarına uyup uymadığını test etmek için WAVE aracını kullanın.
- Keyboard navigation:
Web sitenizi klavyenizi kullanarak test edin. Tüm etkileşimli öğeler, erişilebilir ve kullanılabilir olmalı.
- Screen-reader:
Tüm sayfalar ekran okuyucuda test edildi (VoiceOver, ChromeVox, NVDA ve Lynx).
- Focus style:
Odak devre dışıysa, CSS'ile aktif hale getirildi.
- sitemap.xml:
Bir sitemap.xml bulunmalı ve Google Search Console'a (eski adıyla Google Webmaster Araçları) gönderilmeli.
- 🛠 Google Robots Test Aracı ile robots.txt'i test edin.
- Structured Data:
Yapısal verileri kullanan sayfalar test edilmeli ve hata içermemeli. Yapılandırılmış veriler, örümceklerin geçerli sayfadaki içeriği anlamalarına yardımcı olur.
- 📖 Yapılandırılmış Verilere Giriş - Search - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Yapısal Veri Test Aracı ile sayfanızı test edin.
- 🛠 Yapısal veriler olarak kullanılabilecek tüm sözlüklerin listesi. Schema.org Tam Hiyerarşi
- Sitemap HTML:
HTML sitemap'iniz bulunmalı ve sitenizin footer'ından bir link aracılığı ile ulaşılır olmalı.
<!-- Örnek: Sayfalama listesinde bulunan 2.sayfanın linkleri -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
Front-End Checklist diğer dillerde de mevcuttur. Tüm çevirmenlerlere teşekkürler!
- 🇯🇵 Japanese: miya0001/Front-End-Checklist
- 🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korean: kesuskim/Front-End-Checklist
- 🇧🇷 Portuguese: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
- 🇫🇷 French: ynizon/Front-End-Checklist
Front-End Checklist Listesinin kurallarını izlediğinizi göstermek isterseniz bu rozeti Benioku dosyasında kullanabilirsiniz.
[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)
Değişiklikler veya eklemeler önermek için issue açabilir veya pull sorgusu gönderebilirsiniz.
Front-End Checklist iki alt daldan oluşur:
Bu dal otomatik olarak Front-End Checklist 'e yansıtılan' README.md 'dosyasından oluşur.
Bu dal, içeriğe gerektiği takdirde önemli değişiklikler yapmak için kullanılacaktır. Küçük hataları düzeltmek veya yeni bir madde eklemek için ana dalın kullanılması tercih edilir.
Herhangi bir sorunuz veya öneriniz varsa, Gitter veya Twitter'ı kullanmaktan çekinmeyin:
Projeyi bu noktaya getiren tüm katılımcılara teşekkürler.[Katkıda Bulun].
Destekleyen herkese teşekkürler! 🙏 [Destekle]
Destek olmak için projeye sponsor ol. Sitenizin linkini içeren logonuz burada görüntülenecek. [Sponsor Ol]