- 24/09/2013
- SEO
- [Thụy.vk]
- 2558 lượt xem
Facebook Open Graph là 1 giao thức dùng để giao tiếp giữa website của
bạn với mạng xã hội facebook. Hay nói cách khác Open Graph chính là cầu
nối giúp website của bạn trở thành một phần của mạng xã hội để cho việc
quảng bá website và tương tác mạng xã hội được dễ dàng hơn.
Facebook Open Graph bao gồm một tập hợp meta tags giúp bạn định nghĩa nội dung trên website thành
dữ liệu có cấu trúc mà Facebook có thể hiểu được. khi bạn share, like 1
link hoặc cập nhật 1link trên status, nếu website của bạn không có sử
dụng Opne Graph thì Facebook chỉ nhận ra link bài viết mà thôi.
Khi chèn Open Graph vào website nó sẽ làm cho web pages mà bạn chia sẻ
trở thành đối tượng có các thuộc tính mà mạng xã hội yêu cầu như là
title, description, ảnh thumbnail…Vì thế link chia sẻ sẽ có đầy đủ ảnh
thumbnail, description do bạn chỉ định để lôi kéo người đọc click theo
chủ ý của bạn.
Cách chèn Facebook Open Graph vào website
Một số thuộc tính của Facebook Open Graph
Og:title: Đây là nơi bạn đặt tiêu đề cho nội dung bài viết của bạn.
Hãy nghĩ nó giống như thẻ title html mà Search Engine sử dụng. Khi tạo
or:title hãy giữ số kí tự ít hơn 95.
1
2
3
4
| |
1
2
3
4
5
| |
1
2
3
4
5
6
| |
Vậy làm thế nào có thể sử dụng thẻ này. Facebook có vài điều kiện như
là ảnh phải có kích thước ít nhất 50px x 50px nhưng hình ảnh chuẩn nên
là một ảnh lớn hơn tầm 200x200px. Và kích thước không được nhiều hơn
5mb.
Og:url: Thẻ này bạn sẽ đặt url chính (canonical url) của trang bạn
chia sẻ nó quan trọng bởi vì đôi lúc bạn sẽ có nhiều hơn 1 URL cho cùng 1
nội dung.. Sử dụng thẻ này sẽ đảm bảo tất cả những gì người khác chia
sẻ trên facebook đều đi đến 1 url gốc mà bạn chỉ đinh, tránh phân tán,
nó sẽ gúp bạn về facebook Edgerank.
Og:title, og:descipton, og:image, og:url sẽ là 4 thứ tối thiểu bạn phải sử dụng khi thiết lập Open Graph cho website.
Og:site_name: Chỉ cho Facebook tên của website. Bạn không thực sự cần
thẻ này nhưng nó cũng không ảnh hưởng gì nhiều nếu có nó.
fb:admins: Nếu bạn có 1 fanpage và bạn muốn nhận đuợc nhiều dữ liệu
trong faecbook Insights, thì bạn phải dùng thẻ này. Nó chỉ cho cho
Facebook bạn là chủ site và nó kết nối facebook fanpage tới website của
bạn.
Như vậy các thẻ meta không chỉ dành riêng cho công cụ tìm kiếm mà các
trang mạng xã hội cũng sử dụng. Bạn tối ưu các thẻ meta trên website cho
công cụ tìm kiếm để tăng click và cải thiện vị trí xếp hạng thì bạn
cũng nên làm điều đó với Facebook thông qua các thẻ meta trong giao thức
Open Graph.
Ứng ụng Open Graph vào website asp.net
Ở phần trên bạn có thể thấy việc chèn các thẻ meta vào header của
website khá đơn giản, tuy nhiên đối với mỗi tin bài trên website của
chúng ta, thông tin meta này sẽ khác, và lúc đó chúng ta sẽ bắt buộc
sinh ra các thẻ này một cách tự động (không phải chèn code html tĩnh
vào). Ở đây tôi sẽ hướng dẫn cách sinh ra đoạn mã meta open graph trên ở
website viết bằng Asp.Net.
Vì thẻ meta đi theo nội dung tin bài trên web, nên ta cần có một hàm sinh ra nó khi load nội dung bài viết.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| protected void Load_Meta() { try { int NewsId = Convert.ToInt32(Request.QueryString["id"]); New ob = new New(); ob = clsex.News_Get(NewsId); if (ob != null) { //Trending facebook string URL = HttpContext.Current.Request.Url.Authority; HtmlMeta title = new HtmlMeta(); title.Attributes.Add("property", "og:title"); title.Content = ob.NameNews; Header.Controls.Add(title); // HtmlMeta type = new HtmlMeta(); type.Attributes.Add("property", "og:type"); type.Content = "website"; Header.Controls.Add(type); // HtmlMeta url = new HtmlMeta(); url.Attributes.Add("property", "og:url"); url.Content = URL + "/new/" + ob.Id.ToString() + "/" + cls.ConvertVToE(ob.NameNews) + ".aspx"; Header.Controls.Add(url); // HtmlMeta image = new HtmlMeta(); image.Attributes.Add("property", "og:image"); image.Content = URL + ob.Images.Replace("~/","/"); Header.Controls.Add(image); // HtmlMeta site_name = new HtmlMeta(); site_name.Attributes.Add("property", "og:site_name"); site_name.Content = "Thuy.vk's Blog | Design and development website"; Header.Controls.Add(site_name); // HtmlMeta description = new HtmlMeta(); description.Attributes.Add("property", "og:description"); description.Content = Strip(ob.Quotation); Header.Controls.Add(description); } } catch { } } public string Strip(string text) { return Regex.Replace(text, @"<(.|\n)*?>", string.Empty); } |
1
2
3
| int NewsId = Convert.ToInt32(Request.QueryString["id"]);New ob = new New();ob = clsex.News_Get(NewsId); |
1
2
| string URL = HttpContext.Current.Request.Url.Authority; |
1
| url.Content = URL + "/new/" + ob.Id.ToString() + "/" + cls.ConvertVToE(ob.NameNews) + ".aspx"; |
http://thuyvk.com/new/32/ten-bai-viet.aspx
1
2
3
4
| public string Strip(string text) { return Regex.Replace(text, @"<(.|\n)*?>", string.Empty); } |
Bạn cần using hai thư viện này vào file *.aspx.cs của bạn
1
2
| using System.Web.UI.HtmlControls;using System.Text.RegularExpressions; |
1
2
3
4
5
6
| http://thuyk.com/new/153/su-dung-jquery-picture-plugin-toi-uu-hoa-hinh-anh-.aspx |
http://thuyvk.com/data_news/art-53795.png
Lỗi của Facebook Open Graph thường gặp
Một lỗi hay gặp của Open Graph đó là không lấy được hình ảnh, tiêu đề, hay mô tả..
- Để khắc phục lổi này thì bạn nên kiểm tra lại các thẻ META Open Graph đã đúng chưa ?
- Hoặc vào công cụ mà Debug của facebook cung cấp để xóa cache đi.
Và ngay bây giờ hãy tối ưu website của mình để dễ dàng chia sẻ trên
mạng xã hội facebook hơn tạo sự tương tác tốt nhất với người dùng và
website
Bài đăng
0 nhận xét:
Đăng nhận xét