Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article) Show Trong mẹo nhỏ này, tôi sẽ giới thiệu với bạn một công cụ đơn giản, nhưng rất hữu ích được gọi là Hey Meta. Nếu bạn muốn xem hồ sơ chia sẻ trang web của bạn trông như thế nào, và bạn muốn chắc chắn rằng các thẻ meta mà bạn đang sử dụng có đúng hay không, thì Hey Meta chính là những gì bạn cần. Hãy cùng tìm hiểu nào! Sử dụng đúng các Thẻ Meta Kiểm tra các Thẻ Meta của bạnKiểm tra tính hiệu quả của việc thiết lập thẻ meta hiện tại của trang web bằng cách nhập đường dẫn URL vào input. Bạn sẽ thấy một thẻ xem trước (những gì có thể được hiển thị trên mạng xã hội, các ứng dụng chia sẻ v.v ..) và tiêu đề, mô tả, hình ảnh đặc trưng của URL được đề cập đến. Nếu trang web của bạn không có bất kỳ thẻ meta nào cho các mục này, sẽ không có gì được hiển thị cả. Tạo ra các Thẻ Meta chính xácNếu trang của bạn có vẻ như thiếu thông tin chi tiết hoặc hiển thị metadata không chính xác thì bạn có thể sử dụng Hey Meta để tạo ra các thẻ chính xác cho bạn. Nhập thông tin mà bạn muốn hiển thị trong các trường được chỉ ra: Tương tự có thể thực hiện đối với mô tả trang web, URL và hình ảnh đặc trưng. Các thẻ được tạo ra sẽ được hiển thị trong các bản xem trước và markup sẽ trông giống như sau: <!-- HTML Meta Tags --> <title>Test website</title> <meta name="description" content="This is the website description. Nice eh?"> <!-- Google / Search Engine Tags --> <meta itemprop="name" content="Test website"> <meta itemprop="description" content="This is the website description. Nice eh?"> <meta itemprop="image" content="https://lorempixel.com/400/200/"> <!-- Facebook Meta Tags --> <meta property="og:url" content="https://nothing.com"> <meta property="og:type" content="website"> <meta property="og:title" content="Test website"> <meta property="og:description" content="This is the website description. Nice eh?"> <meta property="og:image" content="https://lorempixel.com/400/200/"> <!-- Twitter Meta Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Test website"> <meta name="twitter:description" content="This is the website description. Nice eh?"> <meta name="twitter:image" content="https://lorempixel.com/400/200/"> <!-- Meta Tags Generated via https://heymeta.com --> Ở đây bạn sẽ thấy các thẻ meta HTML nguyên bản như Kết luậnHãy đảm bảo thẻ meta của bạn hiển thị đúng các thông tin chi tiết về trang web của bạn! Tìm hiểu thêmSử dụng thẻ meta Open Graph là một trong những kỹ thuật nâng cao khi làm SEO website. Không nhiều người để ý đến công cụ SEO này, cho đến khi thử chia sẻ trang web lên Facebook hay Zalo. Thông tin hiển thị trên đó như: ảnh đại diện, tiêu đề, nội dung tóm tắt… không hay, không đẹp. Vậy nếu muốn sửa cho chuẩn thì phải làm sao? Đó chính là lúc cần biết cách sử dụng các thẻ Open Graph (viết tắt là OG). Nhưng thực sự thì thẻ meta Open Graph là gì? Cách sử dụng ra sao? Và cách tối ưu thể nào để đạt hiệu quả SEO cao nhất? Đó là những nội dung chính của bài viết này. Nếu bạn muốn hình dung ngay xem thẻ này trông thế nào trong mã nguồn, thì có thể xem trong hình dưới. Rồi sau đó đọc tiếp từng phần nội dung chi tiết trong bài nhé. Các thẻ Open Graph của trang web này Và đây là nội dung chính của bài: MỤC LỤC
Sử dụng thẻ meta Open Graph để chia sẻ trang web của bạn lên các mạng xã hội là một trong các kỹ thuật mà người làm SEO cần biết và áp dụng. Bạn có thể áp dụng cho những thuộc tính cơ bản, hoặc nếu có thể, thì cả các thuộc tính nâng cao. Thẻ meta Open Graph là gì? Cách sử dụng thẻ meta Open Graph thế nào?og:title Một số thẻ Open Graph nâng cao Cách tạo thẻ Open Graph nhanh Kiểm tra thẻ meta Open Graph thế nào? Trước hết, tôi muốn trao đổi về khái niệm... Thẻ Open Graph là loại thẻ cung cấp thông tin về trang web (meta tag), được đặt trong phần của trang. Mục đích của thẻ OG là để giúp các mạng xã hội như Facebook, Twitter hay Zalo... xác định được những thông tin chính về trang web của bạn, và hiển thị những thông tin đó khi có ai đó chia sẻ trang web trên mạng xã hội. Có thể coi thẻ OG như 1 loại dữ liệu có cấu trúc (structured data) mà Facebook có thể hiểu được. Hãy thử nghĩ lại xem đã bao giờ bạn chia sẻ một trang web lên Facebook, và thấy thông tin xuất hiện một cách đơn điệu thế này chưa? Xem trước chia sẻ trang web lên Facebook Tôi đã cố ý đưa thiếu thông tin trong mã nguồn để bạn thấy: Thiếu ảnh đại diện, nội dung sơ sài, kém hấp dẫn… Phải vậy không? Nguyên nhân là do trong mã nguồn không khai báo đủ, do đó Facebook không xác định được thông tin quan trọng như ảnh đại diện (hoặc ảnh có kích thước quá nhỏ), tóm tắt nội dung của trang mà bạn vừa chia sẻ. Mạng xã hội này sẽ tự chọn những nội dung có sẵn, và kết quả là hình thức kém lôi cuốn như trên hình. Nhưng chúng ta đang nói về chủ đề SEO web thì chia sẻ trên Facebook, hay các mạng xã hội khác, liệu có liên quan gì nhỉ? Bạn thấy tác dụng của thẻ OG rồi chứ. Chắc hẳn trường hợp có đủ thông tin khai báo với Facebook, thì post mà bạn chia sẻ sẽ hấp dẫn người dùng hơn nhiều. Ở trên tôi mới minh họa Facebook, với nhiều mạng xã hội khác như Twitter, LinkedIn, Pinterest hay Zalo, thì thẻ OG cũng có tác dụng tương tự. Cách sử dụng thẻ meta Open Graph thế nào?Trước hết tôi nói qua một chút về giao thức Open Graph.giao thức Open Graph. Đây là giao thức giúp cho website giao tiếp với mạng xã hội được nhanh chóng hiệu quả. Mạng xã hội lấy thông tin quan trọng trên trang được nhanh gọn, những thông tin như: url, tiêu đề trang, tóm tắt nội dung, ảnh đại diện… Giao thức này do Facebook khởi xướng và áp dụng từ năm 2010, nên có tên đầy đủ là Facebook Open Graph. Sau đó nhiều mạng xã hội khác cũng phát triển công cụ để kết nối với website: hoặc dùng chung cú pháp của Facebook OG, hoặc phát triển giao thức khác có cấu trúc tương tự (Twitter dùng Twitter Cards).Facebook Open Graph. Sau đó nhiều mạng xã hội khác cũng phát triển công cụ để kết nối với website: hoặc dùng chung cú pháp của Facebook OG, hoặc phát triển giao thức khác có cấu trúc tương tự (Twitter dùng Twitter Cards). Cú pháp của Facebook Open Graph có 5 nội dung chính, cùng với nhiều tùy chọn đi kèm. Để hiểu rõ hơn, bạn nhìn vào ảnh dưới đây: Nội dung chính của các thẻ OG Khi chia sẻ hoặc chỉ cần gõ Url của 1 trang web, Facebook nạp trước thông tin, và bạn đã có thể thấy được 4 nội dung - tương ứng với 4 loại thẻ OG:
Để có những thông tin này, thì trong thẻ bạn cần chèn đoạn mã như sau: <meta property="og:title" content="The Rock" /> Giờ chúng ta sẽ tìm hiểu từng loại: og:titleĐây là nhan đề, hay nhiều người gọi là tiêu đề trang cũng được. Phần này sẽ hiển thị là tiêu đề trên phần chia sẻ. Thẻ này tương tự như thẻ , và bạn có thể lấy luôn nội dung của title trang là ổn. Facebook cũng lấy nội dung title, nếu không tìm thấy og:title trong mã code. Để người dùng quan tâm, bạn cần viết phần này thật lôi cuốn. Độ dài thường khoảng từ 60 đến 90 ký tự để hiển thị vừa đẹp trong không gian chia sẻ. Tham khảo thêm về cách viết thẻ tiêu đề tại đây. og:typeThuộc tính này là để mô tả loại đối tượng thông tin (object) mà bạn đang muốn chia sẻ. Trong ví dụ tôi nêu ở phía trên là với trang bài viết (article), thì cú pháp sẽ thế này: <meta property="og:type" content="article"/> Thực tế, bạn có thể chia sẻ nhiều loại đối tượng, trong số đó có những loại phổ biến như:
Bạn có thể tra cứu danh sách đầy đủ các loại OG tại đây. og:urlPhần này thể hiện url của trang mà bạn chia sẻ. Lưu ý: cần nhập Canonical URL - nghĩa là đường dẫn của trang chính, nếu có 2 hay nhiều trang trùng lặp nội dung. >> Tìm hiểu thêm về Canonical URL tại đây. Ví dụ: <meta property="og:url" content="https://carly.com.vn/blog/tu-khoa-lsi-la-gi/"/> og:imageĐây chính là thuộc tính thể hiện ảnh đại diện cho trang bạn chia sẻ trên Facebook. Thuộc tính này nên được cung cấp rõ ràng, ngay cả khi Facebook có thể tự suy ra giá trị từ các thẻ khác. Ví dụ: <meta property="og:image" content="https://carly.com.vn/media/1219/carly-logo-2.png" /> Đây chính là thuộc tính thể hiện ảnh đại diện cho trang bạn chia sẻ trên Facebook. Thuộc tính này nên được cung cấp rõ ràng, ngay cả khi Facebook có thể tự suy ra giá trị từ các thẻ khác. Bạn nên chọn 1 ảnh đại diện đẹp và phù hợp với nội dung, đồng thời hấp dẫn người xem. Nếu không có thẻ og:image này thì Facebook sẽ tự tìm 1 ảnh nào đó trên trang, và rất có thể đó là 1 tấm hình banner quảng cáo nào đó có nội dung chẳng liên quan (chẳng hạn ảnh từ quảng cáo Google banner). Chắc hẳn khi làm SEO, bạn không muốn để Facebook tự xác định ảnh cần hiển thị vậy. Chẳng hạn, nếu không chỉ định bằng thẻ og:image, thì rất có thể trang của bạn sẽ thế này trên Facebook: Không có thuộc tính og:image thì khi chia sẻ có thể xấu thế này Thuộc tính ảnh này có tác dụng rất lớn trong marketing, vì ảnh chụp có nhiều ý nghĩa với người dùng, và rất dễ thu hút chú ý, từ đó người dùng nhấp chuột vào trang để đọc chi tiết. Điều này làm tăng tỷ lệ chuyển đổi (conversion rate). Vì vậy, hãy hướng dẫn cho mạng xã hội biết ảnh nào (đẹp) làm ảnh đại diện (thumbnail) khi ai đó chia sẻ bài viết trên Facebook. Có thể dùng nhiều ảnh, mỗi ảnh khai báo trên 1 dòng og:image. Và cũng khá thú vị khi biết rằng, bạn có thể sử dụng ảnh không có trên trang web mà bạn đang chia sẻ. Nghĩa là có thể lấy ảnh khác (nhưng nên liên quan) để thu hút người lướt Facebook. Ngoài ra, nên dùng ảnh kích thước lớn (dưới 5MB) để tận dụng tối đa hiệu ứng với người dùng. Nhiều chuyên gia SEO khuyên nên dùng ảnh có độ phân giải 1200 x 627 pixel (tỉ lệ 1.91/1). Tôi dùng thử, thì hình chia sẻ rất lớn, nhìn rõ ràng và bắt mắt, như thế này: Có ảnh cỡ lớn được hiển thị trên chia sẻ Chia sẻ trên Facebook với ảnh thumbnail nhỏ Rõ ràng, hình trên kích thước lớn hơn, nhìn bắt mắt hơn nhiều. Và chúng ta làm marketing đều muốn như vậy. Vậy bạn nên lưu ý chi tiết kích thước này để tận dụng lợi thế. og:descriptionThẻ này cũng tương tự như thẻ Meta description trong SEO Onpage. Tại đây, bạn tóm tắt nội dung chính của trang. Nhưng thay vì để thông báo cho Google, thì thẻ này để cung cấp nội dung phần mô tả tóm tắt của trang khi chia sẻ trên Facebook. Mục đích là giống nhau. Ví dụ: <meta property="og:description" content="Tóm tắt nội dung trang tại đây, cần viết cho hấp dẫn người đọc."/> Do không phải là thẻ Meta Description, nên không ảnh hưởng trực tiếp đến SEO. Vì vậy, bạn không cần mất quá nhiều thời gian để trau chuốt, hay cũng không cần cố nghĩ cách hay để đưa từ khóa chính vào làm gì. Mặc dù thế, bạn vẫn nên viết nội dung này sao cho hấp dẫn, để luôi cuốn người dùng nhấp chuột vào xem chi tiết trang. Một số thẻ Open Graph nâng caoNếu không có thời gian hoặc chỉ cần đơn giản, bạn dùng 5 loại thẻ tôi giới thiệu ở phần trên là đủ. Trường hợp, bạn muốn dùng chuyên sâu hơn, thì đây là một số thuộc tính của thẻ Open Graph có thể xem xét thêm:
Ngoài những thẻ nêu trên, nếu bạn có nhu cầu áp dụng thêm, thì có thể tham khảo danh sách đầy đủ hơn các thẻ Open Graph tại đây. Cách tạo thẻ Open Graph nhanhBạn có thể sử dụng một số công cụ open graph generator để khởi tạo mã OG cho nhanh và chính xác. Chẳng hạn như:
Cách thực hiện khá đơn giản. Bạn nhập nội dung cần thiết vào các ô có sẵn rồi Enter là sẽ nhận được những mã cần thiết. Chẳng hạn, tôi dùng smallseotools.com, thì khi nhập thông tin như sau: Nhập thông tin để tạo Open Graph trên SmallSeoTools sẽ được kết quả như hình dưới: Tạo mã các thẻ Open Graph bằng SmallSeoTool Tiếp đó, bạn chỉ cần Copy và dán những dòng code này vào mã nguồn là xong. Khá đơn giản phải không! Kiểm tra thẻ meta Open Graph thế nào?Khi thêm thẻ OG xong, có lẽ bạn cũng muốn xem trước (preview) 1 trang khi chia sẻ lên Facebook thì trông sẽ như thế nào. Cách làm đơn giản thôi, bạn dùng luôn trình gỡ lỗi chia sẻ (Open Graph Debugger) của Facebook. Chỉ cần nhập Url của trang vào ô văn bản rồi nhấn nút Debug hoặc phím Enter. Bạn sẽ thấy hệ thống báo những lỗi hoặc những gợi ý với trang, nếu có. Bạn cũng sẽ thấy được nội dung các thẻ og:title nhìn thế nào, og:image trông ra sao… Căn cứ vào thông báo Facebook đưa ra để bổ sung chỉnh sửa cho phù hợp. Thử test công cụ Open Graph Debugger của Facebook cho ivivu.com Một điều cần lưu ý: dùng chức năng này sẽ xóa cache (bộ nhớ đệm) với Facebook. Nó hoạt động thế này: khi bạn dùng 1 ảnh trong thẻ og:image và chia sẻ trang trên Facebook. Lúc đó, bạn chưa ứng ý, và quay lại thay ảnh khác, và chia sẻ lại. Kỳ lạ thay, tấm ảnh cũ vẫn hiển thị trên đó. Đó là vì Facebook lấy ảnh trong bộ nhớ cache. Để có ảnh mới, bạn cần xóa cache Facebook, và một cách là dùng chính công cụ Sharing Debugger mà tôi đang trình bày ở đây. Công cụ này sẽ thu thập lại và làm mới (refresh) lại bộ nhớ đệm, và bạn sẽ có nội dung cập nhật khi chia sẻ trang lên Facebook. Thẻ meta Open Graph với ZaloZalo cũng sử dụng cú pháp giống như Facebook. Do đó, bạn chỉ cần làm xong các bước ở trên cho Facebook, cũng có thể dùng luôn được với Zalo. Ví dụ của Zalo: <meta property="og:url" content="https://developers.zalo.me/" /> Có thể tìm hiểu thêm cách tạo liên kết để chia sẻ trên Zalo tại đây. Kết luậnSử dụng thẻ meta Open Graph để chia sẻ trang web của bạn lên các mạng xã hội là một trong các kỹ thuật mà người làm SEO cần biết và áp dụng. Bạn có thể áp dụng cho những thuộc tính cơ bản, hoặc nếu có thể, thì cả các thuộc tính nâng cao. Mặc dù không có tác dụng trực tiếp, nhưng sử dụng đúng thẻ meta loại này sẽ giúp tăng tương tác, tăng truy cập, và cải thiện tỷ lệ chuyển đổi. Còn nếu bạn sử dụng dịch vụ SEO chuyên nghiệp, thì cũng nên đề nghị công ty dịch vụ kết hợp với công ty thiết kế web dùng thẻ meta này cho web của bạn. Đến đây tôi xin kết thúc bài viết. Bạn muốn chia sẻ gì về kinh nghiệm của mình khi áp dụng các thẻ Open Graph này? Kết quả thế nào? |
