რომელი მნიშვნელოვანი მეტა-ტეგები უნდა იყოს დოკუმენტის head-ში?

Question

Accepted Answer

`` ტეგები `` -ში გთავაზობენ ინფორმაციას გვერდის შესახებ — სიმბოლოს კოდირება, viewport ის ქცევა, SEO აღწერილობები და სოციალური ქსელის პრევიუ. ისინი არ ხდებიან რენდერირებული, მაგრამ ბრაუზერები, საძებო სისტემები და სოციალური პლატფორმები მათ კითხულობენ. ## აუცილებელი ორი ```html ``` - **`charset`** უზრუნველყოფს, რომ ტექსტი (განსაკუთრებით non-ASCII) სწორად გაშიფრულიყო. დაასვით ის პირველი. - **`viewport`** ის ის გააკეთებს, რომ საიტი **რესპონსიული** იყო მობილურზე — მის გარეშე, ტელეფონები აკეთებენ ჩვენებას ფიქტიური 980px სიგანით და უშინდებენ, რაც არღვევს თქვენს რესპონსიულ CSS-ს. ## SEO მეტა ```html Page Title — 50–60 chars ``` `` და `description` არის ის, რაც Google-ის შედეგებში ჩანს, ამიტომ ისინი გადახრიან კლიკებს. `canonical` აცნობებს საძებო სისტემებს ავტორიტეტული URL-ის შესახებ. ## Open Graph — სოციალური ქსელის გაზიარების პრევიუ ```html <meta property="og:title" content="Shareable title" /> <meta property="og:description" content="Shown when shared" /> <meta property="og:image" content="https://site.com/preview.jpg" /> <meta property="og:url" content="https://site.com/page" /> <meta name="twitter:card" content="summary_large_image" /> ``` ეს ზეგავლენას ახდენს ბარათზე, რომელიც გამოჩნდება, როდესაც თქვენი ბმული გაზიარებულია Facebook-ზე, LinkedIn-ზე, Slack-ზე, X-ზე და ა.შ. — მათ გარეშე მიიღებთ მახინჯ ან ცარიელ პრევიუს. ## რატომ აქვს მნიშვნელობა `charset` და `viewport` თავდაზე სხვა რა არ არის მაგალითი სწორი რენდერირებისა და მობილური რესპონსიულობის; `title`/`description`/`canonical` გადახრიან SEO-ს; Open Graph ტეგები აკონტროლებენ თქვენი ბმულის გამოკრეფას გაზიარებისას. ერთად ისინი არის მეტა-მონაცემების ფენა, რომელიც გააკეთებს გვერდის სწორი რენდერირებას, რანჟირებას და კარგი გაზიარებას.