Tối ưu hoá Tweets Cards


Loại cards sẽ là các loại sau: “summary”, “summary_large_image”, “app”, or “player”.

bl

Bắt đầu với Cards

Để bắt đầu triển khai đánh dấu Thẻ, hãy chỉ định loại thẻ cho nội dung của bạn bằng cách thêm đánh dấu HTML sau vào phần HEAD của trang:

<meta name="twitter:card" content="summary"></meta>

Thuộc tính thẻ là cặp khóa-giá trị đơn giản, mỗi cặp được xác định trong thẻ meta HTML như đã thấy ở trên. Tập hợp các thuộc tính xác định trải nghiệm thẻ tổng thể trên Twitter và mỗi loại thẻ hỗ trợ và yêu cầu một tập hợp các thuộc tính cụ thể.

Tất cả các thẻ đều có một thuộc tính cơ bản chung - giá trị loại thẻ:

Thuộc tính Card Mô tả
twitter:card Loại thẻ, sẽ là “summary”, “summary_large_image”, “app”, hoặc “player”.

Chỉ hỗ trợ một loại thẻ trên mỗi trang. Nếu có nhiều hơn một twitter: giá trị thẻ tồn tại trong trang, giá trị "cuối cùng" sẽ được ưu tiên.

Phân bố thẻ và nội dung

Mỗi thẻ đều có thuộc tính nội dung tích hợp, hiển thị các tài khoản Twitter thích hợp cho nội dung theo chỉ định của bạn. Người dùng sẽ có thể theo dõi và xem hồ sơ của các tài khoản được phân bổ trực tiếp từ thẻ. Có hai loại phân bổ:

Phân bổ trang web: Cho biết tài khoản Twitter cho trang web hoặc nền tảng mà nội dung đã được xuất bản. Lưu ý rằng một dịch vụ có thể đặt các tài khoản Twitter riêng biệt cho các trang / phần khác nhau của trang web của họ và tài khoản Twitter thích hợp nhất nên được sử dụng để cung cấp ngữ cảnh tốt nhất cho người dùng. Ví dụ: nytimes.com có ​​thể đặt thuộc tính trang web thành “@nytimes” cho các bài viết trên trang chủ và “@NYTArts” cho các bài viết trong phần Nghệ thuật & Giải trí.

Ghi nhận tác giả: Cho biết người dùng cá nhân đã tạo nội dung trong thẻ. Điều này áp dụng cho thẻ Tóm tắt có hình ảnh lớn.

Định cấu hình phân bổ thẻ bằng các thuộc tính sau:

Thuộc tính Card Mô tả Bắt buộc
twitter:site @username for the website used in the card footer. Không
twitter:creator @username for the content creator / author. Không

Thu thập thông tin và lưu vào bộ nhớ cache URL

Trình thu thập thông tin của Twitter tôn trọng đặc tả robots.txt của Google khi quét URL. Nếu một trang có đánh dấu thẻ bị chặn, sẽ không có thẻ nào được hiển thị. Nếu một URL hình ảnh bị chặn, sẽ không có hình thu nhỏ hoặc ảnh nào được hiển thị.

Twitter sử dụng tác nhân người dùng của Twitterbot (với phiên bản, chẳng hạn như Twitterbot / 1.0), có thể được sử dụng để tạo ngoại lệ trong tệp robots.txt.

Ví dụ: đây là robots.txt không cho phép thu thập thông tin cho tất cả rô bốt, ngoại trừ trình tìm nạp của Twitter:

User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /

Dưới đây là một ví dụ khác, trong đó xác định thư mục nào được phép thu thập thông tin bởi Twitterbot (trong trường hợp này, không cho phép tất cả trừ các thư mục hình ảnh và lưu trữ):

User-agent: Twitterbot
Disallow: *

Allow: /images
Allow: /archives

Tệp robots.txt của máy chủ phải được lưu dưới dạng văn bản thuần túy với mã hóa ký tự ASCII. Để xác minh điều này, hãy chạy lệnh sau:

$ file -I robots.txt
robots.txt: text/plain; charset=us-ascii

Nội dung được lưu trữ bởi Twitter trong 7 ngày sau khi liên kết đến trang có đánh dấu thẻ đã được xuất bản trong Tweet.

Hiển thị thẻ

Thẻ Twitter được tạo từ thẻ meta chỉ xuất hiện khi Tweet được mở rộng trong dòng thời gian (trên web) hoặc được xem trên trang liên kết cố định cá nhân của Tweet (bằng cách nhấp vào ngày từ dòng thời gian, trên web hoặc trên thiết bị di động).

Trong những trường hợp hạn chế, Thẻ có thể xuất hiện trong dòng thời gian, chẳng hạn như trong hình ảnh được đăng lên Twitter, Định dạng quảng cáo và thử nghiệm chạy trên Twitter.

Nếu bạn đang tìm cách đưa phương tiện (ảnh, video và thẻ) vào dòng thời gian, hãy cân nhắc một trong các tùy chọn sau:

  • Tài khoản có thể ghim Tweet vào đầu dòng thời gian của chúng, tính năng này tự động mở rộng Tweet và hiển thị Thẻ. (Điều này chỉ có thể thực hiện trên web.).
  • Đối với ảnh và GIF động, hãy tải trực tiếp phương tiện lên bằng Tweet hoặc xem xét sử dụng API Twitter để tải lên phương tiện.
  • Đối với định dạng Quảng cáo có gọi hành động, hãy truy cập Quảng cáo Twitter cho Thẻ trang web.

Nhiều URL trong một Tweet

Trong một số trường hợp, người dùng có thể muốn Tweet nhiều URL. Chỉ một thẻ có thể được hiển thị trong Tweet. Đây là thứ tự ưu tiên khi xử lý nhiều URL:

  1. Hình ảnh hoặc phương tiện được đính kèm với Tweet sẽ được ưu tiên hơn bất kỳ thẻ nào được đính kèm với URL.
  2. Các URL có thẻ được xử lý theo thứ tự xuất hiện trong Tweet, đầu tiên đến cuối cùng

Twitter Cards và Open Graph

Các thẻ thẻ Twitter trông giống như các thẻ Open Graph, và dựa trên các quy ước tương tự như giao thức Open Graph. Khi sử dụng giao thức Open Graph để mô tả dữ liệu trên một trang, thật dễ dàng để tạo một thẻ Twitter mà không cần nhân đôi thẻ và dữ liệu. Khi bộ xử lý thẻ Twitter tìm kiếm các thẻ trên một trang, trước tiên nó sẽ kiểm tra thuộc tính cụ thể của Twitter và nếu không có, hãy quay lại thuộc tính Open Graph được hỗ trợ. Điều này cho phép cả hai được xác định trên trang một cách độc lập và giảm thiểu số lượng đánh dấu trùng lặp cần thiết để mô tả nội dung và trải nghiệm.

Lưu ý rằng trong khi Open Graph khuyến nghị chỉ định ánh xạ tiền tố "og" RDFa Core 1.1 CURIE thông qua <html prefix = "og: http://ogp.me/ns#">, không cần đánh dấu như vậy cho thẻ Twitter và việc sử dụng nó tiền tố twitter: trong thuộc tính tên của phần tử meta HTML. Giao thức Open Graph cũng chỉ định việc sử dụng thuộc tính và thuộc tính nội dung để đánh dấu (<meta property = "og: image" content = "http://example.com/ogp.jpg" />) trong khi thẻ Twitter sử dụng tên và nội dung. Trình phân tích cú pháp của Twitter sẽ quay trở lại sử dụng thuộc tính và nội dung, do đó không cần sửa đổi đánh dấu giao thức Open Graph hiện tại nếu nó đã tồn tại.

Ví dụ bên dưới sử dụng kết hợp thẻ Twitter và Open Graph để xác định thẻ tóm tắt:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
Hỗ trợ trực tuyến