Quản lý hiển thị hình ảnh từ WEBSITE khi post lên FACEBOOK,GOOGLE và TWITTER

Viết bởi 

Nhiều bạn sẽ thắc mắc bảo quái lại, sao có lúc share link website lên facebook: Lúc thì có ảnh, lúc thì không có ảnh. Ảnh lúc thì hiển thị luôn ảnh từ post chả liên quan trời ơi đất hỡi ở đâu.

Hóa ra là việc hiển thị hình ảnh khi share 1 link từ website lên facebook, google hay twitter đều do code quyết định.

 Mặc định nếu ko chỉ cho mấy ông mạng xã hội đích danh thích hiển thị thẻ nào thì nó sẽ load từ trên website xuống dưới.

Ở trên facebook nó là thẻ meta og – nó là cái nhóm thẻ nằm trên khu vực đầu tiên website <head></head> (*Vào google chrome ấn F12 nhìn thấy chữ head cho đỡ tò mò :-p )

Chi tiết thì ở đây mình làm 1 cái demo cho dễ hiểu

Nếu vậy. Khi làm website bạn chỉ cần thêm nhóm thẻ trên vào website và chỉ định danh rõ muốn hiển thị cái gì trên facebook là ok.

Code chi tiết nhóm thẻ OG

<meta property=”og:title” content=”Noi Dung” />
<meta property=”og:type” content=”video.movie” />

//Type có thể là music, video,image. Chi tiết các loại thẻ music và video có thể tìm tại link bên dưới từ tài liệu chính thức của facebook và từ open graph api

http://ogp.me/

http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open-graph-and-cards/
<meta property=”og:url” content=”” />

//Thẻ og:url theo mình thấy nó tạo cho facebook 1 kẻ hở để kẻ xấu hay dùng để spam link, lừa đảo đường dẫn website. Thời gian trước ở VN mình hay có mấy cái post giập típ sock trên fb lấy link website uy tín nhưng khi click lại ra trang khác. Nó là dùng thẻ này -> Theo mình check hiện fb đã lặng lẽ bỏ đi cái thẻ này.
<meta property=”og:image” content=”url hình ảnh.jpg” />

//Thẻ này chính là hiển thị hình ảnh

Tương tự với facebook google+ và twitter cũng có những thẻ hiển thị chuyên biệt cho mạng xã hội.

Đây là cấu trúc thẻ đơn giản nhất để chia sẻ đối với bài viết

Nhớ đặt cả cụm trong thẻ <head></head>
<title>Tên trang. Độ dài 60-70 ký tự</title>
<meta name=”description” content=”Mô tả trang. Không dài quá 155 ký tự.” />

<!của anh  Google+ –>
<meta itemprop=”name” content=”Tên title“>
<meta itemprop=”description” content=”mô tả trang“>
<meta itemprop=”image” content=”ảnh gì đó.jpg“>

<!–của anh Twitter –>
<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ả không quá 200 ký tự“>
<meta name=”twitter:creator” content=”@author_handle”>
<!– ảnh của bác twitter tối thiểu nên từ 280x150px –>
<meta name=”twitter:image:src” content=”link hình ảnh“>

<!– Open Graph data –>
<meta property=”og:title” content=”tên title” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”url – để cũng đc bỏ cũng ko sao” />
<meta property=”og:image” content=”đường dẫn ảnh.jpg” />
<meta property=”og:description” content=”mô tả nào” />
<meta property=”og:site_name” content=”tên website không có phần .com đăng sau. VD: haanhduclinh” />
<meta property=”article:published_time” content=”Thời gian public” />
<meta property=”article:modified_time” content=”Thời gian sửa” />
<meta property=”article:section” content=”Article Section” />
<meta property=”article:tag” content=”Article Tag” />
<meta property=”fb:admins” content=”thêm ID tác giả nếu muốn” />

Đây là cấu trúc thẻ đơn giản nhất để chia sẻ đối với site thương mại điện tử bán sản phẩm thêm thuộc tính hiển thị giá
<title>Tên trang. Độ dài 60-70 ký tự</title>
<meta name=”description” content=”Mô tả trang. Không dài quá 155 ký tự.” />

<!– của bác Google+ –>
<meta itemprop=”name” content=”Tiêu đề trang“>
<meta itemprop=”description” content=”mô tả“>
<meta itemprop=”image” content=”url ảnh.jpg“>

<!– của bác Twitter->
<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ả yêu cầu ít hơn 200 ký tự“>
<meta name=”twitter:creator” content=”@author_handle”>
<meta name=”twitter:image” content=”url ảnh”>

//2 cái này là nhãn, Thích đặt là gì cũng đc.

<meta name=”twitter:data1″ content=”giá VD:$3“>
<meta name=”twitter:label1″ content=”Price“>
<meta name=”twitter:data2″ content=”Black“>
<meta name=”twitter:label2″ content=”Color“>

<!– bác facebook –>
<meta property=”og:title” content=”Tiêu đề” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”link url ” />
<meta property=”og:image” content=”link url ảnh này” />
<meta property=”og:description” content=”mô tả” />
<meta property=”og:site_name” content=”Tên site không có đuôi chấm đăng sau,VD:haanhduclinh không được để haanhduclinh.com” />
<meta property=”og:price:amount” content=”Ghi giá vào” />
<meta property=”og:price:currency” content=”Đơn vị tiền tệ” />

 

 



Sln đc: 2173 lần

Bạn cần tư vấn? Bạn cần báo giá? Bạn có thắc mắc, vui lòng liên hệ mình qua skyper: JoomCom Tel: 0983.3636.85 hoặc để lại phản hồi bên dưới, cảm ơn bạn

HOTLINE phản hồi trực tuyến: Mr. Phú: 0983.3636.85 --/-- Ms.Oanh: 0975.527.593 / 0919 3789 33
Email: DNAmedia.jsc@gmail.com / JoomCom@gmail.com
Skyper: JoomCom
Zalo và Viber: 0983363685

Hỗ trợ trực tuyến

Thiết kế giao diện: 
Mr. H Phú
Ms.Oanh
Thiết kế website:
Mr. Tr.Phú
Ms.Yến
SEO GOOGLE và tối ưu hóa:
Mr.Phú
 ZALOskype-call-us

Facebook lamwebseo

ĐỀ NGHỊ BÁO GIÁ WEBSITE SEO

Đối tác của chúng tôi