Open Graph მეტა თეგების გენერატორი

Open Graph თეგები არის HTML-ის მცირე ნაწილები, რომლებიც განსაზღვრავენ, როგორ გამოიყურება თქვენი გვერდი, როცა ვინმე მას გააზიარებს Facebook-ზე, LinkedIn-ზე, Slack-ზე, Discord-ზე ან X-ზე (Twitter). შეავსეთ სათაური, აღწერა, URL, სურათი და რამდენიმე პარამეტრი ქვემოთ, უყურეთ, როგორ ახლდება გაზიარების ბარათის გადახედვა მყისიერად, და დააკოპირეთ გენერირებული <meta> თეგები პირდაპირ თქვენი გვერდის <head>-ში. ყველაფერი ხდება თქვენს ბრაუზერში — არაფერი იგზავნება სერვერზე.

რა არის ეს ხელსაწყო?

Open Graph არის პროტოკოლი, თავდაპირველად შექმნილი Facebook-ის მიერ, რომელიც ნებისმიერ ვებგვერდს საშუალებას აძლევს აღწეროს თავად თავი <meta property="og:..."> თეგების მცირე ნაკრებით, რომლებიც განთავსებულია HTML-ის <head>-ში. როცა ვინმე თქვენს ბმულს სოციალურ აპლიკაციაში, ჩატის კლიენტში ან შეტყობინებების პროგრამაში ჩასვამს, ეს აპლიკაცია კითხულობს ამ თეგებს, რათა ააგოს გადახედვის ბარათი — სათაური, აღწერა და მინიატურა — გვერდის შინაარსზე ვარაუდის ნაცვლად.

Twitter (X) იყენებს მონათესავე, მაგრამ ცალკე თეგების ნაკრებს, <meta name="twitter:...">, რომელიც კონკრეტულად აკონტროლებს, როგორ გამოიყურება ბმულის გადახედვა მის პლატფორმაზე. ვებგვერდების უმეტესობა ორივეს აყენებს: Open Graph თეგებს ფართო თავსებადობისთვის და Twitter Card თეგებს X-ზე გადახედვის დახვეწისთვის (მაგალითად, დიდი სურათის ბარათის არჩევა მცირე შეჯამების ბარათის ნაცვლად).

ამ თეგების გარეშე გაზიარებული ბმული ან საერთოდ არ აჩვენებს გადახედვას, ან პლატფორმა ცდილობს გამოიცნოს სათაური და სურათი გვერდის დაუმუშავებელი შინაარსიდან — ხშირად არჩევს არასწორ სათაურს, შემთხვევით ჩაშენებულ სურათს ან საერთოდ არაფერს. og:title, og:description და og:image-ის ცალსახად მითითება გაძლევთ სრულ კონტროლს იმაზე, თუ როგორ წარმოჩინდება თქვენი კონტენტი, სანამ ვინმე დააკლიკებს.

რატომ გამოვიყენო ის?

ცოცხალი გადახედვა — ნახეთ ზუსტად, როგორ გამოიყურება გაზიარების ბარათი წერის დროსვე, სანამ რაიმეს გამოაქვეყნებთ.
ერთდროულად აგენერირებს Open Graph თეგებსაც (og:title, og:description, og:image, og:url, og:type, og:site_name) და Twitter Card თეგებსაც.
მოიცავს ველებს, რომლებსაც პლატფორმები რეალურად კითხულობენ: სათაური, აღწერა, კანონიკური URL, სურათი, საიტის სახელი, კონტენტის ტიპი და Twitter ბარათის სტილი.
მთლიანად თქვენს ბრაუზერში მუშაობს — თქვენი სათაური, აღწერა და URL-ები ბრაუზერს არასდროს ტოვებენ.
უფასოა, შესვლა არ სჭირდება, შეზღუდვები არ არსებობს — დააკოპირეთ შედეგი და ჩასვით თქვენს HTML-ში.

როგორ გამოვიყენო

შეიყვანეთ თქვენი გვერდის სათაური და მოკლე აღწერა (მიზნად ისახეთ ~60 სიმბოლოზე ნაკლები სათაურისთვის, ~155–160 აღწერისთვის).
შეიყვანეთ გვერდის კანონიკური URL და გადახედვის სურათის აბსოლუტური URL (სურათის URL-ები უნდა იყოს სრულად კვალიფიცირებული, მაგ. https://example.com/image.jpg, და არა შედარებითი გზა).
სურვილისამებრ დააყენეთ საიტის სახელი, აირჩიეთ og:type (website, article, product, profile, video, music) და აირჩიეთ Twitter Card ტიპი (summary ან summary_large_image).
შეამოწმეთ ცოცხალი გადახედვის ბარათი, რათა დარწმუნდეთ, რომ სათაური, აღწერა და სურათი კარგად ერწყმის ერთმანეთს.
დააკლიკეთ „კოპირება“ და ჩასვით გენერირებული <meta> თეგები თქვენი გვერდის <head>-ში, დახურვის თეგამდე </head>.

მაგალითი

შეყვანა

სათაური: „10 უფასო ხელსაწყო დეველოპერებისთვის, რომელსაც ნამდვილად გამოიყენებთ“
აღწერა: „საგულდაგულოდ შერჩეული ბრაუზერზე დაფუძნებული ხელსაწყოების სია JSON-ის, რეგულარული გამოსახულებების, UUID-ებისა და სხვათათვის — ინსტალაცია არ სჭირდება.“
URL: https://example.com/blog/dev-tools
სურათი: https://example.com/images/dev-tools-cover.jpg

შედეგი

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

შედეგში მხოლოდ თქვენ მიერ შევსებული ველები ჩნდება, ასე რომ საიტის სახელის ცარიელად დატოვება უბრალოდ გამორიცხავს og:site_name-ს გამოტანილი შედეგიდან.

გავრცელებული შეცდომები, რომელთა თავიდან აცილებაც ღირს

og:image-ის სრული არარსებობა — მის გარეშე პლატფორმების უმეტესობა ან საერთოდ არ აჩვენებს გადახედვის სურათს, ან უბრუნდება გვერდიდან შემთხვევით ამოღებულ სურათს, რაც ჩვეულებრივ გატეხილად და არაპროფესიონალურად გამოიყურება.
შედარებითი სურათის გზის, მაგალითად /images/cover.jpg, გამოყენება სრული URL-ის, მაგალითად https://example.com/images/cover.jpg, ნაცვლად — სოციალური ვებ-მოძიებლები ზოგადად ვერ წყვეტენ შედარებით გზებს.
სურათის არასწორი თანაფარდობა — კვადრატული ან პორტრეტული სურათი უხერხულად იჭრება, როცა პლატფორმები მას 1,91:1 პეიზაჟურ ჩარჩოში აიძულებენ; ყოველთვის დააპროექტეთ თქვენი გაზიარების სურათი 1200×630-თან ახლოს.
სათაურები ან აღწერები, რომლებიც იჭრება — შეინახეთ og:title ~60 სიმბოლოზე ნაკლები, ხოლო og:description ~155–160 სიმბოლოზე ნაკლები, რომ არ მოიჭრას წერტილებით პლატფორმების უმეტესობაზე.
ქეშირებული გადახედვების განახლების დავიწყება — მოქმედ გვერდზე og თეგების შეცვლის შემდეგ ძველი გადახედვა შეიძლება დარჩეს Facebook-ის ან LinkedIn-ის ქეშში, სანამ ხელით არ აიძულებთ ხელახალ სკანირებას მათი გამართვის ხელსაწყოებით.

სად გამოიყენება ყოველი თეგი

og:title, og:description და og:image არის სამი თეგი, რომელსაც თითქმის ყველა პლატფორმა კითხულობს გადახედვის ასაგებად. og:url ეუბნება ვებ-მოძიებლებს, რომელ კანონიკურ ბმულთან უნდა დაუკავშირდეს გადახედვა, რაც მნიშვნელოვანია, თუ იგივე კონტენტი მრავალი URL-იდან არის ხელმისაწვდომი. og:site_name აჩვენებს პატარა ეტიკეტს (როგორიცაა გამოცემის ან ბრენდის სახელი) სათაურის ზემოთ ზოგიერთ პლატფორმაზე, მაგალითად Facebook-ზე.

og:type ცვლის, რა ტიპის ობიექტს წარმოადგენს გვერდი Open Graph-ის უფრო მდიდარი ობიექტების მოდელის მხარდამჭერი ვებ-მოძიებლებისთვის — მაგალითად, article ხსნის og:article:published_time-სა და og:article:author-ს პლატფორმებზე, რომლებიც მათ კითხულობენ, თუმცა სოციალური გადახედვების უმეტესობა უგულებელყოფს ამ დამატებით ველებს და იყენებს მხოლოდ ძირითად სამეულს — სათაური/აღწერა/სურათი.

twitter:card აკონტროლებს განლაგებას კონკრეტულად X-ზე: summary აჩვენებს პატარა კვადრატულ მინიატურას ტექსტის გვერდით, ხოლო summary_large_image აჩვენებს სრული სიგანის სურათს ტექსტის ზემოთ — ეს უკანასკნელი თითქმის ყოველთვის უკეთესი არჩევანია კონტენტისთვის, რომელსაც აზრიანი გარეკანის სურათი აქვს.

ხშირად დასმული კითხვები

რა ზომის უნდა იყოს ჩემი og:image?

1200×630px არის რეკომენდებული ზომა — საკმარისად დიდია მაღალი პიქსელური სიმჭიდროვის ეკრანებისთვის და შეესაბამება დაახლოებით 1,91:1 თანაფარდობას, რომელზეც Facebook, LinkedIn და X ჭრიან სურათს. შეინახეთ ფაილი 5–8MB-ზე ნაკლები, გამოიყენეთ JPG ან PNG, და დარწმუნდით, რომ სურათის URL არის სრული აბსოლუტური მისამართი და არა შედარებითი გზა — ვებ-მოძიების უმეტესობა ვერ გადაწყვეტს სურათების შედარებით გზებს სწორად.

რატომ არ ჩნდება ჩემი გადახედვა, როცა ვაზიარებ ბმულს?

ყველაზე გავრცელებული მიზეზებია: og:image-ის არარსებობა, შედარებითი — და არა აბსოლუტური — სურათის URL, robots.txt-ის მიერ დაბლოკილი ვებ-მოძიებელი, ან პლატფორმა აჩვენებს ძველი გადახედვის ქეშირებულ ვერსიას. Facebook და LinkedIn ორივე აგრესიულად ქეშავენ დასკანერებულ გადახედვებს — გამოიყენეთ Facebook-ის Sharing Debugger ან LinkedIn-ის Post Inspector, რათა აიძულოთ ხელახალი სკანირება თეგების განახლების შემდეგ.

რა განსხვავებაა og: თეგებსა და twitter: თეგებს შორის?

og: თეგები (og:title, og:description, og:image და ა.შ.) წარმოადგენენ Open Graph სტანდარტს, რომელსაც კითხულობენ Facebook, LinkedIn, Slack, Discord, WhatsApp და სხვა პლატფორმების უმეტესობა. twitter: თეგები არის Twitter/X-ის საკუთარი ფორმატი. თუ twitter:title ან twitter:image აკლია, X ავტომატურად უბრუნდება შესაბამის og: თეგს — მაგრამ ორივეს ცალსახად მითითება უფრო მეტ კონტროლს გაძლევთ, მათ შორის შესაძლებლობას, აირჩიოთ summary_large_image დიდი გადახედვის სურათისთვის.

რომელი og:type უნდა გამოვიყენო?

„website“ არის უსაფრთხო ნაგულისხმევი მნიშვნელობა გვერდების უმეტესობისთვის, მათ შორის მთავარი გვერდებისა და ზოგადი კონტენტისთვის. გამოიყენეთ „article“ ბლოგის პოსტებისა და ახალი ამბებისთვის (ეს ხსნის დამატებით, სტატიისთვის სპეციფიკურ თეგებს, როგორიცაა გამოქვეყნების დრო), „product“ — ელექტრონული კომერციის გვერდებისთვის, ხოლო „profile“ — პირადი ან მომხმარებლის პროფილის გვერდებისთვის. ტიპი ძირითადად გავლენას ახდენს იმაზე, თუ რომელი დამატებითი Open Graph თვისებებია ვალიდური და არა იმაზე, როგორ გამოიყურება ძირითადი გადახედვის ბარათი.

ინახავს ან აგზავნის თუ არა ეს ხელსაწყო ჩემს მონაცემებს სადმე?

არა. მთელი გენერაცია ხდება ლოკალურად თქვენს ბრაუზერში ჩვეულებრივი JavaScript-ის მეშვეობით. არაფერი, რასაც წერთ, არ გადაიცემა, არ ილოგება და არ ინახება — ჩანართის დახურვა ყველაფერს ასუფთავებს.