სათაური და meta ტეგები

რას ისწავლი

• როგორ დაწერო კარგი გვერდის სათაური
• რას აკეთებს viewport და რატომ არის აუცილებელი ტელეფონისთვის
• რისთვის გჭირდება აღწერა და ჩანართის ხატულა

title: გვერდის სახელი

<title> გვერდის სახელია. ის ჩანს ბრაუზერის ჩანართზე, სანიშნეებში, ისტორიაში და, რაც ყველაზე მნიშვნელოვანია, Google-ის ძებნის შედეგებში, როგორც დაჭერადი ლურჯი სათაური. კარგი სათაური:

• მოკლეა: დაახლოებით 50–60 სიმბოლო. გრძელს საძიებო სისტემა ბოლოში მოჭრის.
• უნიკალურია: საიტის ყოველ გვერდს თავისი სათაური აქვს. თუ ათ ჩანართზე ერთი და იგივე წერია, ვერ გაარჩევ.
• მთავარს წინ სვამს: ჯერ გვერდის შინაარსი, მერე საიტის სახელი: HTML სიები — ისწავლე კოდინგი.

meta charset

უკვე იცი: <meta charset="utf-8"> ამბობს, რა კოდირებითაა ფაილი შენახული. ის <head>-ის პირველი ელემენტი უნდა იყოს, რომ ბრაუზერმა მთელი დანარჩენი ტექსტი, <title>-ის ჩათვლით, სწორად წაიკითხოს.

meta viewport: გვერდი ტელეფონზე

ეს ხაზი თითქმის ყველა თანამედროვე გვერდზეა:

<meta name="viewport" content="width=device-width, initial-scale=1">

რატომ? როცა სმარტფონები გამოჩნდა, ინტერნეტში მხოლოდ კომპიუტერისთვის შექმნილი საიტები იყო. ამიტომ ტელეფონის ბრაუზერები ცრუობენ: გვერდს ისე ხატავენ, თითქოს ეკრანი 980 პიქსელი იყოს, და მერე მთლიანად აპატარავებენ. შედეგად ტექსტი პაწაწინა ჩანს და მომხმარებელს თითებით უწევს გადიდება.

viewport ტელეფონს ეუბნება: „ჩემი გვერდი შენი ეკრანის სიგანეზეა გათვლილი, ნუ დააპატარავებ“. width=device-width ნიშნავს „სიგანე = მოწყობილობის ეკრანის სიგანე“, initial-scale=1 კი „დაიწყე გადიდების გარეშე“. ამ ხაზის გარეშე საუკეთესო დიზაინიც კი ტელეფონზე ცუდად გამოიყურება.

meta description: აღწერა ძებნისთვის

<meta name="description" content="ისწავლე HTML ნულიდან, ქართულად: ტეგები, სურათები, ბმულები და ფორმები.">

აღწერა ეკრანზე არ ჩანს, მაგრამ Google ხშირად აჩვენებს მას ძებნის შედეგში, სათაურის ქვეშ. კარგი აღწერა ერთ-ორ წინადადებაში ამბობს, რას იპოვის ადამიანი გვერდზე, და იწვევს დაჭერის სურვილს. სასურველი სიგრძე დაახლოებით 150 სიმბოლოა.

ჩანართის ხატულა

ჩანართზე სათაურის გვერდით პატარა სურათია. მას favicon-ს უწოდებენ და <link> ელემენტით მიერთდება:

<link rel="icon" href="/favicon.ico">

rel="icon" ამბობს, რა კავშირია ამ ფაილთან („ხატულა“), href კი სად არის ის.

სოციალური ქსელები

როცა ბმულს მესენჯერში ან სოციალურ ქსელში აზიარებ, ჩნდება ბარათი სურათით და სათაურით. ამას og:-ით დაწყებული meta ტეგები განსაზღვრავს, მაგალითად <meta property="og:image" content="...">. მათ ახლა დაწვრილებით არ გავარჩევთ, მაგრამ კარგია იცოდე, საიდან მოდის ეს ბარათები.

სცადე თავად

ამ რედაქტორში ჩანართი არ არის, ამიტომ <title> აქ არ გამოჩნდება. ეს ნორმალურია: ყველა ელემენტი <head>-ში ეკრანზე უხილავია. შეცვალე body-ის ტექსტი და ნახე, რომ ეკრანზე მხოლოდ ის ჩანს.

ხშირი შეცდომები

• ერთი სათაური ყველა გვერდზე. ყოველ გვერდს თავისი, შინაარსის შესაბამისი სათაური სჭირდება.
• დავიწყებული viewport. ტელეფონზე გვერდი პაწაწინა და დაპატარავებული ჩანს.
• <meta>-ს დახურვა. <meta> ცარიელი ელემენტია: </meta> არ იწერება.

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>საბავშვო წიგნები — წიგნის თარო</title>
    <meta name="description" content="ზღაპრები, თავგადასავლები და ენციკლოპედიები 6-დან 12 წლამდე ბავშვებისთვის.">
  </head>
  <body>
    <h1>საბავშვო წიგნები</h1>
  </body>
</html>

მინი-ქვიზი

შეჯამება

• <title> მოკლე, უნიკალური სახელია, რომელიც ჩანართზე და ძებნაში ჩანს.
• <meta charset="utf-8"> head-ში პირველი იწერება.
• <meta name="viewport" content="width=device-width, initial-scale=1"> გვერდს ტელეფონზე სწორ ზომას აძლევს.
• meta description ძებნის შედეგის ტექსტია, <link rel="icon"> ჩანართის ხატულა.