Thẻ meta đồ thị mở: Mọi thứ bạn cần biết

Tự hỏi làm thế nào để làm cho nội dung của bạn có thể nhấp, có thể chia sẻ và đáng chú ý hơn trên phương tiện truyền thông xã hội?

Thẻ meta đồ thị mở là giải pháp.

Đây là giao diện của một trong những bài đăng của chúng tôi khi được chia sẻ trên Facebook Với Mở thẻ Meta đồ thị:

Ảnh chụp màn hình 2020 01 06 lúc 20.55.25 1

Và đây là những gì nó trông giống như không có:

hợp nhất fb ma thuật 1

Trong hướng dẫn này, bạn sẽ học:

Thẻ meta đồ thị mở là gì?

Thẻ meta Open Graph là các đoạn mã kiểm soát cách URL được hiển thị khi được chia sẻ trên phương tiện truyền thông xã hội.

Chúng là một phần của giao thức Open Graph của Facebook và cũng được sử dụng bởi các trang mạng xã hội khác, bao gồm cả LinkedIn và Twitter (nếu không có Thẻ Twitter).

Bạn có thể tìm thấy chúng trong <head> Phần của một trang web. Bất kỳ thẻ nào có og: Thẻ Open Graph được đặt trước tên thuộc tính.

Dưới đây là một số ví dụ từ hướng dẫn của chúng tôi để có được một SEO Chuyên gia:

<meta property="og:title" content="How to Become an SEO Expert (8 Steps)" />
<meta property="og:description" content="Get from SEO newbie to SEO pro in 8 simple steps." />
<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2019/12/fb-how-to-become-an-seo-expert.png" />

Đây là những gì các thẻ này trông giống như trên Facebook:

thẻ og 1

Tại sao thẻ Open Graph lại quan trọng?

Mọi người có nhiều khả năng xem và nhấp vào nội dung được chia sẻ với tầng 1 Thẻ, có nghĩa là nhiều lưu lượng truy cập mạng xã hội hơn vào trang web của bạn.

Có ba lý do cho điều này:

  1. Họ làm cho nội dung trên các nguồn cấp dữ liệu mạng xã hội trở nên đáng chú ý hơn.
  2. Bạn nói nhanh cho mọi người biết nội dung nói về cái gì.
  3. Chúng giúp Facebook hiểu nội dung nói về điều gì, điều này có thể giúp tăng khả năng hiển thị thương hiệu của bạn thông qua các lượt tìm kiếm.

Hãy tập trung nhiều hơn vào điểm cuối cùng vì nó có xu hướng bị bỏ qua.

Đây là kết quả của một tìm kiếm trên Facebook cho “công cụ tìm kiếm thay thế”:

IMG 0522 1

Nó hiển thị các bài báo phổ biến đã được chia sẻ trên Facebook. Mọi tiêu đề và hình ảnh đều đến từ các thẻ Open Graph.

Ngay cả khi không có bài viết nào được trả lại để tìm kiếm, Facebook vẫn sẽ hiển thị nội dung phù hợp được chia sẻ trong các nhóm hoặc trang mà bạn theo dõi hoặc bởi bạn bè.

Ghi chú bên lề.

Thẻ Open Graph cũng giúp tạo một đoạn mã khi ai đó gửi cho bạn một liên kết qua tin nhắn trực tiếp bằng các ứng dụng hỗ trợ giao thức Open Graph – tất nhiên là Messenger và WhatsApp của Facebook, nhưng cả iMessage và Slack.

Bạn nên sử dụng thẻ đồ thị mở nào?

Facebook danh sách 17 tầng 1 Các thẻ trong tài liệu chính thức của họ cũng như hàng chục loại đối tượng. Chúng tôi sẽ không thảo luận về điều này. Facebook chỉ cần có bốn điều để hiểu những điều cơ bản về trang của bạn và có một số trang khác đôi khi sẽ giúp ích cho bạn.

Hãy đi qua điều này.

og: tiêu đề

Tiêu đề trang của bạn.

cú pháp

<meta property="og:title" content="Open Graph Meta Tags: Everything You Need to Know" />

Cách hành động được đề xuất

  • Thêm nó vào tất cả các trang “có thể chia sẻ”.
  • Tập trung vào độ chính xác, giá trị và khả năng nhấp.
  • Giữ nó ngắn gọn để tránh tràn. Không có hướng dẫn chính thức về cách thực hiện việc này, nhưng 40 ký tự cho thiết bị di động và 60 cho máy tính để bàn là đúng.
  • Sử dụng tiêu đề thô. Không thêm thương hiệu (ví dụ: tên trang web của bạn).

og: URL

Các Url của nội dung.

cú pháp

<meta property="og:url" content="https://ahrefs.com/blog/open-graph-meta-tags/" />

Cách hành động được đề xuất

  • Sử dụng trang chuẩn Url. Nó giúp giữ tất cả dữ liệu liên quan, chẳng hạn như B. Thích hợp nhất trên tất cả các URL trùng lặp.

ở trên: hình ảnh

Các Url của một hình ảnh cho đoạn mã xã hội.

Lưu ý rằng có thể đây là ngày quan trọng nhất của Open Graph bởi vì nó chiếm phần lớn bất động sản nguồn cấp dữ liệu xã hội.

cú pháp

<meta property="og:image" content="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />

Cách hành động được đề xuất

  • Sử dụng hình ảnh tùy chỉnh cho các trang “có thể chia sẻ” (ví dụ: trang chủ, bài viết, v.v.)
  • Sử dụng biểu trưng của bạn hoặc hình ảnh thương hiệu khác cho các trang còn lại của bạn.
  • Sử dụng hình ảnh có tỷ lệ khung hình là 1,91: 1 và kích thước tối thiểu được khuyến nghị là 1200 x 630 để có độ rõ nét tối ưu trên tất cả các thiết bị.

og: loại

Loại đối tượng bạn đang chia sẻ. (ví dụ: bài báo, trang web, v.v.)

cú pháp

<meta property="og:type" content="article" />

Cách hành động được đề xuất

  • Sử dụng từng bài báo và trang web cho các trang còn lại của bạn.
  • Nếu cần, hãy mô tả thêm các loại đối tượng (tùy chọn).

og: mô tả

Một bản tóm tắt ngắn gọn.

cú pháp

<meta property="og:description" content="Learn about 13 features that set Ahrefs apart from the competition." />

Cách hành động được đề xuất

  • Thêm tiêu đề để làm cho đoạn mã hấp dẫn và dễ nhấp nhất có thể.
  • Sao chép mô tả meta của bạn ở đây nếu nó có ý nghĩa.
  • Giữ nó ngắn và ngọt ngào. Facebook đề xuất 2-4 câu, nhưng điều này thường bị cắt bỏ.

og: locale

Xác định ngôn ngữ nội dung.

cú pháp

<meta property="og:locale" content="en_GB" />

Cách hành động được đề xuất

  • Chỉ sử dụng cho nội dung không phải bằng tiếng Anh Mỹ (en_US). Facebook giả định rằng nội dung không có thẻ này được viết bằng ngôn ngữ này.

Cách thiết lập thẻ Open Graph

Chọn nền tảng trang web của bạn từ danh sách bên dưới hoặc làm theo các hướng dẫn thủ công này.

Đặt thẻ biểu đồ mở trong WordPress

Cài đặt yoasts SEO Cắm vào. Chuyển đến trình chỉnh sửa cho một bài đăng hoặc trang, sau đó cuộn xuống. Bạn sẽ thấy một yoast SEO Cái hộp. Nhấp vào tab Xã hội, sau đó nhấp vào Facebook.

Điền vào phần này để thiết lập og:title, og:descriptionog:image Từ khóa.

Ảnh chụp màn hình 2019 12 17 lúc 22.46.26 1

Nó không cần phải được thiết lập og:url thủ công. Yoast làm điều này cho bạn. Nó cũng bổ sung những cái hữu ích khác tầng 1 Các thẻ như kích thước hình ảnh.

Ghi chú bên lề.

Nếu bạn không có tầng 1 hình ảnh và bài đăng có chứa hình ảnh nổi bật, Yoast sử dụng hình ảnh này theo mặc định. Nó cũng bổ sung thêm các thẻ Open Graph và Twitter Card khác mà sẽ rất lãng phí thời gian để thiết lập theo cách thủ công – tên trang web, kích thước hình ảnh, v.v.

Nó cũng là một phương pháp hay nhất để thiết lập một trang web og:image Nhãn. Điều này được hiển thị khi không có thẻ tùy chỉnh nào được đặt cho thẻ được chia sẻ Url.

Bạn sẽ tìm thấy tùy chọn để thực hiện việc này trong cài đặt của Yoast.

Yoast> Xã hội> Facebook

Đảm bảo công tắc được đặt thành Đã bật, sau đó tải lên hình ảnh thích hợp. Hình ảnh thương hiệu hoạt động tốt nhất ở đây.

Ảnh chụp màn hình 2019 12 17 lúc 22 37 47 1

Đặt thẻ biểu đồ mở trong Shopify

Hầu hết các chủ đề Shopify đều kéo tầng 1 Thẻ từ các biến như thẻ tiêu đề của bạn cho og:title và hình ảnh được đề xuất cho og:image.

Thẻ duy nhất bạn có thể tùy chỉnh thông qua Shopify giao diện người dùng là một trang web rộng og:image.

Đi đến Cửa hàng trực tuyến> Chủ đề> Tùy chỉnh> Cài đặt chủ đề> Tùy chỉnh> Truyền thông xã hội> Chọn một hình ảnh phù hợp.

Nếu bạn muốn xem nó được thiết lập như thế nào, hãy truy cập Cửa hàng trực tuyến> Chủ đề> Tác vụ> Chỉnh sửa mã> Đoạn mã> xã hội-meta-tags.liquid trong thanh cuộn. Bạn có thể chỉnh sửa mã nếu cần.

Đặt thẻ biểu đồ mở trong Wix

Wix kéo nhau tầng 1 Thẻ từ các biến khác, chẳng hạn như tiêu đề meta và mô tả của trang.

Bạn có thể tùy chỉnh điều đó tầng 1 Tiêu đề, mô tả và hình ảnh cho mỗi trang trong cài đặt “Chia sẻ trên mạng xã hội”.

Bạn cũng có thể đặt một tùy chỉnh trên toàn bộ trang web tầng 1 Hình ảnh. Đi đến Cài đặt> Chia sẻ xã hội trong menu chính.

Nhìn chung, Wix thực hiện việc thêm tầng 1 Thẻ dễ dàng như không có gì phải được mã hóa cứng.

Đặt thẻ biểu đồ mở trong Squarespace

Squarespace sử dụng tiêu đề trang và mô tả meta cho og:titleog:description.

Bạn có thể đặt một tùy chỉnh og:image Từng trang từng trang.

Chỉ cần đi đến Cài đặt trang web> Hình ảnh xã hội> Tải lên.

Nếu bạn cần thêm những người khác tầng 1 Gắn thẻ và điều chỉnh cài đặt mặc định, đi tới Cài đặt trang> Nâng cao> Chèn đầu trang. Đọc phần bên dưới về cách thêm thẻ theo cách thủ công và sao chép mã vào đó.

Cài đặt thủ công các thẻ Open Graph

Khi bạn đã quen với mã trang web, hãy thêm: tầng 1 Các thẻ dễ dàng như chèn chúng vào <head> Phần của trang web của bạn.

Cân nhắc sử dụng công cụ tạo đánh dấu như Thẻ Mega hoặc Công cụ mã web để giảm lỗi cú pháp.

Cách kiểm tra và gỡ lỗi thẻ biểu đồ mở

Bây giờ bạn đã triển khai tất cả các thẻ, bạn cần đảm bảo rằng chúng đang hoạt động như mong đợi và sẵn sàng được chia sẻ.

Để làm điều này, hãy sử dụng các công cụ sau:

Tất cả chúng đều hoạt động như nhau. Họ kéo các thẻ ra khỏi trang và hiển thị nó trông như thế nào khi được chia sẻ.

Kiểm tra cũng giúp tránh các vấn đề với những tầng 1 Các thẻ không được hiển thị hoặc kéo một cách chính xác.

TIỀN BOA

Để sử dụng og:image:widthog:image:height Các thẻ để đảm bảo một đoạn mã hoàn hảo ngay lần đầu tiên được chia sẻ. Trong WordPress, Yoast sẽ tự động thêm chúng. Đây là cú pháp của chúng:

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Đây là những gì FB Chia sẻ trình gỡ lỗi trông giống như sau:

Ảnh chụp màn hình 2019 12 17 lúc 23:31:50 1

Điều quan trọng nhất là đoạn mã trông như thế nào. Nếu bạn bỏ lỡ các thẻ ít quan trọng hơn hoặc thiết lập chúng không chính xác, đây không phải là vấn đề lớn. Bạn có thể bỏ qua các cảnh báo về các thẻ không quan trọng, chẳng hạn như: fb:app_id

Nếu có gì đó sai và bạn cập nhật các thẻ, hãy sử dụng nút cào lại để nhận dữ liệu mới. Nếu bạn không thấy thay đổi sau khi thu thập thông tin, hãy sử dụng trình vô hiệu hóa hàng loạt để xóa bộ nhớ cache và thử lại.

Lặp lại quy trình này với Trình xác thực thẻ Twitter và Trình kiểm tra bài đăng trên LinkedIn để đảm bảo nội dung của bạn trông như ý muốn trên tất cả các mạng.

Ghi chú bên lề.

Tôi nhận thấy rằng chỉ có twitterbot đang làm theo hướng dẫn của robots.txt. Cả hai trình thu thập thông tin của Facebook và LinkedIn đều có thể tìm và xem nội dung ngay cả khi bạn không cho phép thu thập thông tin. Điều đó thật đáng ngạc nhiên, nhưng ngay cả đối với Twitter, hãy đảm bảo rằng bất kỳ URL nào bạn chia sẻ đều có thể thu thập thông tin được.

Nếu bạn đã có một trang với hàng trăm trang và bạn không chắc trang nào đã có thẻ Open Graph, bạn có thể sử dụng một công cụ như Kiểm tra trang của Ahrefs để kiểm tra hàng loạt các trang của mình.

Chỉ cần thu thập thông tin, sau đó đi tới báo cáo Thẻ xã hội để xem bất kỳ vấn đề nào liên quan đến thẻ Biểu đồ mở và Thẻ Twitter.

Ảnh chụp màn hình 2020 01 12 ngày 23.16.01 1

Nhấp vào một cảnh báo được đánh dấu để xem giải thích và lời khuyên về cách giải quyết nó.

Ảnh chụp màn hình 2019 12 18 lúc 00.39.44 1

Nhấp vào “Xem các URL bị ảnh hưởng” và bạn sẽ thấy các vấn đề ảnh hưởng đến từng URL Url cùng với các chỉ số có liên quan. Một trong những số liệu này là lưu lượng truy cập không phải trả tiền, bạn có thể sử dụng để sắp xếp bảng và ưu tiên các URL cần sửa.

Ảnh chụp màn hình 2020 01 12 lúc 23 19 24 1

Hãy nhớ rằng, các trang có nhiều lưu lượng truy cập có nhiều khả năng được chia sẻ nhất.

Suy nghĩ cuối cùng

tầng 1 Thẻ rất quan trọng đối với sự hiện diện trên mạng xã hội của bạn, nhưng bạn không cần phải dành nhiều thời gian cho chúng.

Tập trung vào việc học những điều cơ bản. Thêm thẻ, kiểm tra các bản xem trước trên mạng xã hội và gỡ lỗi.

Chúng ta đã bỏ lỡ điều gì đó? Để lại bình luận hoặc ping cho tôi Twitter.


Nguồn: Ahrefs

Trả lời

Chat Zalo