Tạo thẻ Open Graph 🔒 Chạy ngay trong trình duyệt — không tải lên bất cứ thứ gì.
Tạo thẻ meta Open Graph kèm thẻ xem trước liên kết trực tiếp.
Xem trước liên kết
![]()
Không có hình Thẻ meta đã tạo
Về công cụ này
Thẻ Open Graph là một nhóm thẻ `` bổ sung nhỏ trong `
` của trang, cho Facebook, LinkedIn, Discord, Slack và hầu hết các nền tảng khác biết cách hiển thị bản xem trước liên kết khi ai đó chia sẻ URL — hiển thị tiêu đề, mô tả và hình ảnh nào thay vì một liên kết trần trụi. Nếu không có chúng, hầu hết các nền tảng sẽ tự đoán từ `` của trang và hình ảnh đầu tiên, điều này thường trông sai hoặc thiếu sót.</p><p data-astro-cid-zpu62n3h>Công cụ này tạo sẵn cho bạn các thẻ `og:title`, `og:description`, `og:url`, `og:image`, `og:type` và `og:site_name` tùy chọn, cùng bản xem trước trực tiếp mô phỏng cách thẻ thường hiển thị. Vì chi tiết hiển thị (cắt hình ảnh, giới hạn ký tự, hành vi bộ nhớ đệm) khác nhau đôi chút giữa các nền tảng, vẫn nên kiểm tra kết quả cuối cùng bằng công cụ gỡ lỗi/xem trước riêng của nền tảng mục tiêu trước khi công bố rộng rãi — mọi thứ ở đây chạy cục bộ trong trình duyệt của bạn, không có gì được tải lên.</p> <h2>Câu hỏi thường gặp</h2> <div class="faq-item"> <h3>Tôi nên dùng kích thước hình ảnh nào cho og:image?</h3> <p>1200×630px là kích thước được khuyến nghị rộng rãi — nó hiển thị tốt dưới dạng thẻ lớn trên Facebook, LinkedIn và hầu hết các bề mặt xem trước liên kết mà không bị cắt xén khó coi.</p> </div><div class="faq-item"> <h3>Tại sao tiêu đề/mô tả của tôi hiển thị cảnh báo?</h3> <p>Công cụ đánh dấu tiêu đề trên 60 ký tự hoặc mô tả trên 200 ký tự, vì hầu hết các nền tảng sẽ cắt bớt văn bản dài hơn trong thẻ xem trước. Đây là gợi ý không chặn, không phải lỗi.</p> </div> </article> <nav class="related" aria-label="Công cụ liên quan"> <h2>Công cụ liên quan</h2> <div class="tool-grid"> <a class="tool-card" href="/vi/css-gradient-generator/"> <span class="icon">▧</span> <h3>Tạo Gradient CSS</h3> <p>Thiết kế gradient linear, radial, conic và copy CSS.</p> </a><a class="tool-card" href="/vi/box-shadow-generator/"> <span class="icon">❏</span> <h3>Tạo Box Shadow</h3> <p>Dựng box-shadow CSS nhiều lớp với xem trước trực tiếp.</p> </a><a class="tool-card" href="/vi/border-radius-generator/"> <span class="icon">⌒</span> <h3>Tạo Border Radius</h3> <p>Tạo góc bo tròn và hình blob hữu cơ, rồi copy CSS.</p> </a><a class="tool-card" href="/vi/flexbox-generator/"> <span class="icon">⧉</span> <h3>Tạo Flexbox</h3> <p>Thử các thuộc tính flex và copy CSS layout.</p> </a><a class="tool-card" href="/vi/css-variables-generator/"> <span class="icon">🎨</span> <h3>Tạo biến CSS</h3> <p>Tạo khối thuộc tính tùy chỉnh :root từ các cặp tên/giá trị.</p> </a><a class="tool-card" href="/vi/svg-blob-generator/"> <span class="icon">🫧</span> <h3>Tạo hình blob SVG</h3> <p>Tạo các hình blob hữu cơ, ngẫu nhiên dưới dạng đường dẫn SVG có thể tái sử dụng.</p> </a> </div> </nav> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Tôi nên dùng kích thước hình ảnh nào cho og:image?","acceptedAnswer":{"@type":"Answer","text":"1200×630px là kích thước được khuyến nghị rộng rãi — nó hiển thị tốt dưới dạng thẻ lớn trên Facebook, LinkedIn và hầu hết các bề mặt xem trước liên kết mà không bị cắt xén khó coi."}},{"@type":"Question","name":"Tại sao tiêu đề/mô tả của tôi hiển thị cảnh báo?","acceptedAnswer":{"@type":"Answer","text":"Công cụ đánh dấu tiêu đề trên 60 ký tự hoặc mô tả trên 200 ký tự, vì hầu hết các nền tảng sẽ cắt bớt văn bản dài hơn trong thẻ xem trước. Đây là gợi ý không chặn, không phải lỗi."}}]}</script> <footer class="site"> <div class="container"> <span>© alltooldev.com — Mọi thứ chạy phía client. Dữ liệu của bạn không bao giờ được tải lên.</span> <span><a href="https://dec0de.dev" rel="noopener">dec0de.dev — 18 formatters & encoders</a></span> </div> </footer> <script type="module">const a=document.getElementById("lang-select");a?.addEventListener("change",()=>{const e=a.value,t=a.dataset.path??"";window.location.href=e==="en"?`/${t}`:`/${e}/${t}`});document.getElementById("theme-toggle")?.addEventListener("click",()=>{const e=document.documentElement,t=e.dataset.theme==="dark"?"light":"dark";e.dataset.theme=t,localStorage.setItem("theme",t)});document.addEventListener("click",async e=>{const t=e.target.closest("[data-copy]");if(!t)return;const n=document.getElementById(t.dataset.copy);if(!n)return;const o="value"in n?n.value:n.textContent??"";try{await navigator.clipboard.writeText(o);const c=t.textContent;t.textContent=t.dataset.copiedLabel||"✓",t.classList.add("copied"),setTimeout(()=>{t.textContent=c,t.classList.remove("copied")},1200)}catch{}});</script> </body> </html> <script type="module" src="/_astro/open-graph-generator.astro_astro_type_script_index_0_lang.Aj92YbMh.js"></script>