Sử dụng Google Tag Manager để tự động tạo ra các thẻ Schema.org/JSON-LD

(Thegioiseo) - Một trong những chủ đề lớn nhất từ SearchFest ở Portland vào đầu năm nay là tầm quan trọng của tìm kiếm ngữ nghĩa và cấu trúc dữ liệu - đặc biệt Schema.org. Và trong khi Schema được sử dụng để đánh dấu trang web của bạn thì định dạng JSON-LD đã tạo ra một sự thay thế tuyệt vời để thêm microdata cho một trang với minimal code.

Ý tưởng là bạn có thể sử dụng Google Tag Manager để chèn JSON-LD vào một trang, cho phép bạn thêm đánh dấu Schema đến trang web của bạn mà không cần phải chạm vào code của trang web trực tiếp.

Tag Manager sẽ cho phép bạn chèn một đoạn JSON-LD trên trang, nó đã không xuất hiện để có thể sử dụng các tính năng Tag Manager khác để tự động tạo ra đoạn mã đó. Tag Manager cho phép bạn tạo ra sự biến đổi bằng cách trích xuất nội dung từ trang bằng cách sử dụng bộ chọn CSS hay một số mã JavaScript cơ bản. Sau đó, các biến số này có thể được sử dụng tự động trong thẻ của bạn.

Vì vậy nếu chúng ta muốn lấy URL và tự động đi qua nó đến snippet JSON-LD, chúng ta có thể đã cố gắng một điều gì đó như này:

​

Nhưng điều đó không làm việc. Có nghĩa là nếu bạn muốn sử dụng GTM để thêm loại BlogPosting Schema vào mỗi bài viết trên blog của bạn, bạn sẽ phải tạo ra một thẻ khác và kích hoạt (dựa trên URL) cho mỗi bài viết.

Nhưng với một thử nghiệm, tôi đã tìm ra phép thuật để làm cho JavaScript có thể trích xuất dữ liệu từ các nội dung hiện có trên trang web và tự động tạo ra một snippet JSON-LD hợp lệ.

Tự động tạo ra JSON-LD

Lý do tại sao ví dụ đầu tiên của chúng tôi không làm việc là vì Tag Manager thay thế mỗi một biến với một phần nhỏ của JavaScript để gọi một hàm - trả về giá trị của biến được gọi. Chúng ta có thể thấy lỗi này trong Google Structured Data Testing Tool:

​

Lỗi này là kết quả khi Tag Manager chèn JavaScript vào một thẻ JSON - điều này là không hợp lệ và vì vậy các thẻ bị lỗi. Tuy nhiên, chúng ta có thể sử dụng Tag Manager để chèn một thẻ JavaScript.

​

Nếu bạn không quen với JavaScript, điều này có thể khá phức tạp nhưng nó hoạt động một cách chính xác giống như nhiều thẻ khác mà bạn có thể đã sử dụng (như Google Analytics hoặc Tag Manager).

Ở đây, dữ liệu Schema được chứa trong đối tượng "data" JavaScript mà chúng ta có thể tự động di chuyển với các biến từ Tag Manager. Sau đó, snippet tạo ra một thẻ script trên trang với loại (application/ld+json) và thao tác trên thẻ với dữ liệu của chúng tôi, chúng tôi chuyển sang JSON bằng cách sử dụng chức năng JSON.stringify.

Mục đích của ví dụ này chỉ đơn giản là để chứng minh kịch bản này làm việc như thế nào. Vì vậy, chúng ta hãy xem nó được sử dụng trong thế giới thực như thế nào.

Tự động tạo ra thẻ Schema.org với các bài viết

Bắt đầu với một mẫu Schema hợp lệ. Đầu tiên, xây dựng một snippet JSON/LD hoàn thiện với một bài duy nhất dựa trên các đặc điểm kỹ thuật schema.org/BlogPosting.

​

Xác định các biến động cần thiết

Có một biến sẽ giống nhau giữa các bài viết, ví dụ như thông tin nhà xuất bản. Tương tự như vậy, hình ảnh chính cho mỗi bài viết có kích thước cụ thể được tạo ra bởi WordPress sẽ luôn luôn giống nhau giữa các bài viết, vì vậy chúng tôi có thể giữ cho chiều cao và chiều rộng của biến.

Trong trường hợp của chúng tôi, chúng tôi đã xác định được 7 biến thay đổi giữa các bài viết mà chúng tôi muốn di chuyển:

​

Tạo các biến trong Google Tag Manager

- ID Entity chính: URL page

- Headline: Chúng tôi sẽ làm cho nó trở nên đơn giản và sử dụng tiêu đề trang

- Date Published và Modified: Blog của chúng tôi là trên WordPress, vì vậy chúng tôi đã có thẻ meta cho "articleublished_time" và "article:modified_time". Modified_time thường không được tính (trừ khi bài viết được sửa đổi sau khi xuất bản), nhưng Schema khuyến cáo nên đưa nó vào, vì vậy chúng tôi phải thiết lập dateModified vào published date nếu nó không có một modified date. Trong một số trường hợp, chúng tôi có thể cần phải định dạng lại ngày - rất may là, trong trường hợp này, nó đã có định dạng ISO 860, điều này là rất tốt.

- Author Name: Trong một số trường hợp chúng tôi sẽ cần phải trích xuất nội dung từ trang này. Blog của chúng tôi liệt kê author và published date.

​

- Article Image: Blog của chúng tôi đã cài đặt Yoast, trong đó đã xác định hình ảnh trên Twitter và Open Graph.

- Article Description: Chúng tôi sẽ sử dụng meta description

Đây là kịch bản chèn của chúng tôi, một lần nữa, chúng tôi sẽ sử dụng trong thẻ của chúng tôi, thời gian này với các tính chất hoán đổi cho các biến, chúng tôi sẽ cần phải tạo ra:

​

Rút những giá trị meta

Rất may là, Tag Manager làm cho việc rút những giá trị từ phần tử DOM thực sự dễ dàng - đặc biệt là bởi vì, với các thuộc tính meta, giá trị chính xác chúng tôi cần sẽ ở trong các thuộc tính của phần tử. Để trích xuất tiêu đề trang, chúng tôi có thể nhận được giá trị của thẻ <title>. Chúng tôi không cần phải chỉ định một tên thuộc tính cho điều này:

​

Với thuộc tính meta, chúng tôi có thể trích xuất giá trị từ thuộc tính nội dung:

​

Tag Manager cũng có một vài biến tích hợp hữu ích mà chúng ta có thể tận dụng - trong trường hợp này là Page URL:

​

Xử lý các phần tử trang

Để trích xuất tên tác giả, chúng tôi sẽ cần phải sử dụng một số tùy chỉnh JavaScript để lấy văn bản mà chúng tôi muốn và bóc tách 3 ký tự cuối cùng (" | ") để nhận được tên tác giả.

Trong trường hợp có một vấn đề với selector này, tôi cũng đã đưa vào một dự phòng (chỉ tên công ty của chúng tôi), để đảm bảo rằng nếu selector của chúng tôi bị lỗi giá trị trả về.

​

Testing

Tag Manager có một tính năng tuyệt vời cho phép bạn thử nghiệm trước khi triển khai chúng:

​

Khi chúng tôi có các biến của chúng tôi, chúng tôi có thể vào chế độ Preview và đi đến một trong các bài viết của chúng tôi:

​

Ở đây chúng tôi có thể kiểm tra các giá trị của tất cả các biến của chúng tôi để đảm bảo rằng các giá trị chính xác được thông qua.

Cuối cùng, chúng tôi thiết lập thẻ của chúng tôi và cấu hình nó theo như những gì chúng tôi muốn. Trong trường hợp này, chúng tôi chỉ cần đưa các thẻ này vào bài viết blog:

​

Và đây là phiên bản cuối cùng của thẻ.

Đối với tham số dateModified của chúng tôi, chúng tôi đã thêm một vài dòng code để kiểm tra xem biến của chúng tôi có được thiết lập hay không và nếu nó chưa được thiết lập, chúng tôi sẽ đặt biến JSON-LD "dateModified" ở đây.

​

Bây giờ chúng ta có thể lưu thẻ, triển khai các phiên bản hiện tại và sau đó sử dụng Google Structured Data Testing Tool để xác nhận công việc của chúng tôi:

​

Đây chỉ là một phiên bản đầu tiên của mã này, nó được sử dụng để kiểm tra ý tưởng chúng ta có thể sử dụng Google Tag Manager để tự động chèn thẻ JSON-LD/Schema.org. Tuy nhiên chỉ sau một vài ngày, chúng tôi đã kiểm tra với Google Search Console và nó khẳng định Schema BlogPosting đã thành công trên tất cả các bài viết blog của chúng tôi, vì vậy tôi nghĩ rằng đây là một phương pháp hữu hiệu để thực hiện với các dữ liệu có cấu trúc.

​

Dữ liệu có cấu trúc đang trở thành một phần quan trọng trong công việc của một SEO và với các kỹ thuật như thế này, chúng tôi có thể cải thiện đáng kể khả năng của chúng tôi để thực hiện dữ liệu có cấu trúc một cách hiệu quả và với chi phí kỹ thuật tối thiểu.

Lưu ý rằng: Đây là một bài viết khó cần người đọc kỹ nội dung, hình ảnh... để hiểu cốt lõi vấn đề mà bài viết muốn truyền tải.

Ghi nguồn www.thegioiseo.com khi đăng tải lại bài viết này.
Bài viết có tham khảo và sử dụng nội dung từ Moz.
Link: Sử dụng Google Tag Manager để tự động tạo ra các thẻ Schema.org/JSON-LD.​

Em thường vào thẳng trang Schema.org luôn. Trong đó có cái document hướng dẫn chi tiết chỉ cần thay đổi 1 số cái theo mẫu định dạng là ok rồi à

Bên em xây dựng site mới dùng thể Tag để gom lại những nhóm sản phẩm cùng chủ đề, cùng công dụng để seo một lượt nhiều sp luôn, nhưng mà làm thẻ Tag này bằng tay chứ không dùng tự động, em nghĩ nếu tự động thì khó có thể kiểm soát và kiểm tra được hiệu quả.

cái này có lợi gì trong seo ko vậy ae

Cái này hơi khó đấy, vì đơn giản SEOer khó biết nhiều như thế này về code lắm. Có lẽ sẽ nhờ bên kĩ thuật sẽ tốt hơn nhiều đấy

phải nghiên cứu thêm các bác ah.

nhìn loàng ngoàng quá , khó hiểu ghê luông, có bạn nào giải thích chi tiết được chứ

Nếu dùng tay được như bạn thì tốt nhất. Còn nếu quá nhiều thì nên tự động hóa sẽ là điều lựa chọn chính xác!

Cái này liên quan đến code nhiều quá, đối với seoer thì rất khó để thực hiện cái này. Nếu là trang sản phẩm lớn thì nên bảo bộ phận code thêm vào cho dễ quản lí.

Loàng ngoàng quá, đối vs nhũng site nhỏ thì vấn đề này không quá quan trọng. Theo mình là như vậy

code là thua rồi, cái này chắc chỉ có pro mới hiểu được thôi

Đang tìm hiểu về cái tag manager này. Mới dùng cho GA còn chưa thử JSON-LD. Thanks thớt, ngâm cứu phát

vào tạo chẳng biết gì @@

đoc xong bài này mình chả hiểu gì luôn @@

sao em cứ thấy khó hiểu thế nào ý nhỉ @@

em làm nó bị lỗi này là thế nào mấy bác "Có loại không hợp lệ trong JSON-LD của bạn."

Đang nghiên cứu cái Dynamic remaketing bằng GTM mà thấy loằng ngoằng quá bác nói rành cái này có tài liệu nào dễ hiểu chút không share mình với.