Bạn có bao giờ tự hỏi làm thế nào để bài viết của bạn khi được chia sẻ trên MXH sẽ đẹp hơn và “chuẩn” hơn ? Có những thẻ meta được sử dụng nhằm giúp cho các mạng xã hội nói chung có thể dễ dàng nắm bắt được những gì bạn đang thể hiện trên webste và hiển thị đúng vị trí chúng nên xuất hiện. Những thẻ đó thường được gọi là social media meta tag hay Open Graph Tags
Các thẻ này có thể là một nổ lực của bạn để giúp các bộ máy của MXH hiểu rõ hơn những gì bạn công bố qua việc chia sẻ liên kết trên website. Những MXH mà bạn cần phải quan tâm có thể là Twitter, Facebook, Google+ và Pinerest… và cái bạn cần là chúng hiển thị chính xác tiêu đề, mô tả, hình ảnh … mỗi khi bạn đặt một liên kết lên mạng xã hội.
Dĩ nhiên, việc này làm tăng tỉ lệ click chuột lên liên kết của bạn hơn so với không tối ưu hóa, qua đó mang lại cho bạn một phần traffic cũng như góp phần đưa blog của bạn đến với người dùng hơn. Ngoài ra, những nghiên cứu của các chuyên gia tại Moz cũng chỉ ra rằng các tag này có ảnh hưởng đến SEO.
Bạn hãy nhìn vào hình minh họa:
Social Media Meta TagHiểu rõ hơn về tác động và loại social media meta tag có thể là rất khó, ngay cả đối với những webmaster đã có nhiều kinh nghiệm tương tác trên các mạng xã hội. Hình ảnh trên có thể giúp bạn phần nào để hiểu về giá trị mà các social media meta tag mang lại. Giờ đây, chúng ta thử xem các mạng xã hội hỗ trợ những tag phổ biến nào.
Lần theo dấu vết của trang dành cho nhà phát triển ở từng mạng xã hội cụ thể, tôi tìm ra được danh sách các tag mà các mạng xã hội này hỗ trợ như sau:
- Twitter Cards: Summaries(phần mô tả liên kết), Images, Galleries, Apps, Video, Audio, và Products.
- Pinterest Rich Pins: sản phẩm, Recipes, Movies, và Articles
- Google+: Articles, Blog, Book, Event, Local Business, Organization, Person, Product, và Reviews
- Facebook: Articles, Photos, Audio, Video, và một vài thứ khác.
Bây giờ bạn đã biết chúng hỗ trợ những gì, vấn đề của chúng ta là làm thế nào để các mạng xã hội hiểu được và sử dụng các thẻ mà chúng ta đưa vào một cách chính xác, cũng như cách thiết lập các thẻ đó như thế nào.
Để giảm bớt phiền hà cho các bạn, tôi đã soạn sẵn một số mẫu thẻ để bạn sử dụng ngay. Việc của bạn là điền những thông tin cần thiết khi xuất bản nội dung ra mà thôi.
Hãy nhớ rằng trước khi chúng ta hoàn tất, bạn nên kiểm tra trên header của website đã có những thẻ này chưa nhé.
Phụ mục
1. Social Media Meta Tag thu gọn
Sau đấy sẽ là một khuôn mẫu chung để bạn co thể sử dụng chung cho toàn bộ các mạng xã hội. Nó chứa những tag chung nhất mà bất kỳ mạng xã hội nào cũng có thể hiểu được. Cho nên bạn có thể áp dụng nó cho Twitter, Facebook, Google+ và Pinterest đều được.
Ở đây, thẻ title và thẻ description về căn bản không phải là social media meta tag, nhưng nhìn chung chúng đều có thể được hiểu ở tất cả các mạng xã hội cũng như trên trình duyệt.
[code lang=”html”] <!– đưa đoạn mã sau vào bên dưới thẻ <head> trong website –><title>Tiêu đề trang, tối đa 60-70 ký tự</title>
<meta name="description" content="Phần mô tả, tối đa 155 ký tự" />
<!– Twitter Card data –>
<meta name="twitter:card" value="summary">
<!– Open Graph data –>
<meta property="og:title" content="Tiêu đề />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Mô tả trang" />
[/code]
2. Social Media Meta Tag chuẩn
Bộ tag chuẩn sẽ hỗ trợ mạnh mẽ hơn cho các mạng xã hội và dĩ nhiên có thể làm việc trên hầu hết các mạng xã hội phổ biến. Nó bao gồm bộ Social Media Meta Tag thu gọn và mở rộng thêm một số thẻ mới theo từng mạng xã hội cụ thể khác.
[code lang=”html”]
<!– đưa đoạn mã sau vào bên dưới thẻ <head> trong website –>
<title>Tiêu đề trang, tối đa 60-70 ký tự</title>
<meta name="description" content="Phần mô tả, tối đa 155 ký tự" />
<!– Twitter Card data –>
<meta name="twitter:card" value="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Tiêu đề trang>
<meta name="twitter:description" content="Mô tả trang nhỏ hơn 200 ký tự">
<meta name="twitter:creator" content="@author_handle">
<– hình ảnh mô tả có kích thước tối thiểu 200x200px –>
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<!– Open Graph data –>
<meta property="og:title" content="Tiêu đề trang" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.nhanweb.com/" />
<meta property="og:image" content="http://nhanweb.com/image.jpg" />
<meta property="og:description" content="mô tả trang" />
<meta property="og:site_name" content="Tên website" />
<meta property="fb:admins" content="ID FaceBook dùng để quản lý" />
[/code]
3. Bộ Social Media Meta Tag đầy đủ
Đây sẽ là bộ đầy đủ nhất để mô tả trang với mạng xã hội. Nó bao gồm thêm:
- Google Authorship và Publisher Markup. Mặc dù dữ liệu này không làm thay đổi các hiển thị của bài viết trên Googl+, nhưng nó có thể liên kết đến Google+ của tác giả.
- Cấu trúc dữ liệu theo chuẩn Schema.org
- Twitter Summary card với hình ảnh lớn
- Mô tả đầy đủ cho dữ liệu của Open Graph article
<title>Tiêu đề trang, tối đa 60-70 ký tự</title>
<meta name="description" content="Phần mô tả, tối đa 155 ký tự" />
<!– Cập nhật thêm HTML với thuộc tính temscope và itemtype. –>
<html itemscope itemtype="http://schema.org/Article">
<!– Google Authorship and Publisher Markup –>
<link rel="author" href="https://plus.google.com/Google+_Profile/posts"/>
<link rel="publisher" href=”https://plus.google.com/Google+_Page_Profile"/>
<!– Schema.org markup for Google+ –>
<meta itemprop="name" content="Tiêu đề website hoặc tên bài">
<meta itemprop="description" content="Mô tả">
<meta itemprop="image" content="http://www.example.com/image.jpg">
<!– Twitter Card data –>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Tiêu đề trang>
<meta name="twitter:description" content="Mô tả trang, tối đa 200 ký tự">
<meta name="twitter:creator" content="@author_handle">
<!– Hình ảnh mô tả cho Twitter summary card với kích thước tối thiểu 280x150px –>
<meta name="twitter:image:src" content="http://www.nhanweb.com/image.html">
<!– Open Graph data –>
<meta property="og:title" content="Tiêu đề" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.nhanweb.com/" />
<meta property="og:image" content="http://nhanweb.com/image.jpg" />
<meta property="og:description" content="Mô tả" />
<meta property="og:site_name" content="Tên website – NhanWeb.COM chẳng hạn :D " />
<meta property="article:published_time" content="Ngày xuất bản. Ví dụ: 2014-16-17T05:59:00+01:00" />
<meta property="article:modified_time" content="Ngày chỉnh sửa. Ví dụ: 2014-016T19:08:47+01:00" />
<meta property="article:section" content="Phần nội dung" />
<meta property="article:tag" content="Thẻ tag hoặc từ khóa" />
<meta property="fb:admins" content="ID FaceBook dùng để quản lý" />
[/code]
Trên đây là một số mẫu Social Media Meta Tag mà bạn có thể sử dụng trên website, blog bình thường.
Đối với thông tin về sản phẩm, chúng ta có thể sử dụng một Social Media Meta Tag tốt hơn như sau.
Social Media Meta Tag cho sản phẩm
Đối với website mua bán, thông tin sản phẩm và giỏ hàng có một vài điểm khác biệt. Bạn hãy theo dõi đoạn mã sau để nhận ra những điểm khác biệt.
[code lang=”html”] <!– Cập nhật HTML bổ sung thêm thuộc tính itemscope và itemtype cho sản phẩm. –><html itemscope itemtype="http://schema.org/Product">
<title>Tiêu đề trang, tối đa 60-70 ký tự</title>
<meta name="description" content="Phần mô tả, tối đa 155 ký tự" />
<!– Schema.org markup cho Google+ –>
<meta itemprop="name" content="Tiêu đề hoặc tên bài">
<meta itemprop="description" content="Mô tả trang">
<meta itemprop="image" content="http://www.nhanweb.com/image.jpg">
<!– Twitter Card data –>
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Tiêu đề trang">
<meta name="twitter:description" content="Mô tả trang, tối đa 200 ký tự">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.nhanweb.com/image.jpg">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Giá">
<meta name="twitter:data2" content="Đen">
<meta name="twitter:label2" content="Màu sắc">
<!– Open Graph data –>
<meta property="og:title" content="Tiêu đề trang" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.nhanweb.com/" />
<meta property="og:image" content="http://nhanweb.com/image.jpg" />
<meta property="og:description" content="Mô tả" />
<meta property="og:site_name" content="Tên website" />
<meta property="og:price:amount" content="Giá sản phẩm. Ví dụ: 15.00" />
<meta property="og:price:currency" content="USD" />
[/code]
Công cụ kiểm tra
Sau đây là một vài công cụ để bạn có thể kiểm tra lại dữ liệu của mình xem các mạng xã hội liệu có nhận được những dữ liệu đúng như mong muốn của bạn không. Tôi sẽ liệt kê danh sách cho bạn.
A. Twitter Validation Tool
Trước khi nội dung có thể hiện trên Twitter, bạn phải có một tên miền được cho phép. Rất may mắn thay, việc này khá dễ dàng! Đầu tiên hãy cập nhật các thẻ Social Media Meta Tag của bạn và kiểm tra với công cụ này. Sau đó click vào nút Submit for Approval để hoàn tất.
B. Facebook Debugger
Bạn không cần phải được cho phép để các thẻ của bạn có thể hiển thị trên FaceBook. Ngoài ra công cụ này còn có thể giúp bạn phát hiện và gỡ lỗi trên thẻ, nó rất mạnh vì còn có thể phân tích thêm thẻ của Twitter.
C. Google Structured Data Testing Tool
Công cụ này không còn lạ lẫm gì nhiều với các webmaster nói chung vì nó được giới webmaster sử dụng từ rất lâu rồi. Tóm lại tôi sẽ không mô tả gì nhiều cả vì bạn đã biết rồi.
D. Pinterest Rich Pins Validator
Giống như Twitter, Pinterest đòi hỏi bạn phải được sự cho phép trước khi các siêu dữ liệu hiển thị trên Pinterest.
Một số lưu ý về hình ảnh
Hình ảnh bạn chọn có thể không cần phải lưu trữ trên website, điều đó có nghĩa là bạn hoàn toàn có thể dẫn liên kết từ bên ngoài vào. Tuy nhiên nó phải thực sự đại diện hiệu quả cho nội dung của bạn. Hình ảnh này được người dùng của bạn nhìn thấy khi họ quyết định chia sẻ nội dung. Do đó, hãy tìm và sử dụng những hình ản thực sự chất lượng.
Những dịch vụ mạng xã hội khác nhau sẽ có những tiêu chuẩn về hình ảnh khác nhau, nên rất khó để bạn có thể sử dụng một hình ảnh “đúng chuẩn”. Cho nên cách tốt nhất là lựa chọn lấy một kích thức phù hợp nhất cho tất cả các mạng xã hội. Tham khảo thêm:
- Twitter thumbnail: 120x120px
- Twitter large image: 280x150px
- Facebook: Không có chuẩn nhưng hình ảnh nên từ 200x200px sẽ tốt hơn. Facebook cũng cho biết bạn có thể sử dụng hình ảnh có độ lớn lên đến 1200px.
Giải pháp thay thế cho WordPress
Cách đây hơn 1 năm tôi đã phát triển một plugin cho phép bổ sung các thẻ Social Media Meta Tag để có thể bổ sung bài viết dễ dàng vào các mạng xã hội. Giờ đây, plugin WP Social Media Meta Tag lại có dịp được tôi nhắc đến. Nếu bạn sử dụng WordPress là cảm thấy khó khă với mớ thẻ meta ở trên. Bạn có thể sử dụng plugin này để không phải suy nghĩ nhiều đến Social Media Meta Tag nữa.
Bạn có thể download plugin này tại đây.
Chúc các bạn vui vẻ.