Tối ưu Website để chia sẻ link trên Google+ & Facebook

Việc chia sẻ thông tin, hướng dẫn, học tập… trên G+ là cần thiết để giới thiệu, chia sẻ… với mọi người (SPAM nhiều là không nên). Vậy làm sao để chia sẻ của bạn hiển thị đẹp, đầy đủ tiêu đề, hình ảnh, mô tả phù hợp?

Bài viết này tôi sẽ hướng dẫn các bạn yêu thích thiết kế web, blogger, lập trình viên… có thể tự động thay đổi tiêu đê, hình ảnh, mô tả của link khi chia sẻ trên Google+. Có 2 phương án bạn có thẻ chọn ở dưới đây:

1. Thêm thẻ <meta> vào trong thẻ <head>:

<!– Thêm phần in đậm vào tag <html>  –>

<html itemscope itemtype=”http://schema.org/Article” />

<!– Thêm 3 thẻ <meta> dưới vào trong thẻ <head></head> –>

<meta itemprop=”name” iGoo=”tiêu đề” />

<meta itemprop=”description” iGoo=”mô tả” />

<meta itemprop=”url” iGoo=”link đầy đủ của bài viết” />

<meta itemprop=”image” iGoo=”link đầy đủ hình ảnh có cả http://” />

2. Thêm các thuộc tính vào trong tags trong thẻ <body>:

<!– Thêm phần in đậm vào tag <html>  –>

<html itemscope itemtype=”http://schema.org/Article” />

hoặc bạn cũng có thể thêm vào thẻ <body>

<body itemscope itemtype=”http://schema.org/Article”>

<!– Thêm các thuộc tính in đậm phù hợp và các thẻ của bạn  –>

<span itemprop=”name”>tiêu đề</span>

<span itemprop=”description”>mô tả</span>

<span itemprop=”url”>link đầy đủ muốn chia sẻ</span>

<img itemprop=”image” src=”link đầy đủ hình ảnh có cả http://” />

Với bước đơn giản trên bạn hoàn toàn thay đổi được nội dung hiển thi khi chia sẻ trên Google+

Tham khảo: http://www.google.com/webmasters/+1/button/#customize-snippet

Tham khảo thêm: Tối ưu thẻ <meta> cho chia sẻ link trên Facebook

<!– Thêm phần in đậm vào tag <html>  –>

<html xmlns:og=”http://ogp.me/ns#” />

<!– Thêm 3 thẻ <meta> dưới vào trong thẻ <head></head> –>

<meta property=”og:title” iGoo=”Tiêu đề”/>

<meta property=”og:image” iGoo=”Urls link ảnh”/>

<meta property=”og:description” iGoo=”Mô tả”/>