Paano ako gagawa ng meta tags at Open Graph tags para sa aking pahina?

Punan ang Pamagat ng pahina, Meta Description, URL ng pahina at URL ng social image. Ang mga tag ay nabubuo habang nagta-type ka. Pumili ng Format ng output (HTML, Next.js, JSX o WordPress), pagkatapos ay gamitin ang Kopyahin o I-download at i-paste ang block sa iyong head.

Gaano kahaba dapat ang aking title at meta description?

Iminumungkahi ng tool ang 30-60 karakter para sa title at 70-160 para sa description. Ang Preview ng Google search, na may mga view na Desktop at Mobile, ay nagpapakita kung kailan mapuputol ang teksto. Ang mga lapad ay isang pagtataya dahil pinuputol ng Google ayon sa mga pixel.

Bakit walang ipinapakitang imahe o maling larawan ang aking link preview?

Ang URL ng imahe ay karaniwang nawawala, gumagamit ng http://, hindi naaabot ng publiko, o ang platform ay nag-cache ng lumang preview. Inirerekomenda ng tool ang 1200x630 px, mas mababa sa 5 MB, bilang isang absolute na https:// link, at nagbabala kapag ang ratio o laki ay mali.

Maaari ko bang suriin ang mga meta tag ng isang pahinang mayroon na ako?

Oo. Buksan ang Mag-import mula sa kasalukuyang HTML, i-paste ang head ng pahina o buong HTML, at i-click ang Punan ang form mula sa HTML. Ang seksyon ng Audit ay maglilista ng mga isyu. Ang pag-parse ay tumatakbo sa iyong browser at hindi nagpapatakbo ng mga script o kumukuha ng anuman.

Ipinapadala ba ng generator ang aking mga detalye ng pahina sa isang server?

Hindi. Ang mga tag ay binuo sa iyong browser at ang na-paste na HTML ay binabasa gamit ang DOMParser ng browser, na hindi nagpapatakbo ng mga script o gumagawa ng mga kahilingan sa network. Tanging ang preview ng imahe ang naglo-load ng URL ng imahe na iyong nai-type.

Oo. Libre ang bawat tool, walang account at walang credit card. Ang trabaho ay tumatakbo sa iyong device sa halip na sa aming mga server, kaya ito nananatiling libre.

Gumagana ba ito sa mobile?

Oo. Gumagana ito sa mga kasalukuyang mobile browser sa iOS at Android, nang walang ini-install.

🏷️

Libreng Meta Tag at Open Graph Generator

Gumawa ng mga SEO meta tag, Open Graph, at Twitter Card markup na may live na Google at social-share preview. Kopyahin nang direkta sa iyong page head.

Tumatakbo sa iyong browserWalang pag-sign up, walang pop-upHindi kailangan ng loginLibre magpakailanman

Gumagana offline kapag na-load na

Pamagat ng pahina0 · 0/580px

URL ng pahina

Meta Description0 · 0/920px

URL ng social image

Pinakamainam: 1200×630 px, wala pang 5 MB, absolute na https:// link.

Pangalan ng site

Twitter/X handle

Handle ng may-akda sa Twitter/X

Uri ng Twitter card

Uri ng Open Graph

Isama rin

Isama ang canonical link (gumagamit ng page URL)Charset at mobile viewportPaalala na itakda ang <html lang> sa tlog:locale (wika ng pahina)Link ng faviconTheme color (bar ng browser sa telepono)

Pag-index ng search engine

Pamagat 0/580px (target 30-60)Paglalarawan 0/920px (target 70-160)

Preview ng Google search

example.com

Lilitaw dito ang pamagat ng iyong pahina

Lilitaw dito ang iyong meta description. Gawing nakaka-engganyo ito para mapabuti ang click-through rate mula sa mga resulta ng paghahanap.

Tantiya lang ang mga lapad: pumuputol ang Google ayon sa pixel, hindi sa karakter.

Preview ng social card

Preview ng og:image

example.com

Pamagat ng pahina

Paglalarawan ng pahina

I-paste sa iyong <head>

Punan ang kahit isa sa mga field sa itaas upang makabuo ng meta tags.

Mga karaniwang gamit

Meta Tags para sa Blog PostsLumikha ng title, description, at social tags upang maganda ang iyong mga artikulo kapag ibinabahagi.
Meta Tags para sa Pahina ng ProduktoGawing maganda ang pagbabahagi ng mga pahina ng produkto at basahin nang maayos sa mga resulta ng paghahanap.
Meta Tags para sa Landing PagesKontrolin ang eksaktong paano lumilitaw ang iyong mga kampanya landing pages kapag ibinabahagi at hina-search.
Lumikha ng Meta Tags para sa Anumang Web AppMabilis na mag-scaffold ng buong hanay ng head meta tags para sa isang bagong pahina o site.
Ayusin ang Pangit na Link PreviewsItigil ang pagpapakita ng iyong mga link bilang bare URLs — idagdag ang mga tag na lumilikha ng rich preview cards.

Paano ito Gumagana

Direktang nangyayari sa iyong browser ang lahat ng pagbuo ng tag at pag-parse ng head — walang server. Gumagamit ang tool ng useMemo ng React para reaktibong buuin ang mga HTML string at ng native na DOMParser API ng browser para basahin ang umiiral na markup ng pahina para sa import/audit na feature.

1
Pinapatakbo ng form input ang live na pagbuo
Habang nagta-type ka, agad binubuo ulit ng isang useMemo hook ang buong tag block — title, meta description, mga Open Graph property, at mga Twitter Card attribute — ine-escape ang mga espesyal na character (&, <, >, ") kaya ligtas i-paste direkta sa HTML ang output.
2
Pag-validate ng URL gamit ang URL constructor ng browser
Vina-validate ang bawat URL field (URL ng pahina, social image) gamit ang built-in na URL constructor ng browser. Mga maayos na http:// o https:// address lang na may hostname na may tuldok ang pumapasa; hinaharangan ng mga di-wastong halaga ang copy button at nagpapakita ng inline na error.
3
Import: binabasa ng DOMParser ang umiiral na head markup
Kung magpe-paste ka ng umiiral na <head> HTML para i-audit, pinapatakbo ito ng tool sa DOMParser sa inert mode — walang script na tumatakbo at walang network request. Pagkatapos, hinahanap nito sa na-parse na dokumento ang mga kilalang meta selector (og:title, twitter:description, canonical link, atbp.) at pinupunan ang mga form field ng anumang nahanap nito.
4
Live na preview ng Google at social card
Nagre-render ang tool ng naka-istilong resulta ng Google search at preview ng Open Graph card nang real time gamit ang parehong form state, kaya makikita mo mismo kung paano puputulin ang title at description bago mo kopyahin ang output.

Mga Kaugnay na Tool

📐

Pang-resize ng Larawan para sa Social Media

Baguhin at i-crop ang mga larawan sa eksaktong 2026 na laki para sa Instagram, YouTube, TikTok, X, Facebook, LinkedIn at Pinterest — may mga gabay sa safe-zone at batch ZIP. 100% sa iyong browser, walang upload.

SubukanLokal ang mga file

🎼

Audio Tag Editor (ID3)

I-edit ang mga MP3 ID3 tag — pamagat, artist, album, taon, genre at cover art — 100% sa iyong browser. Walang upload, at ang audio ay hindi nire-re-encode. Libre at pribado.

SubukanLokal ang mga file

🔗

Gumagawa ng Slug

I-convert ang anumang pamagat o teksto sa isang URL-friendly na slug. Perpekto para sa mga blog post, CMS page, at mga URL na na-optimize sa SEO.

Subukan