Facebook Open Graph và Seo

  • SEO
  • |
  • Tuesday, September 24, 2013
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.
<head>
<title>Thuy.vk's Blog | Design and development website</title>
<meta property="og:title" content="Thuy.vk's Blog | Design and development website">
</head>

Og:type: Đây là nơi bạn mô tả loại hình nội dung mà bạn chia sẻ. Nó có thể là video, ảnh, bài viết blog…Đây là danh sách đầy đủ bạn có thể nghiên cứu khi định hình nội dung cho mình.

<head>
<title>Thuy.vk's Blog | Design and development website</title>
<meta property="og:title" content="Thuy.vk's Blog | Design and development website">
<meta property="og:type" content="article">
​</head>

og: description: Giống như meta description html, nó sẽ dùng mô tả nội dung. Bạn không quan trọng nó có nhiều từ khóa trong đó hay không thay vì đó bạn nên tiếp cận việc viết descipton hấp dẫn lôi cuốn để nhận được nhiều click. Giới hạn trong khoảng 297 kí tự.

<head>
<title>Thuy.vk's Blog | Design and development website</title>
<meta property="og:title" content="Thuy.vk's Blog | Design and development website">
<meta property="og:type" content="article">
<meta property="og:description" content="Võ Khánh Thụy Blog | Đừng ngại chia sẻ kiến thức, vì nó sẽ cho bạn nhiều hơn bạn đang có | Lập trình, Thiết kế website, Chia sẻ kiến thức - Nâng cao kinh nghiệm">
</head>

og:image: Bằng cách sử dụng thẻ này, Facebook sẽ đưa ra một hình ảnh thumbnail khi ai đó chia sẻ url của bạn, và một hình ảnh nhỏ sẽ xuất hiện bên cạnh nội dung bạn chia sẻ. Đây là cách làm nổi bật status của bạn so với các status được cập nhật bằng text trên timeline người khác.

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.
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;
                URL = "http://" + URL;

                HtmlMeta title = new HtmlMeta();
                title.Attributes.Add("property", "og:title");
                title.Content = ob.NameNews;
                Header.Controls.Add(title);
                //<meta property="og:type" content="movie"/>
                HtmlMeta type = new HtmlMeta();
                type.Attributes.Add("property", "og:type");
                type.Content = "website";
                Header.Controls.Add(type);
                //<meta property="og:url"/>
                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);
                //<meta property="og:image" />
                HtmlMeta image = new HtmlMeta();
                image.Attributes.Add("property", "og:image");
                image.Content = URL + ob.Images.Replace("~/","/");
                Header.Controls.Add(image);
                //<meta property="og:site_name" content="Ninja"/>
                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);
                //<meta property="og:description" content="Ninja"/>
                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);
    }

Trong đó các bạn chú ý

int NewsId = Convert.ToInt32(Request.QueryString["id"]);
New ob = new New();
ob = clsex.News_Get(NewsId);

Đoạn này là hàm lấy nội dung bài viết trong csdl về một đối tượng, từ đó để gán giá trị ra các thẻ meta

string URL = HttpContext.Current.Request.Url.Authority;
URL = "http://" + URL;

Đoạn này lấy tên miền của bạn, nó sẽ trả về dạng http://thuyvk.com

url.Content = URL + "/new/" + ob.Id.ToString() + "/" + cls.ConvertVToE(ob.NameNews) + ".aspx";

Đoạn này sinh ra url trỏ đến bài viết của các bạn, mình dùng một hàm ConvertVToE để sinh ra url theo cấu trúc rewrite url. Phần này sẽ sinh ra một đường dẫn đến bài viết của bạn theo cấu trúc:

http://thuyvk.com/new/32/ten-bai-viet.aspx

public string Strip(string text)
    {
        return Regex.Replace(text, @"<(.|\n)*?>", string.Empty);
    }

Hàm này có chức năng gỡ bỏ các mã thẻ HTML trong phần trích dẫn nội dung của các bạn, để đàm bảo meta description chỉ là 1 chuỗi text thông thường.

Bạn cần using hai thư viện này vào file *.aspx.cs của bạn

using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;

Sau khi thực hiện việc sinh meta động như trên, khi vào xem nội dung bài viết, bạn viewsource có thể thấy được phần meta do code tự động sinh ra như sau

<meta property="og:title" content="Sử dụng jQuery Picture plugin tối ưu hóa hình ảnh cho web mobile." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://thuyk.com/new/153/su-dung-jquery-picture-plugin-toi-uu-hoa-hinh-anh-.aspx" />
<meta property="og:image" content="http://thuyvk.com/data_news/art-53795.png" />
<meta property="og:site_name" content="Thuyvk's Blogs" />
<meta property="og:description" content="Như bài trước tôi có giới thiệu về jQuery Mobile - một bộ mã nguồn mở hỗ trợ xây dựng giao diện cho responsive rất chuyên nghiệp dành cho các thiết bị smartphone và máy tính bảng" />

Khi thực hiện xong các bước trên là bạn đã tích hợp xong Open Graph vào website của bạn, hay copy URL website và paste lên facebook để xem thành quả

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

 

Related Post


50 mẹo tăng rank cho website của bạn
Thursday, September 19, 2013
Thứ hạng website là một vấn đề luôn được những người quản trị website quan tâm hàng đầu, có rất nhiều cách được áp dụng để nhằm cải thiện thứ hàng website. Trong bài viết này tôi xin chia sẻ một số mẹo nhỏ để giúp cải thiện thứ hạng cho website của bạn.  
Một số mẹo giữ chân khách đến với website
Wednesday, September 18, 2013
Một trong các chỉ số quan trọng để Google đánh giá website của bạn đó là thời gian ở lại website và lượng khách quay lại website những lần thứ 2, thứ 3 … thứ n. Để làm được điều đó cách hay nhất là nội dung website đủ thu hút với người có nhu cầu. Bài viết chia sẻ 5 mẹo để website của bạn “quyến rũ” người tiêu dùng...
Search

Đăng ký nhận bài mới


Category

Blog Archive