Skip to main content

Алатка за преглед на Open Graph

Внесете ги вашите Open Graph и Twitter Card мета ознаки за да прегледате како ќе изгледа вашата страница кога ќе се сподели на Facebook и Twitter.

Ad (leaderboard)

Open Graph ознаки

Twitter Card ознаки

Резултат
Должина на насловот
Должина на описот

Преглед за Facebook

Кликнете на "Генерирај преглед" за да го видите прегледот за Facebook

Преглед за Twitter

Кликнете на "Генерирај преглед" за да го видите прегледот за Twitter
Rate this tool
0.0 / 5 · 0 ratings

Embed This Calculator

Add this calculator to your website for free. Copy the single line of code below and paste it into your HTML. The calculator auto-resizes to fit your page.

<script src="https://calchammer.com/embed.js" data-calculator="open-graph-preview" data-category="everyday"></script>
data-theme "light", "dark", or "auto"
data-values Pre-fill inputs, e.g. "amount=1000"
data-max-width Max width, e.g. "600px"
data-border "true" or "false"
Or use an iframe instead
<iframe src="https://calchammer.com/embed/everyday/open-graph-preview" width="100%" height="500" style="border:none;border-radius:12px;" title="Og Preview Calculator"></iframe>

Preview

yoursite.com/blog
Og Preview Calculator auto-resizes here
Ad (in_results)

Разбирање на Open Graph ознаките

Протоколот Open Graph беше воведен од Facebook во 2010 година за да им овозможи на веб-страниците да станат богати објекти во социјалниот граф. Кога некој споделува URL на Facebook, LinkedIn, Pinterest или други социјални платформи, платформата ја преземе страницата и ги чита нејзините Open Graph мета ознаки за да определи кој наслов, опис, слика и други метаподатоци да ги прикаже во прегледот за споделување. Без овие ознаки, платформите се обидуваат да погодат од содржината на страницата, што често резултира со лоши прегледи со отсутни слики, скратени наслови или неважни описи.

Протоколот дефинира четири задолжителни својства: og:title (насловот на страницата), og:type (типот на објектот, како "website" или "article"), og:image (URL на сликата за прикажување) и og:url (каноничката URL). Дополнителни опционални својства вклучуваат og:description, og:site_name, og:locale и ознаки специфични за медиуми за видео и аудио содржина. Овие ознаки се поставуваат во <head> секцијата на вашиот HTML како <meta property="og:..." content="..."> елементи.

Ad (in_content)

Twitter Cards

Twitter користи свој систем на мета ознаки наречен Twitter Cards, но ги користи Open Graph ознаките како резервни кога ознаките специфични за Twitter не се присутни. Ознаката twitter:card е најважна, контролирајќи го форматот на прикажување. Типот на картичка "summary" прикажува мала квадратна слика до насловот и описот, погоден за општа содржина. Типот на картичка "summary_large_image" прикажува голема правоаголна слика над насловот и описот, идеален за блог постови, статии и визуелна содржина која има корист од истакнат преглед на сликата.

Ознаките специфични за Twitter како twitter:title, twitter:description и twitter:image ги заменуваат нивните Open Graph еквиваленти на Twitter. Ако овие не се поставени, Twitter автоматски ги користи og:title, og:description и og:image како резервни. Ова значи дека треба да додадете ознаки специфични за Twitter само кога сакате прегледот на Twitter да се разликува од прегледот на Facebook. Ознаката twitter:site исто така може да го специфицира вашиот Twitter идентификатор за прикажување со картичката.

Најдобри практики за слики

Сликата за преглед е најважниот елемент од социјалното споделување. Facebook препорачува слики од најмалку 1200 x 630 пиксели за екрани со висока резолуција, со минимум од 600 x 315 пиксели. Twitter summary_large_image картичките најдобро функционираат со 1200 x 628 пиксели во однос 2:1. Одржувајте ја големината на датотеките под 5 MB. Користете JPEG за фотографии и PNG за графики со текст или транспарентност. Избегнувајте слики со прекумерен текст, бидејќи Facebook може да го намали дофатот на објави со слики кои содржат повеќе од 20 проценти текстуален преклоп. Секогаш тестирајте ги вашите слики со алатките за дебагирање на платформите пред објавување.

Дебагирање и валидација

Социјалните платформи агресивно ги кешираат споделените URL адреси, затоа промените на вашите OG ознаки може да не се појават веднаш. Sharing Debugger на Facebook ви овозможува повторно да ја скенирате URL адресата за освежување на кешот и да видите точно како вашите ознаки се анализираат. Card Validator на Twitter го прикажува прегледот на вашата Twitter Card и го валидира означувањето. Post Inspector на LinkedIn врши слична валидација. По ажурирањето на OG ознаките, секогаш скенирајте ја URL адресата со овие алатки за да го избришете кешираниот преглед. Вообичаени проблеми вклучуваат релативни URL адреси на слики (секогаш користете апсолутни URL адреси), отсутни задолжителни ознаки, премали слики и грешки со SSL сертификат кои го спречуваат ботот на платформата да ја преземе сликата.

Често поставувани прашања

Што се Open Graph ознаки?

HTML мета ознаки кои го контролираат изгледот на URL адресите при споделување на социјалните мрежи. Го специфицираат насловот, описот, сликата и URL адресата за прегледите при споделување на Facebook, LinkedIn и други платформи.

Зошто се важни Open Graph ознаките?

Без нив, социјалните платформи погодуваат што да прикажат, што често резултира со лоши прегледи. Правилните OG ознаки ги зголемуваат стапките на кликнување и обезбедуваат конзистентност на брендот при социјално споделување.

Што е twitter:card мета ознаката?

Контролира како содржината се прикажува на Twitter. "summary" прикажува мала слика, "summary_large_image" прикажува голема слика во банер. Twitter ги користи OG ознаките како резервни за насловот, описот и сликата ако ознаките специфични за Twitter отсуствуваат.

Која големина на слика да се користи?

Facebook препорачува минимум 1200 x 630 пиксели. Форматот Twitter summary_large_image најдобро функционира со 1200 x 628 пиксели (однос 2:1). Одржувајте ги датотеките под 5 MB. Користете апсолутни URL адреси и формат JPEG или PNG.

Како да ги дебагирате Open Graph ознаките?

Користете го Sharing Debugger на Facebook, Card Validator на Twitter или Post Inspector на LinkedIn. Овие алатки покажуваат како платформите ги анализираат вашите ознаки и ви овозможуваат да ги освежите кешираните прегледи.

Related Calculators

Disclaimer: This calculator is for informational and educational purposes only. Results are estimates and should not be considered professional expert advice. Consult a qualified professional before making decisions based on these calculations. See our full Disclaimer.