👨🏻‍💻 TechCode Azerbaijan
943 subscribers
436 photos
30 videos
155 files
1.18K links
Azərbaycanın yerli proqramlaşdırma kanalı 🇦🇿💻
Paylaşımlarımız:
💡 Proqramlaşdırma ilə bağlı məqalələr
💡 Vakansiyalar və təcrübə proqramları
💡 Kitablar və proqramlaşdırma arxivləri (MEGA, Yandex Disk)
💡 Udemy kurs endirim kuponları

Link : @techcodeaz
Download Telegram
#html #frontend #meta

#Meta tag nədir?

HTML-dəki meta teqləri (yəni <meta> teqləri) səhifə haqqında brauzerə və axtarış sistemlərinə əlavə məlumatlar təqdim etmək üçün istifadə olunur. Bu teqlər <head> hissəsində yerləşir və birbaşa istifadəçiyə görünmür, amma SEO, sosial paylaşım və brauzer davranışları üçün çox vacibdir.

Gəlin, attribute-larına baxaq:

🧠 1. charset — Simvol kodlaşdırması: saytın hansı simvol kodlaşdırmasından istifadə etdiyini bildirir. Nümunə olaraq:
<meta charset="UTF-8">

🔹 Ən geniş istifadə olunan kodlaşdırma UTF-8-dir. Azərbaycan dili simvolları da daxil olmaqla, əksər dilləri dəstəkləyir.

🔍 2. name="description" — Sayt təsviri (SEO üçün) : axtarış sistemlərinə səhifənin qısa təsvirini verir. Nümunə olaraq:
<meta name="description" content="Azərbaycan haqqında maraqlı faktlar və məlumatlar.">

🔹 Google bu təsviri axtarış nəticələrində göstərə bilər. 150-160 simvol tövsiyə olunur.

📱 3. name="viewport" — Mobil uyğunluq: Mobil cihazlarda səhifənin düzgün görünməsi üçün bu teq vacibdir. Nümunə olaraq:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

🔹 Saytın mobil cavabdeh (responsive) olmasına kömək edir.

🗣 4. name="keywords" — Açar sözlər (az təsirli, amma bəzi sistemlərdə hələ də istifadə olunur). Nümunə olaraq:
<meta name="keywords" content="Azərbaycan, tarix, mədəniyyət, turizm">

🔹 SEO üçün əvvəllər vacib idi, indi Google bu teqi nəzərə almır, amma bəzi axtarış sistemləri hələ istifadə edir.

🧾 5. name="author" — Müəllif adı. Nümunə olaraq:
<meta name="author" content="Murad Qurbanzadə">

🔹 Səhifənin müəllifini göstərir.

💻 6. http-equiv="refresh" — Avtomatik yönləndirmə. Nümunə olaraq:
<meta http-equiv="refresh" content="5; url=https://example.com">

🔹 Səhifə 5 saniyədən sonra example.com-a yönləndiriləcək. (Amma bu çox tövsiyə olunmur, çünki istifadəçi təcrübəsinə mənfi təsir göstərə bilər.)

📷 7. Open Graph (Facebook, LinkedIn, WhatsApp paylaşımı üçün). Nümunə olaraq:
<meta property="og:title" content="Azərbaycanın Gözəllikləri">
<meta property="og:description" content="Azərbaycanın təbiəti, mədəniyyəti və tarixi haqqında geniş məlumat.">
<meta property="og:image" content="https://example.com/azerbaycan.jpg">
<meta property="og:url" content="https://example.com/az">

🔹 Sosial şəbəkələrdə link paylaşarkən necə göründüyünü bu teqlər müəyyən edir.

🐦 8. Twitter Card (Twitter paylaşımı üçün). Nümunə olaraq:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Azərbaycan Turizmi">
<meta name="twitter:description" content="Azərbaycanın turizm potensialı haqqında ətraflı məlumat.">
<meta name="twitter:image" content="https://example.com/image.jpg">

🔹 Sosial şəbəkələrdə link paylaşarkən necə göründüyünü bu teqlər müəyyən edir.

Ümumən baxdıqda isə:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Azərbaycan haqqında faydalı və maraqlı məlumatlar.">
<meta name="keywords" content="Azərbaycan, mədəniyyət, turizm, tarix">
<meta name="author" content="Murad Qurbanzadə">
<meta property="og:title" content="Azərbaycan Gözəllikləri">
<meta property="og:description" content="Azərbaycanın təbiəti və mədəniyyəti haqqında məlumat.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/az">
</head>


@TechCodeAz | TechCode.Az
👍2🔥1