fkdev UIv2.4.1
fkdev.sbsui.fkdev.sbsadmin.fkdev.sbsfkdevsik@fkdev.sbs

Kaynaklar · Canlıya alma

Canlıya al.

Güzel bir site bulunabilir, herkes tarafından kullanılabilir, hızlı ve güvenli olduğunda gerçekten bitmiştir.

01SEO#

HTML<head>
<title>Deneyim — Furkan Kırcı | Yazılım ve Koçluk</title>
<meta name="description" content="160 karakteri geçmeyen, sayfayı anlatan bir cümle.">
<link rel="canonical" href="https://www.fkdev.sbs/deneyim/">
<meta property="og:title" content="Deneyim — Furkan Kırcı">
<meta property="og:description" content="...">
<meta property="og:url" content="https://www.fkdev.sbs/deneyim/">
<meta name="twitter:card" content="summary">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Ana Sayfa", "item": "https://www.fkdev.sbs/" },
    { "@type": "ListItem", "position": 2, "name": "Deneyim", "item": "https://www.fkdev.sbs/deneyim/" }
  ]
}
</script>
  • Her sayfanın başlığı ve açıklaması benzersiz olsun.
  • Sayfada tek bir <h1> kullan.
  • Adresler temiz olsun: /deneyim/ gibi; # ile sayfa ayırma.
Metinrobots.txt
User-agent: *
Allow: /
Sitemap: https://www.fkdev.sbs/sitemap.xml

02Erişilebilirlik#

  • Yalnızca ikon içeren her butona aria-label ver.
  • Görsellere anlamlı alt yaz; süs görsellerinde alt="".
  • Her form alanının bir <label>’ı olsun.
  • Sayfanın başına “İçeriğe atla” bağlantısı koy.
  • Metin kontrastı en az 4,5:1 olsun (fkdev renkleri bunu sağlar).
  • Her şey klavyeyle kullanılabilsin; odak halkasını kaldırma.
  • Hareket prefers-reduced-motion açıksa kapansın (fkdev UI bunu otomatik yapar).

03Performans#

  • Fontlar için preconnect kullan, display=swap ile yükle.
  • Betikleri defer ile yükle.
  • Görselleri WebP/AVIF olarak ve loading="lazy", width, height ile ekle.
  • Cam efekti (backdrop-filter) pahalıdır; aynı ekranda düzinelerce büyük cam yüzey kullanma.
  • HTML’i kısa, CSS ve JS’i uzun süre önbellekte tut.

04Güvenlik başlıkları#

.htaccess.htaccess
Options -Indexes
ErrorDocument 404 /404.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

<IfModule mod_headers.c>
  Header always set X-Content-Type-Options "nosniff"
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set Referrer-Policy "strict-origin-when-cross-origin"
  Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()"
  Header always set Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://ui.fkdev.sbs; font-src https://fonts.gstatic.com; script-src 'self' 'unsafe-inline' https://ui.fkdev.sbs; img-src 'self' data:"
</IfModule>

CSP’yi dikkatli açContent-Security-Policy yanlış ayarlanırsa fontlar ve betikler engellenir. Önce tarayıcı konsolunu izleyerek Content-Security-Policy-Report-Only ile dene.

05Deploy#

OrtamNasıl?
Paylaşımlı hosting (Apache)Dosyaları public_html içine yükle; .htaccess dosyasının da yüklendiğinden emin ol (gizli dosya olarak atlanabilir).
Vercelvercel komutu ya da GitHub bağlantısı; statik sitede ayar gerekmez.
Netlify / Cloudflare PagesKlasörü sürükle-bırak; 404 için 404.html otomatik kullanılır.
Kendi sunucun (Nginx)try_files $uri $uri/ /404.html; ve HTTPS için Let’s Encrypt.

06Yayın öncesi kontrol listesi#

Dokümantasyonda ara

Esc
↑ ↓ gezinEnter aç