Nhập từ cần tìm và nhấn Enter

[NƠI ĐẶT QUẢNG CÁO - GỌI NGAY 0911296103]
author photo
Đăng bởi: Thời gian:
Cách thêm các thể META Social Twitter, Google+, Facebook... vào website và blog bất kỳ.

Tại Moz, chúng tôi cố gắng để bao gồm siêu dữ liệu truyền thông xã hội trong tất cả các phần mới của nội dung mà chúng tôi công bố.

Điều này cho phép chúng tôi để tối ưu hóa cho việc chia sẻ Twitter, Facebook, Google+ và Pinerest bằng cách xác định chính xác có bao tiêu đề, mô tả, hình ảnh và nhiều hơn nữa xuất hiện ở mạng xã hội.

Hãy nghĩ về nó như là tối ưu hóa tỷ lệ chuyển đổi cho tiếp xúc với xã hội.

Các tiêu chuẩn về SEO cũng là đáng kể. Chúng tôi biết từ kinh nghiệm và nghiên cứu các dữ liệu phải, bao gồm các hình ảnh tối ưu, giúp nội dung để truyền bá, mà thường dẫn đến các liên kết tăng và đề cập đến.
Cách thêm các thể META Social Twitter, Google+, Facebook... social
Hiểu biết chính xác các thẻ meta xã hội bao gồm có thể là khó hiểu, ngay cả đến các webmaster có kinh nghiệm. Bài đăng bởi Micheal King là một trợ giúp rất lớn, và nhà xuất bản Wordpress người sử dụng SEO Plugin Yoast rất nổi trước các trò chơi.

Đối với phần còn lại của chúng tôi, hãy xem xét các cấu trúc khác nhau được hỗ trợ bởi nền tảng xã hội lớn:
  • Twitter Cards: Tóm tắt, hình ảnh, Triển lãm, Apps, Video, Audio, và Sản phẩm
  • Pinterest Giàu Pins: Sản phẩm, Bí quyết, phim, và các Điều
  • Google+: Các bài viết, Blog, Book, tổ chức sự kiện, doanh nghiệp địa phương, tổ chức, người, sản phẩm, giá và xem lại
  • Facebook: Các bài viết, hình ảnh, Audio, Video, và nhiều hơn nữa
Để giúp giảm bớt vấn đề này, tôi tạo ra thẻ phương tiện truyền thông xã hội bốn mẫu mà bạn có thể điền vào, tùy chỉnh để sử dụng riêng của bạn, và chia sẻ với nhóm của bạn và những người khác.

Làm thế nào để sử dụng các mẫu

Đơn giản chỉ cần sao chép và dán mẫu vào trình soạn thảo văn bản của sự lựa chọn của bạn. Hãy chắc chắn để thay thế bất kỳ văn bản màu cam hoặc màu xanh lá cây với dữ liệu của riêng bạn, và tùy chỉnh, loại bỏ hoặc thêm bất kỳ thẻ bạn thấy cần thiết.

Ba đầu tiên của những mẫu này được tối ưu hóa bằng cách sử dụng một "bài viết" điển hình đánh dấu và dữ liệu, lý tưởng cho các bài đăng trên blog và viết hầu hết các nội dung. Các mẫu thức chứa đánh dấu cho các sản phẩm pages.For bài khác, chẳng hạn như cuốn sách hoặc công thức nấu ăn, tham khảo tài liệu liên kết ở cuối bài này để tham khảo về những gì để tùy chỉnh.

Khi bạn làm xong, bạn đừng quên kiểm tra và áp dụng chính.

1. The Minimal Template

This slimmed back version runs lean and fast. It contains a bare minimum of data for optimized sharing across Twitter, Facebook, Google+ and Pinterest.

Title tags and meta descriptions are included even though they aren't technically social media meta tags. This is because they can be used by Google+ and other social media platforms, and it is best practice to include them on every page you publish.

Minimum Social Media Tag Template: Article
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" />

2: Các mẫu chuẩn

Các mẫu tiêu chuẩn đại diện cho một thực hiện mạnh mẽ hơn của các thẻ và xã hội có nghĩa là để làm việc trên tất cả các nền tảng. Ngoài tất cả các tính năng của mẫu mimimal trên, các mẫu tiêu chuẩn bao gồm những điều sau đây:
  • Các thẻ Tóm tắt cơ bản Twitter
  • Hình ảnh thumbnail Twitter
  • Facebook Page Insights
Standard Social Media Tag Template: Article
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" /> 
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

3: The Full Monty

Đây là những con quái vật! Ngoài tất cả các dữ liệu chứa trong các mẫu tiêu chuẩn, đầy đủ các mẫu có chứa:

Google Tác Quyền và Nhà xuất bản Markup. Mặc dù dữ liệu này không thay đổi sự xuất hiện nội dung của bạn trong Google+, nó có khả năng thêm các liên kết đến các trang Google+ của bạn trong kết quả tìm kiếm.
  • Schema.org bài viết đánh dấu
  • Twitter thẻ Summary với hình ảnh lớn
  • Mở rộng mở Graph bài viết dữ liệu
Full Social Media Tag Template: Article
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<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="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

Bonus: Các mẫu sản phẩm

Đối với các thương gia, đánh dấu sản phẩm là rất phổ biến, và thường là dễ dàng cho các nhà phát triển để thực hiện trong phần mềm giỏ mua hàng của họ. Các mẫu sản phẩm khác nhau từ các bài báo đánh dấu chỉ trong một vài cách sau:
  • Tag sửa đổi <html> để phản ánh dữ liệu sản phẩm schema.org
  • Twitter Thẻ sản phẩm bao gồm các dữ liệu cần thiết nhãn
  • Dữ liệu mở Graph bao gồm giá cả và tiền tệ dữ liệu
Product Social Media Tag Template
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Product">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.html">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<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="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />

Công cụ để kiểm tra và phê duyệt

A. Twitter Validation Tool

https://dev.twitter.com/docs/cards/validation/validator

Trước khi thẻ của bạn hiển thị trên Twitter, trước tiên bạn phải có tên miền của bạn đã được phê duyệt. May mắn thay, đó là một quá trình siêu dễ dàng. Sau khi bạn thực hiện thẻ của bạn, bạn chỉ cần nhập URL mẫu của bạn vào các công cụ xác nhận. Sau khi kiểm tra đánh dấu của bạn, hãy chọn nút "Gửi để phê duyệt".

B. Facebook Debugger

https://developers.facebook.com/tools/debug

Bạn không cần phải chấp thuận trước cho thông tin meta của bạn để hiển thị trên Facebook, nhưng các công cụ gỡ lỗi họ cung cấp cho bạn rất nhiều thông tin về tất cả các thẻ của bạn và cũng có thể phân tích các thẻ Twitter của bạn.

C. Google cấu trúc dữ liệu cụ kiểm tra

http://www.google.com/webmasters/tools/richsnippets

Webmasters truyền thống sử dụng các công cụ kiểm tra dữ liệu có cấu trúc để kiểm tra đánh dấu quyền tác giả và xem trước cách đoạn sẽ xuất hiện trong kết quả tìm kiếm, nhưng bạn cũng có thể sử dụng xem những gì các loại dữ liệu meta Google có thể trích xuất từ ​​mỗi trang.

D. Pinterest Giàu Pins Validator

http://developers.pinterest.com/rich_pins/validator/

Giống như Twitter, Pinterest đòi hỏi một quá trình phê duyệt để cho phép Giàu Pin chức năng. Sử dụng công cụ Giàu Pin Validator để kiểm tra đánh dấu dữ liệu của bạn và áp dụng chính cùng một lúc.

Mẹo và thực hành tốt nhất

Tối ưu hóa cho hình ảnh

Hình ảnh mà bạn liên kết đến trong dữ liệu xã hội của bạn không thực sự có được trên trang, nhưng nó phải đại diện cho nội dung của bạn tốt. Các hình ảnh cho phép bạn để điều khiển những gì mọi người nhìn thấy khi họ chia sẻ nội dung của bạn, vì vậy điều quan trọng là phải sử dụng hình ảnh chất lượng.

Mỗi nền tảng xã hội có các tiêu chuẩn khác nhau cho định cỡ. Thông thường, nó dễ dàng hơn để giữ cho nó đơn giản và chọn một kích thước hình ảnh mà sẽ làm việc cho tất cả các dịch vụ.
  • Twitter thu nhỏ: 120x120px
  • Twitter hình ảnh lớn: 280x150px
  • Facebook: Tiêu chuẩn khác nhau, nhưng một hình ảnh ít nhất là 200x200px hoạt động tốt nhất. Facebook khuyến cáo hình ảnh lớn lên đến 1200x630px rộng.
Trong ngắn hạn, hình ảnh lớn hơn cung cấp cho bạn sự linh hoạt nhất. Khi nghi ngờ, kiểm tra từng trang bằng cách sử dụng công cụ thích hợp dưới đây để xem chính xác hình ảnh của bạn sẽ xuất hiện trong snippits.

Tầm quan trọng của Open Graph dữ liệu

Nếu bạn có thể lựa chọn chỉ có một loại dữ liệu meta để bao gồm, đặt cược tốt nhất của bạn là Open Graph. Đó là bởi vì tất cả các nền tảng có thể sử dụng nó như là một dự phòng, bao gồm Twitter đến một mức độ lớn.

Facebook những hiểu biết trang
Cách thêm các thể META Social Twitter, Google+, Facebook...
Các tài sản meta "fb: quản trị viên" yêu cầu bạn nhập số Facebook số id của bạn, và cung cấp cho bạn truy cập vào tính năng phân tích về cách nội dung trang web của bạn được chia sẻ trên Facebook. Tìm hiểu thêm về trang Insights, bao gồm làm thế nào để thiết lập nó và khám phá id số của bạn.
Lời khuyên của bạn tốt nhất để tối ưu hóa nội dung của bạn để chia sẻ là gì? Cho chúng tôi biết trong các ý kiến ​​dưới đây.
Nguồn bài viết: https://moz.com/blog/meta-data-templates-123

Mời các bạn viết lời bình cho bài viết!

Nhấp để nhận xét