Html-Css Kitaplığı | MEFAMEX

Bu sayfada Html-Css, SEO optimizasyonu ile ilgili notlarımı, projelerimi ve hatırlatmalarımı paylaşacağım. Zaman içinde güncellenicek ve yeni içerikler eklenicektir. Html-Css, SEO ayarlamaları ile ilgili sorularınızı ve önerilerinizi bana iletebilirsiniz.

Bir websitesi yayınlama sürecinde temel ve SEO ayarlaması için kullanılması gereken temel dosyalar:
      * index.html (ana sayfa)
      * style.css (stil dosyası)
      * script.js (javascript dosyası)
      * robots.txt (arama motorları için kılavuz)
      * sitemap.xml (arama motorları için kılavuz)
      * navigation.json (site gezinme yapısı).

Açılış tarihi: 12.12.2024 || Son güncelleme tarihi: 30.12.2024

İLK HEAD TAGLARI

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

SEO META ETİKETLERİ

<title> Page title here! browser tab and search tittle </title>
<meta name="author" content="Yazar adı" />
<meta name="description" content="Sayfa açıklaması" />
<meta name="keywords" content="anahtar, kelimeler" />
<meta name="robots"content="index, follow, max-image-preview:large" />

BASE

<base href="/"> (or https://example.com)

Base etiketi, bir sayfadaki tüm URL'lerin başına eklenen bir URL'yi belirtir. Bu, sayfadaki tüm URL'lerin aynı kök URL'yi paylaşmasını sağlar. Bu, özellikle çoklu alt dizinlerde çalışırken yararlıdır.

BAGLANTI HIZLANDIRMALARI

Bir dış kaynağa (örneğin, bir CDN ya da üçüncü taraf sunucu) hızlı bir bağlantı kurulması için kullanılan bir etiket olup, sayfa yüklenmeden önce DNS çözümlemesi, TLS el sıkışması ve TCP bağlantısı yapılmasını sağlar. Bu, sayfa yüklenirken dış sunuculara bağlantı kurmanın hızını artırabilir.

<link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" />

CANONICAL

<link rel="canonical" href="https://www.example.com">

Canonical etiketi, bir sayfanın tek ve doğru sürümünü belirtir. Bu, aynı içeriğe sahip birden fazla sayfa varsa, arama motorlarının hangi sayfanın dizine eklenmesi gerektiğini belirtmek için kullanılır.

MANIFEST

<link rel="manifest" href="/site.webmanifest">

Manifest etiketi, bir sayfanın web uygulaması manifestini belirtir. Bu, web uygulamasının adını, simgesini, otomatik başlatma davranışını ve diğer özelliklerini belirler.

ALTERNATE

<link rel="alternate" hreflang="tr" href="https://www.example.com/tr">

Alternate etiketi, bir sayfanın farklı dil sürümlerini belirtir. Bu, arama motorlarının farklı dil sürümlerini dizine eklemesine ve kullanıcılara doğru dil sürümünü sunmasına yardımcı olur.

FAVICON

Favicon Nedir? Favicon, bir web sitesini veya uygulamayı temsil eden küçük bir simgedir. Tarayıcı sekmelerinde, yer imlerinde, mobil cihazlarda ve arama sonuçlarında görüntülenir. Kullanıcılara görsel bir kimlik kazandırmanın yanı sıra, marka bilinirliğini artırmaya ve kullanıcı deneyimini iyileştirmeye yardımcı olur.

rel="icon" / "shortcut icon" / "apple-touch-icon"
type="image/svg+xml" / "image/x-icon" / "image/vnd.microsoft.icon" / "image/gif" / "image/jpeg" / "image/png" / "image/bmp"
sizes="16x16" / "32x32" / "48x48" / "64x64" / "128x128" / "256x256" / "512x512"

Genel olarak cihazların ve tarayıcıların favicon boyutları şu şekildedir:
→ standart : [ico/png] 16 32 48
→ (safari) apple-touch-icon: [png] 180(önerilen), 167(ipad pro), 152(ipad) 120(iphone)
→ (android)icon: [png] 512 256 192
→ (Windows) msapplication-icon : [png] 144
→ Yandex : [svg] 120(önerilen) 32 16

Modern Favicon Örneği

# Standart favicon
<link rel="icon" type="image/x-icon" sizes="16x16" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

# Apple touch icon
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

# Android icon
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">

# Windows icon
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-TileColor" content="#ffffff">

# Web App Manifest
<link rel="manifest" href="/site.webmanifest">

OPEN GRAPH (OG)

Open Graph (OG) metaları, sosyal medya platformlarında paylaşılan içeriklerin nasıl görüneceğini belirlemek için kullanılır. Bu metalar, paylaşılan içeriğin başlığını, açıklamasını, resmini ve diğer özelliklerini belirler.

 
# Open Graph Meta Etiketleri
<meta property="og:title" content="Sayfa Başlığı" />
<meta property="og:description" content="Sayfa Açıklaması" />
<meta property="og:image" content="https://example.com/image/favicon-144x144.png" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="başlık" />
<meta property="article:modified_time" content="2024-12-22T02:00:00Z" />

# Twitter Meta Etiketleri 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="başlık" />
<meta name="twitter:creator" content="@yazar" />
<meta name="twitter:title" content="sayfa başlığı" />
<meta name="twitter:description" content="açıklama" />
<meta name="twitter:image" content="https://example.com/image/picture-144x144.png" />
<meta name="twitter:url" content="https://example.com/" />
<meta name="twitter:type" content="website" />
<meta name="twitter:date" content="2024-12-22T02:00:00Z" />

STYLESHEET

<link rel="stylesheet" href="style.css" />

type : CSS dosyasının türünü belirtir. Bu genellikle "text/css" olacaktır.
href : CSS dosyasının adresini belirtir.
media : CSS dosyasının hangi ortamlarda kullanılacağını belirtir. Örneğin, "screen" (ekran) veya "print" (yazdırma) olabilir.
title : CSS dosyasının başlığını belirtir. Bu, sayfada birden fazla CSS dosyası varsa kullanışlı olabilir.


<link rel="preload" href="style.css" importance="high" as="style" />

bu kod satırının eklenmesi sayesinde tarayıcı, CSS dosyasını önceden yükleyebilir ve sayfanın render edilmesini hızlandırabilir. Bu, özellikle büyük CSS dosyaları veya yavaş bağlantılar için yararlı olabilir.

SCRIPT

<script src="/src/js/script.js" defer>

defer :JavaScript dosyalarının yüklenmesini ve çalıştırılmasını kontrol etmek için kullanılan önemli bir araçtır. Bu atribut, tarayıcının JavaScript dosyasını HTML'in geri kalanıyla birlikte indirerek sayfanın render edilmesini engellemesini önler.

<script src="/src/js/script.js" async>

async : Tarayıcının JavaScript dosyasını HTML'in geri kalanıyla birlikte indirerek sayfanın render edilmesinin engellemesini önler. HTML ayrıştırması devam eder. Script paralel olarak yüklenir. Script hazır olduğunda hemen çalıştırılır. Sıralı çalışma garantisi yok. DOMContentLoaded'ı beklemez

HEAD TAGI Örneği

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <!-- SEO Meta Etiketleri -->
    <title>Page title</title>
    <meta name="author" content="Yazar adı" />
    <meta name="description" content="description" />
    <meta name="keywords" content="keywords" />
    <meta name="robots" content="index, follow, max-image-preview:large" />
    
    <!-- Preconnect ve DNS Prefetch -->
    <link rel="preconnect" href="https://example.com" />
    <link rel="dns-prefetch" href="https://example.com" />
    
    <!-- Canonical Link -->
    <link rel="canonical" href="https://example.com/" />
    
    <!-- Site Haritası -->
    <link rel="sitemap" type="application/xml" href="sitemap.xml">

    <!-- Stil Optimizasyonu -->
    <link rel="stylesheet" href="/src/styles/home.css"/>
    
    <!-- favicon set -->
    <link rel="icon" type="image/x-icon" sizes="16x16" href="favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <meta name="msapplication-TileImage" content="mstile-144x144.png">
    <meta name="msapplication-TileColor" content="#ffffff">
                                
    <!-- Web App Manifest  -->
    <link rel="manifest" href="/site.webmanifest">

    <!-- Open Graph Meta Etiketleri -->
    <meta property="og:title" content="Sayfa Başlığı" />
    <meta property="og:description" content="Sayfa Açıklaması" />
    <meta property="og:image" content="https://example.com/image/favicon-144x144.png" />
    <meta property="og:url" content="https://example.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="başlık" />
    <meta property="article:modified_time" content="2024-12-22T02:00:00Z" />

    <!-- Twitter Meta Etiketleri -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="başlık" />
    <meta name="twitter:creator" content="@yazar" />
    <meta name="twitter:title" content="sayfa başlığı" />
    <meta name="twitter:description" content="açıklama" />
    <meta name="twitter:image" content="https://example.com/image/picture-144x144.png" />
    <meta name="twitter:url" content="https://example.com/" />
    <meta name="twitter:type" content="website" />
    <meta name="twitter:date" content="2024-12-22T02:00:00Z" />

    <!-- Resim Optimizasyonu -->
    <link rel="preload" as="image" type="image/png" href="./image/picture.png" />
</head>

<body>
    <header></header>
    <nav></nav>
    <main></main>
    <aside></aside>
    <footer></footer>
</body>
</html>

/robots.txt Örneği

Anadizindeki /robots.txt dosyasının örneği verilmiştir. Bu dosya, arama motorlarının sitenin hangi bölümlerini dizine ekleyebileceğini ve hangi bölümleri dizine eklememesi gerektiğini belirler. Bu, sitenin SEO'sunu iyileştirmek ve arama motorlarının sitenizi daha iyi anlamasına yardımcı olmak için önemlidir. 

# example Website Robots.txt Configuration 
# Updated: 2024-12-25 
# Website: https:// example .com 
# Author: someone 
# Contact: anyone @ youwant.com 

# Global Rules
User-agent: *
Crawl-delay: 10
Allow: /
Allow: /pages/
Allow: /public/
Allow: /about/
Allow: /sitemap.xml [if you want]

# Security Restrictions
Disallow: /admin/
Disallow: /cgi-bin/
Disallow: /includes/
Disallow: /temp/
Disallow: /*.json$
Disallow: /*.txt$
Disallow: /*.xml$
Disallow: /*?*
Disallow: /*&
Disallow: /*.php$
Disallow: /*.asp$
Disallow: /*.aspx$
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /search/
Disallow: /tag/
Disallow: /*?s=*

# Media Files
Allow: /*.html$
Allow: /*.jpg$
Allow: /*.jpeg$
Allow: /*.gif$
Allow: /*.png$
Allow: /*.webp$

# Specific Bot Rules
User-agent: Googlebot
Allow: /*.js$
Allow: /*.css$

# Bing Bot Rules
User-agent: Bingbot
Crawl-delay: 10

# Yandex Bot Rules
User-agent: Yandex
Crawl-delay: 10

# Clean Parameters
Clean-param: utm_source&utm_medium&utm_campaign&utm_term&utm_content&fbclid&gclid

# Sitemaps (HTTPS Only)
Sitemap: https:// example .com/ sitemap.xml
Sitemap: https:// example .com/ sitemap-2.xml

/sitemap.xml Örneği

Anadizindeki /sitemap.xml dosyası, arama motorlarının sitenizin hangi sayfalarını dizine ekleyebileceğini belirler. Bu dosya, sitenizin SEO'sunu iyileştirmek ve arama motorlarının sitenizi daha iyi anlamasına yardımcı olmak için önemlidir.

Html sayfanızın head tagına aşağıdaki kodu ekleyin.
<!-- Site Haritası --> <link rel="sitemap" type="application/xml" href="sitemap.xml"> 

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
    xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
    xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd http://www.google.com/schemas/sitemap-image/1.1 http://www.google.com/schemas/sitemap-image/1.1/sitemap-image.xsd">

    <url>
    <loc>https:// example .com/ index.html</loc>
    <lastmod>2024-12-25T03:00:00+00:00</lastmod>
    <changefreq>daily</changefreq> <!-- değişme sıklığı: hourly daily weekly monthly yearly  -->
    <priority>1.0</priority> <!-- Öncelik: 0.0 - 1.0  -->
    </url>
</urlset>

IMG HIZLANDIRMA

Bir resmin yüklenme süresini hızlandırmak için kullanılan birkaç etiket vardır. Bu etiketler, resmin ön yüklenmesini sağlar ve sayfanın render edilmesini hızlandırabilir. Bu, özellikle büyük resimler veya yavaş bağlantılar için yararlı olabilir.

<link rel="preload" as="image" type="image/webp" importance="high" href="image.webp" />
.png veya .jpg / .jepg formatındaki resimleri webp formatında önce yüklemek için kullanılır. head tagına eklenir 

<picture>
    <source type="image/webp" srcset="image.webp" />
    <img loading="eager" decoding="sync" importance="low" src="image.png" alt="somethingg" />
</picture>