Görseller Ve Medya
Bu belge statik dosya ve görsel yönetimini anlatır. Falcon şablonunda görseller çoğunlukla public/ altındadır; Astro src/assets pipeline’ı bu rehberin odağı değildir.
Marka path’leri: Site Bilgileri. Sayfa OG prop: SEO / Meta. Blog MDX: MDX Kullanımı Ve Blog URL, Blog İçeriği.
public/ → Doğrudan URL
Section titled “public/ → Doğrudan URL”public/ kökündeki dosya build sonrası site kökünden servis edilir:
| Dosya | URL |
|---|---|
public/favicon.svg | /favicon.svg |
public/og/default.svg | /og/default.svg |
public/images/hero.webp | /images/hero.webp |
Kodda path slash ile başlar: src="/og/default.svg".
| Kaynak | Değer |
|---|---|
| Config | site.ts → logo: '/og/default.svg' |
| Dosya | public/og/default.svg (veya değiştirdiğiniz path) |
| Kullanım | Header.astro — <img src={site.logo} alt="" /> |
Logo değişince config path + dosyayı birlikte güncelleyin.
Favicon
Section titled “Favicon”Tipik dosyalar:
public/favicon.svg— modern tarayıcılarpublic/favicon.ico— eski uyumluluk
BaseLayout veya head snippet’lerinde referans verilir; dosyayı değiştirmek genelde yeterlidir.
OG (Paylaşım) Görseli
Section titled “OG (Paylaşım) Görseli”| Katman | Alan |
|---|---|
| Varsayılan | seo.ts → defaultImage: '/og/default.svg' |
| Sayfa özel | BaseLayout → image prop |
Örnek Contact — özel görsel gerekmezse varsayılan kullanılır. Yeni görsel: public/og/ altına koyun, path’i config veya props’ta verin.
Blog Kapak Ve İçerik Görselleri
Section titled “Blog Kapak Ve İçerik Görselleri”Blog yazıları src/content/blog/*.mdx içindedir. Görsel eklemek:
Dosya public/images/blog/ekip.webp konumunda olmalıdır.
Teknik koleksiyon ve URL: Blog İçeriği, MDX Kullanımı Ve Blog URL.
Boyut Ve Format (Kısa Öneri)
Section titled “Boyut Ve Format (Kısa Öneri)”| Öneri | Neden |
|---|---|
| WebP veya optimize SVG (logo) | Daha küçük indirme |
| Genişlik ~1200–1600px (hero/OG) | Retina için yeterli, aşırı MB değil |
| Sıkıştırma (Squoosh, sharp CLI) | LCP ve mobil veri |
Çok büyük PNG’leri doğrudan public/’e koymayın.
alt Ve Erişilebilirlik
Section titled “alt Ve Erişilebilirlik”- Anlamlı görsel: açıklayıcı
alt(«Fixrav ofis girişi») - Dekoratif / logo yanında tekrarlayan metin:
alt=""(Header logo örneği)
Boş veya yanlış alt ekran okuyucu ve SEO için zayıftır.
Ne Değiştirirse Ne Olur
Section titled “Ne Değiştirirse Ne Olur”| Değişiklik | Sonuç |
|---|---|
public/og/default.svg dosyası | Varsayılan paylaşım görseli |
site.logo path | Header logo URL |
seo.defaultImage | Tüm sayfaların OG fallback’i |
BaseLayout image prop | Yalnızca o sayfanın paylaşım görseli |
MDX  | Yalnızca o yazıda görsel |
Yapmayın
Section titled “Yapmayın”public/ilesrc/assetsimport yolunu karıştırmayın — bu projede dokümantasyon public odaklı.- OG için mutlak harici URL zorunlu değil;
site.url+ path birleşimi layout’ta yapılır (SEO / Meta). - Blog görselini yalnızca
src/contentiçine koyup URL vermeyin — tarayıcıpublic/path’ini ister.
İlgili Rehberler
Section titled “İlgili Rehberler”- Site Bilgileri —
site.logo,seo.defaultImage - SEO / Meta — sayfa
imageprop - Blog İçeriği — MDX içi img
- Production — canlı asset kontrolü
Görseller public/ → /path. Logo site.ts, OG seo.ts + isteğe bağlı BaseLayout image. Favicon kökte. Blog: MDX markdown image. WebP, makul boyut, anlamlı alt.