Thanh Nam
Guest
Trong khi phản ứng là một thư viện JavaScript mạnh mẽ, nó không bao gồm tất cả các phần bạn cần để xây dựng một cách đơn giản, hoạt động Bố trí trang web . NextJS là một khung phản ứng cho phép bạn xây dựng các ứng dụng và trang web được kết xuất máy chủ một cách dễ dàng.
NextJS cũng bao gồm một số công cụ và tính năng ngay trong hộp như WebPack, Babel, định tuyến động và tìm nạp trước. Quan trọng nhất, tôi đã thấy rằng NextJS rất thân thiện với SEO.
Khung này cho phép bạn sử dụng kết xuất phía máy chủ, không chỉ khiến các ứng dụng và trang web của bạn tải nhanh hơn đáng kể mà còn khiến các trang web phản ứng của bạn dễ dàng hơn nhiều cho các công cụ tìm kiếm để thu thập dữ liệu.
NextJS cũng giúp dễ dàng tạo kiến trúc trang web được phân đoạn tốt bằng cách sử dụng định tuyến động hoặc là Định tuyến máy chủ tùy chỉnh . Ví dụ: bạn có thể dễ dàng phân đoạn trang web của mình vào các silo / bài viết khác nhau / bài viết / Sản phẩm / và / dịch vụ / để cấu trúc nội dung tốt hơn.
Trên hết, bạn có thể sử dụng tất cả những thứ khiến phản ứng lớn như các thành phần, thuộc tính thành phần và trạng thái thành phần để triển khai các kỹ thuật tối ưu hóa trên trang thực sự linh hoạt. Trong bài viết này, tôi sẽ chi tiết xây dựng một thành phần đầu được tối ưu hóa để phản ứng.
Tầm quan trọng của phần tử đầu cho SEO
Bây giờ trước khi tôi vào cách xây dựng thành phần đầu này, lần đầu tiên hãy nói về lý do tại sao nó quan trọng và những gì chúng ta sẽ tối ưu hóa.
Phần tử đầu trên trang web của bạn sẽ là một trong những phần quan trọng nhất khi nói đến SEO kỹ thuật. Đối với một, tất cả các siêu dữ liệu trang web được đặt trong đầu. Các thẻ này bao gồm tiêu đề, mô tả meta, từ khóa trang, bất kỳ thông tin tác giả có liên quan và cài đặt khung nhìn.
Phần tử đầu cũng chịu trách nhiệm thiết lập các thẻ quan trọng khác giống như thẻ URL chính tắc của bạn, bất kỳ thẻ OpenGraph nào có liên quan (thẻ og) hoặc thẻ twitter và thẻ robot meta của bạn. Mỗi một trong những thẻ này chịu trách nhiệm truyền đạt các thông tin khác nhau cho Google hoặc các mạng xã hội để họ có thể hiểu rõ hơn, chỉ mục và chia sẻ nội dung của bạn.
Ví dụ: hai trong số các hình phạt tồi tệ nhất mà trang web của bạn có thể phải đối mặt với quan điểm tối ưu hóa trên trang là một 'Thẻ tiêu đề trùng lặp' hình phạt và hình phạt 'Suppicate Meta Tag'. Hai thẻ này chịu trách nhiệm cung cấp 'sân thang máy' của bạn cho Google. Họ cũng ra lệnh cho văn bản mà người dùng sẽ thấy khi trang web của bạn xuất hiện trong kết quả tìm kiếm của Google.
Nếu mọi trang trên trang web của bạn có cùng tiêu đề chính xác và cùng một bộ mô tả chính xác, Google sẽ có một thời gian khó khăn để hiểu trang web của bạn là gì. Do đó, Google sẽ không chú ý quá nhiều vào trang web của bạn và nó chắc chắn sẽ không xem xét đó là một tài sản có thẩm quyền.
Bây giờ bạn đã hiểu thêm một chút về yếu tố đầu và tại sao nó rất quan trọng dưới mui xe, hãy xem cách xây dựng một thành phần đầu thân thiện với SEO để phản ứng.
Xây dựng một thành phần đầu thân thiện với SEO
Thành phần đầu thân thiện với SEO mà tôi chi tiết trong bài viết này dành riêng cho NextJS. Tuy nhiên, nếu bạn đang sử dụng một khung phản ứng khác nhau hoặc chỉ sử dụng phản ứng, bạn có thể sử dụng Mũ bảo hiểm phản ứng thay cho thành phần đầu NextJS.
Điều đầu tiên bạn sẽ muốn làm là thiết lập cấu trúc đầu cơ bản của bạn. Mã dưới đây có thể phục vụ như một ví dụ, nhưng cảm thấy thoải mái để thêm hoặc xóa mọi thứ thành nó như bạn thấy phù hợp. Tuy nhiên, ở mức tối thiểu, đầu của bạn nên bao gồm thẻ tiêu đề, thẻ mô tả Meta, URL chính tắc và bất kỳ thẻ xã hội có liên quan nào.
& lt; Head & GT;
& lt; Tiêu đề & GT; & LT; / Tiêu đề & GT;
& lt; meta name = "mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: gõ" nội dung = "trang web" / & gt;
& lt; meta name = "og: tiêu đề" thuộc tính = "og: tiêu đề" nội dung = "" / & gt;
& lt; meta tên = "og: mô tả" thuộc tính = "og: mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: site_name" nội dung = "" / & gt;
& lt; meta persext = "og: url" nội dung = "" / & gt;
& lt; meta name = "twitter: card" nội dung = "Tóm tắt" / & gt;
& lt; meta tên = "twitter: tiêu đề" nội dung = "" / & gt;
& lt; meta name = "twitter: mô tả" nội dung = {props.desc} / & gt;
& lt; meta name = "twitter: trang web" nội dung = "" / & gt;
& lt; meta name = "twitter: creator" nội dung = "" / & gt;
& lt; link rel = "icon" type = "hình ảnh / png" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "biểu định kiểu" href = "" / & gt;
& lt; meta thuộc tính = "og: hình ảnh" nội dung = "" / & gt;
& lt; meta name = "twitter: hình ảnh" nội dung = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "văn bản / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
Thiết lập thành phần
Tiếp theo, bạn sẽ muốn tạo một tệp một phần mới cho thành phần của mình. Bạn có thể gọi tệp một phần SEO-META.JS. hoặc tương tự. Tập tin này nên được giữ trong một phần. danh mục.
Thành phần bắt đầu của bạn sẽ trông giống như thế này:
Nhập đầu từ 'Next / Head'
const meta = (đạo cụ) = & gt; (
& lt; Head & GT;
& lt; Tiêu đề & GT; & LT; / Tiêu đề & GT;
& lt; meta name = "mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: gõ" nội dung = "trang web" / & gt;
& lt; meta name = "og: tiêu đề" thuộc tính = "og: tiêu đề" nội dung = "" / & gt;
& lt; meta tên = "og: mô tả" thuộc tính = "og: mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: site_name" nội dung = "" / & gt;
& lt; meta persext = "og: url" nội dung = "" / & gt;
& lt; meta name = "twitter: card" nội dung = "Tóm tắt" / & gt;
& lt; meta tên = "twitter: tiêu đề" nội dung = "" / & gt;
& lt; meta name = "twitter: mô tả" nội dung = {props.desc} / & gt;
& lt; meta name = "twitter: trang web" nội dung = "" / & gt;
& lt; meta name = "twitter: creator" nội dung = "" / & gt;
& lt; link rel = "icon" type = "hình ảnh / png" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "biểu định kiểu" href = "" / & gt;
& lt; meta thuộc tính = "og: hình ảnh" nội dung = "" / & gt;
& lt; meta name = "twitter: hình ảnh" nội dung = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "văn bản / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Xuất meta mặc định
Bạn sẽ nhận thấy rằng tôi đang đi qua Đạo cụ hoặc thuộc tính, đến thành phần của tôi. Chúng tôi sẽ sử dụng các thuộc tính này để điền các thẻ meta của chúng tôi.
Nhập khẩu phần
Khi bạn đã thiết lập thành phần cơ bản của mình, sau đó bạn có thể nhập nó vào các trang của mình. Bạn có thể nhập thành phần bằng cách bao gồm các mục sau đây ở đầu trang của bạn.
Nhập meta từ '../partials/seo-mla.js'
Bây giờ bạn có thể đặt thành phần META trong chức năng kết xuất của mình, giống như bạn muốn với thành phần đầu NextJS gốc.
Tạo các thuộc tính thành phần
Bây giờ bạn đã nhập và đặt thành phần META của mình, bạn sẽ muốn thiết lập các thuộc tính bạn sẽ cần cho siêu dữ liệu của mình. Thông thường, bạn nên bao gồm tiêu đề, mô tả và URL cho mỗi trang, nhưng bạn cũng có thể bao gồm hình ảnh và dữ liệu khác khi cần thiết.
Bạn cũng có thể muốn bao gồm các thuộc tính cho các tệp CSS và JavaScript để bạn có điều kiện tải chúng trên các trang khi cần thiết. Với tất cả các thuộc tính đó, thành phần của bạn sẽ trông giống như thế này:
& lt; meta
Tiêu đề = Đây là một tiêu đề | Tên trang web "
desc = "Đây là mô tả"
Canonical = "https://www.somebl.com"
css = '/ static / css / styles.css'
js = '/ static / js / script.js'
/ & gt;
Nếu bạn chỉ đang xây dựng một trang web tĩnh với NextJS, bạn sẽ có thể điền các thuộc tính với nội dung tĩnh. Tuy nhiên, nếu bạn đang tải các trang từ các tuyến động và điền vào các mẫu trang bằng mã động, bạn sẽ muốn đặt các thuộc tính này một cách linh hoạt.
Website của chúng tôi, Danh từ riêng , sử dụng API WordPress dưới dạng nguồn dữ liệu, nhưng bạn có thể sử dụng các hướng dẫn bên dưới bằng cách sử dụng khá nhiều phần còn lại hoặc API GRAPHQL.
Khi yêu cầu trang, bạn sẽ muốn lấy và trả về dữ liệu siêu dữ liệu và trang có liên quan trong suốt getInitialprops () async chức năng. Sau đó, điều này sẽ cho phép bạn sử dụng dữ liệu động trong chức năng kết xuất để Google và các robot khác có thể thu thập thông tin.
Tùy thuộc vào nguồn dữ liệu của bạn và một vài yếu tố khác, bạn có thể thực hiện một cách tiếp cận khác để có được các thuộc tính ban đầu, nhưng đây là một cách tiếp cận cơ bản để giúp bạn bắt đầu.
async getinitialprops (CTX) {
Const Res = Await Fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode: Sai;
Const Data = Await Res.json ();
Hãy để url = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
hãy để meta_title = chờ dữ liệu .meta_title
Hãy để meta_desc = chờ dữ liệu .meta_desc
trở về {
error_code,
Case_study: Dữ liệu,
meta_title: meta_title,
meta_desc: meta_desc,
URL: URL.
Không thể
Không thể
Bây giờ bạn sẽ có thể truy cập các thuộc tính bạn đặt trong chức năng kết xuất của mình. Khi được sử dụng trong mã của bạn, họ sẽ trông giống như thế này.
& lt; meta
Tiêu đề = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
css = '/ static / css / styles.css'
js = '/ static / js / script.js'
/ & gt;
Sử dụng các thuộc tính trong thành phần của bạn
Bước cuối cùng là thiết lập thành phần của bạn để nó sử dụng các thuộc tính mà nó đang được truyền. Trong khi một số thuộc tính như tiêu đề và mô tả sẽ được đặt trên mỗi trang, những phần khác như CSS và JS có thể có điều kiện. Bạn sẽ muốn xem xét điều này trong thành phần của bạn.
Trong ví dụ của chúng tôi, chúng tôi sẽ chuyển các thuộc tính của chúng tôi đến thành phần bằng cách sử dụng đối số Đạo cụ . Sau đó, chúng tôi có thể truy cập các đạo cụ riêng lẻ bằng tên của họ, ví dụ: Đạo cụ.Title. hoặc là Đạo cụ.Desc. .
Khi cài đặt các khối có điều kiện, bạn có thể thực hiện một cách tiếp cận như thế này:
{
Đạo cụ.css & amp; & amp;
& lt; link rel = "biểu định kiểu" href = {`$ {props.css}`} / & gt;
}
Bằng cách này, nếu không có bộ CSS, bạn sẽ không đặt thẻ liên kết trống trên trang của mình. Bạn có thể sử dụng cách tiếp cận tương tự này cho các tệp JavaScript.
Khi bạn đã hoàn thành thành phần đầu của bạn, nó sẽ trông giống như thế này:
Nhập đầu từ 'Next / Head'
const meta = (đạo cụ) = & gt; (
& lt; Head & GT;
& lt; tiêu đề & gt; {props.title} & lt; / title & gt;
& lt; meta name = "mô tả" nội dung = {props.desc} / & gt;
& lt; meta persext = "og: gõ" nội dung = "trang web" / & gt;
& lt; meta name = "og: tiêu đề" thuộc tính = "og: tiêu đề" nội dung = {props.title} / & gt;
& lt; meta name = "og: mô tả" thuộc tính = "og: mô tả" nội dung = {props.desc} / & gt;
& lt; meta persext = "og: site_name" nội dung = "Danh từ thích hợp" / & gt;
& lt; meta persext = "og: url" nội dung = {`$ {props.canonical}`} / & gt;
& lt; meta name = "twitter: card" nội dung = "Tóm tắt" / & gt;
& lt; meta name = "twitter: tiêu đề" nội dung = {props.title} / & gt;
& lt; meta name = "twitter: mô tả" nội dung = {props.desc} / & gt;
& lt; meta name = "twitter: trang web" nội dung = "@ propernoungco" / & gt;
& lt; meta name = "twitter: creator" nội dung = "@ propernoungco" / & gt;
& lt; link rel = "icon" type = "hình ảnh / png" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / hình ảnh / favicon.ico" / & gt;
Đồn là
Đạo cụ.css & amp; & amp;
& lt; link rel = "biểu định kiểu" href = {`$ {props.css}`} / & gt;
Không thể
Đồn là
Đạo cụ.Image? (
& lt; meta persext = "og: hình ảnh" nội dung = {`$ {props.image}`} / & gt;
): (
& lt; meta persext = "og: hình ảnh" nội dung = "https://www.properrounun.co/static/images/proper-noun-social.png" / & gt;
)
Không thể
Đồn là
Đạo cụ.Image & amp; & amp;
& lt; meta name = "twitter: hình ảnh" nội dung = {`$ {props.image}`} / & gt;
Không thể
Đồn là
Đạo cụ.Canonical & amp; & amp;
& lt; liên kết rel = "canonical" href = {`$ {props.canonical}`} / & gt;
Không thể
Đồn là
Đạo cụ.js & amp; & amp;
& lt; script type = "văn bản / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
Không thể
& lt; / head & gt;
)
NextJS cũng bao gồm một số công cụ và tính năng ngay trong hộp như WebPack, Babel, định tuyến động và tìm nạp trước. Quan trọng nhất, tôi đã thấy rằng NextJS rất thân thiện với SEO.
Khung này cho phép bạn sử dụng kết xuất phía máy chủ, không chỉ khiến các ứng dụng và trang web của bạn tải nhanh hơn đáng kể mà còn khiến các trang web phản ứng của bạn dễ dàng hơn nhiều cho các công cụ tìm kiếm để thu thập dữ liệu.
NextJS cũng giúp dễ dàng tạo kiến trúc trang web được phân đoạn tốt bằng cách sử dụng định tuyến động hoặc là Định tuyến máy chủ tùy chỉnh . Ví dụ: bạn có thể dễ dàng phân đoạn trang web của mình vào các silo / bài viết khác nhau / bài viết / Sản phẩm / và / dịch vụ / để cấu trúc nội dung tốt hơn.
Trên hết, bạn có thể sử dụng tất cả những thứ khiến phản ứng lớn như các thành phần, thuộc tính thành phần và trạng thái thành phần để triển khai các kỹ thuật tối ưu hóa trên trang thực sự linh hoạt. Trong bài viết này, tôi sẽ chi tiết xây dựng một thành phần đầu được tối ưu hóa để phản ứng.
Tầm quan trọng của phần tử đầu cho SEO
Bây giờ trước khi tôi vào cách xây dựng thành phần đầu này, lần đầu tiên hãy nói về lý do tại sao nó quan trọng và những gì chúng ta sẽ tối ưu hóa.
Phần tử đầu trên trang web của bạn sẽ là một trong những phần quan trọng nhất khi nói đến SEO kỹ thuật. Đối với một, tất cả các siêu dữ liệu trang web được đặt trong đầu. Các thẻ này bao gồm tiêu đề, mô tả meta, từ khóa trang, bất kỳ thông tin tác giả có liên quan và cài đặt khung nhìn.
Phần tử đầu cũng chịu trách nhiệm thiết lập các thẻ quan trọng khác giống như thẻ URL chính tắc của bạn, bất kỳ thẻ OpenGraph nào có liên quan (thẻ og) hoặc thẻ twitter và thẻ robot meta của bạn. Mỗi một trong những thẻ này chịu trách nhiệm truyền đạt các thông tin khác nhau cho Google hoặc các mạng xã hội để họ có thể hiểu rõ hơn, chỉ mục và chia sẻ nội dung của bạn.
Có siêu dữ liệu được cấu hình không đúng trên trang web của bạn có thể là thảm họa đối với tối ưu hóa trang web tổng thể của bạn và chắc chắn có thể khiến bảng xếp hạng của bạn có một mũi.
Ví dụ: hai trong số các hình phạt tồi tệ nhất mà trang web của bạn có thể phải đối mặt với quan điểm tối ưu hóa trên trang là một 'Thẻ tiêu đề trùng lặp' hình phạt và hình phạt 'Suppicate Meta Tag'. Hai thẻ này chịu trách nhiệm cung cấp 'sân thang máy' của bạn cho Google. Họ cũng ra lệnh cho văn bản mà người dùng sẽ thấy khi trang web của bạn xuất hiện trong kết quả tìm kiếm của Google.
Nếu mọi trang trên trang web của bạn có cùng tiêu đề chính xác và cùng một bộ mô tả chính xác, Google sẽ có một thời gian khó khăn để hiểu trang web của bạn là gì. Do đó, Google sẽ không chú ý quá nhiều vào trang web của bạn và nó chắc chắn sẽ không xem xét đó là một tài sản có thẩm quyền.
Bây giờ bạn đã hiểu thêm một chút về yếu tố đầu và tại sao nó rất quan trọng dưới mui xe, hãy xem cách xây dựng một thành phần đầu thân thiện với SEO để phản ứng.
Xây dựng một thành phần đầu thân thiện với SEO
Thành phần đầu thân thiện với SEO mà tôi chi tiết trong bài viết này dành riêng cho NextJS. Tuy nhiên, nếu bạn đang sử dụng một khung phản ứng khác nhau hoặc chỉ sử dụng phản ứng, bạn có thể sử dụng Mũ bảo hiểm phản ứng thay cho thành phần đầu NextJS.
Điều đầu tiên bạn sẽ muốn làm là thiết lập cấu trúc đầu cơ bản của bạn. Mã dưới đây có thể phục vụ như một ví dụ, nhưng cảm thấy thoải mái để thêm hoặc xóa mọi thứ thành nó như bạn thấy phù hợp. Tuy nhiên, ở mức tối thiểu, đầu của bạn nên bao gồm thẻ tiêu đề, thẻ mô tả Meta, URL chính tắc và bất kỳ thẻ xã hội có liên quan nào.
& lt; Head & GT;
& lt; Tiêu đề & GT; & LT; / Tiêu đề & GT;
& lt; meta name = "mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: gõ" nội dung = "trang web" / & gt;
& lt; meta name = "og: tiêu đề" thuộc tính = "og: tiêu đề" nội dung = "" / & gt;
& lt; meta tên = "og: mô tả" thuộc tính = "og: mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: site_name" nội dung = "" / & gt;
& lt; meta persext = "og: url" nội dung = "" / & gt;
& lt; meta name = "twitter: card" nội dung = "Tóm tắt" / & gt;
& lt; meta tên = "twitter: tiêu đề" nội dung = "" / & gt;
& lt; meta name = "twitter: mô tả" nội dung = {props.desc} / & gt;
& lt; meta name = "twitter: trang web" nội dung = "" / & gt;
& lt; meta name = "twitter: creator" nội dung = "" / & gt;
& lt; link rel = "icon" type = "hình ảnh / png" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "biểu định kiểu" href = "" / & gt;
& lt; meta thuộc tính = "og: hình ảnh" nội dung = "" / & gt;
& lt; meta name = "twitter: hình ảnh" nội dung = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "văn bản / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
Thiết lập thành phần
Tiếp theo, bạn sẽ muốn tạo một tệp một phần mới cho thành phần của mình. Bạn có thể gọi tệp một phần SEO-META.JS. hoặc tương tự. Tập tin này nên được giữ trong một phần. danh mục.
Thành phần bắt đầu của bạn sẽ trông giống như thế này:
Nhập đầu từ 'Next / Head'
const meta = (đạo cụ) = & gt; (
& lt; Head & GT;
& lt; Tiêu đề & GT; & LT; / Tiêu đề & GT;
& lt; meta name = "mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: gõ" nội dung = "trang web" / & gt;
& lt; meta name = "og: tiêu đề" thuộc tính = "og: tiêu đề" nội dung = "" / & gt;
& lt; meta tên = "og: mô tả" thuộc tính = "og: mô tả" nội dung = "" / & gt;
& lt; meta persext = "og: site_name" nội dung = "" / & gt;
& lt; meta persext = "og: url" nội dung = "" / & gt;
& lt; meta name = "twitter: card" nội dung = "Tóm tắt" / & gt;
& lt; meta tên = "twitter: tiêu đề" nội dung = "" / & gt;
& lt; meta name = "twitter: mô tả" nội dung = {props.desc} / & gt;
& lt; meta name = "twitter: trang web" nội dung = "" / & gt;
& lt; meta name = "twitter: creator" nội dung = "" / & gt;
& lt; link rel = "icon" type = "hình ảnh / png" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "biểu định kiểu" href = "" / & gt;
& lt; meta thuộc tính = "og: hình ảnh" nội dung = "" / & gt;
& lt; meta name = "twitter: hình ảnh" nội dung = "" / & gt;
& lt; link rel = "canonical" href = "" / & gt;
& lt; script type = "văn bản / javascript" src = "" & gt; & lt; / script & gt;
& lt; / head & gt;
)
Xuất meta mặc định
Bạn sẽ nhận thấy rằng tôi đang đi qua Đạo cụ hoặc thuộc tính, đến thành phần của tôi. Chúng tôi sẽ sử dụng các thuộc tính này để điền các thẻ meta của chúng tôi.
Nhập khẩu phần
Khi bạn đã thiết lập thành phần cơ bản của mình, sau đó bạn có thể nhập nó vào các trang của mình. Bạn có thể nhập thành phần bằng cách bao gồm các mục sau đây ở đầu trang của bạn.
Nhập meta từ '../partials/seo-mla.js'
Bây giờ bạn có thể đặt thành phần META trong chức năng kết xuất của mình, giống như bạn muốn với thành phần đầu NextJS gốc.
Tạo các thuộc tính thành phần
Bây giờ bạn đã nhập và đặt thành phần META của mình, bạn sẽ muốn thiết lập các thuộc tính bạn sẽ cần cho siêu dữ liệu của mình. Thông thường, bạn nên bao gồm tiêu đề, mô tả và URL cho mỗi trang, nhưng bạn cũng có thể bao gồm hình ảnh và dữ liệu khác khi cần thiết.
Bạn cũng có thể muốn bao gồm các thuộc tính cho các tệp CSS và JavaScript để bạn có điều kiện tải chúng trên các trang khi cần thiết. Với tất cả các thuộc tính đó, thành phần của bạn sẽ trông giống như thế này:
& lt; meta
Tiêu đề = Đây là một tiêu đề | Tên trang web "
desc = "Đây là mô tả"
Canonical = "https://www.somebl.com"
css = '/ static / css / styles.css'
js = '/ static / js / script.js'
/ & gt;
Nếu bạn chỉ đang xây dựng một trang web tĩnh với NextJS, bạn sẽ có thể điền các thuộc tính với nội dung tĩnh. Tuy nhiên, nếu bạn đang tải các trang từ các tuyến động và điền vào các mẫu trang bằng mã động, bạn sẽ muốn đặt các thuộc tính này một cách linh hoạt.
Website của chúng tôi, Danh từ riêng , sử dụng API WordPress dưới dạng nguồn dữ liệu, nhưng bạn có thể sử dụng các hướng dẫn bên dưới bằng cách sử dụng khá nhiều phần còn lại hoặc API GRAPHQL.
Khi yêu cầu trang, bạn sẽ muốn lấy và trả về dữ liệu siêu dữ liệu và trang có liên quan trong suốt getInitialprops () async chức năng. Sau đó, điều này sẽ cho phép bạn sử dụng dữ liệu động trong chức năng kết xuất để Google và các robot khác có thể thu thập thông tin.
Tùy thuộc vào nguồn dữ liệu của bạn và một vài yếu tố khác, bạn có thể thực hiện một cách tiếp cận khác để có được các thuộc tính ban đầu, nhưng đây là một cách tiếp cận cơ bản để giúp bạn bắt đầu.
async getinitialprops (CTX) {
Const Res = Await Fetch ('// api.some-url.com/case_studies/?slug=' + ctx.req.params.slug)
const error_code = res.statuscode & gt; 200? res.statuscode: Sai;
Const Data = Await Res.json ();
Hãy để url = 'https: //' + ctx.req.headers.host + '/' + ctx.req.params.slug
hãy để meta_title = chờ dữ liệu .meta_title
Hãy để meta_desc = chờ dữ liệu .meta_desc
trở về {
error_code,
Case_study: Dữ liệu,
meta_title: meta_title,
meta_desc: meta_desc,
URL: URL.
Không thể
Không thể
Bây giờ bạn sẽ có thể truy cập các thuộc tính bạn đặt trong chức năng kết xuất của mình. Khi được sử dụng trong mã của bạn, họ sẽ trông giống như thế này.
& lt; meta
Tiêu đề = {this.props.meta_title}
desc = {this.props.meta_desc}
canonical = {this.props.url}
css = '/ static / css / styles.css'
js = '/ static / js / script.js'
/ & gt;
Sử dụng các thuộc tính trong thành phần của bạn
Bước cuối cùng là thiết lập thành phần của bạn để nó sử dụng các thuộc tính mà nó đang được truyền. Trong khi một số thuộc tính như tiêu đề và mô tả sẽ được đặt trên mỗi trang, những phần khác như CSS và JS có thể có điều kiện. Bạn sẽ muốn xem xét điều này trong thành phần của bạn.
Trong ví dụ của chúng tôi, chúng tôi sẽ chuyển các thuộc tính của chúng tôi đến thành phần bằng cách sử dụng đối số Đạo cụ . Sau đó, chúng tôi có thể truy cập các đạo cụ riêng lẻ bằng tên của họ, ví dụ: Đạo cụ.Title. hoặc là Đạo cụ.Desc. .
Khi cài đặt các khối có điều kiện, bạn có thể thực hiện một cách tiếp cận như thế này:
{
Đạo cụ.css & amp; & amp;
& lt; link rel = "biểu định kiểu" href = {`$ {props.css}`} / & gt;
}
Bằng cách này, nếu không có bộ CSS, bạn sẽ không đặt thẻ liên kết trống trên trang của mình. Bạn có thể sử dụng cách tiếp cận tương tự này cho các tệp JavaScript.
Khi bạn đã hoàn thành thành phần đầu của bạn, nó sẽ trông giống như thế này:
Nhập đầu từ 'Next / Head'
const meta = (đạo cụ) = & gt; (
& lt; Head & GT;
& lt; tiêu đề & gt; {props.title} & lt; / title & gt;
& lt; meta name = "mô tả" nội dung = {props.desc} / & gt;
& lt; meta persext = "og: gõ" nội dung = "trang web" / & gt;
& lt; meta name = "og: tiêu đề" thuộc tính = "og: tiêu đề" nội dung = {props.title} / & gt;
& lt; meta name = "og: mô tả" thuộc tính = "og: mô tả" nội dung = {props.desc} / & gt;
& lt; meta persext = "og: site_name" nội dung = "Danh từ thích hợp" / & gt;
& lt; meta persext = "og: url" nội dung = {`$ {props.canonical}`} / & gt;
& lt; meta name = "twitter: card" nội dung = "Tóm tắt" / & gt;
& lt; meta name = "twitter: tiêu đề" nội dung = {props.title} / & gt;
& lt; meta name = "twitter: mô tả" nội dung = {props.desc} / & gt;
& lt; meta name = "twitter: trang web" nội dung = "@ propernoungco" / & gt;
& lt; meta name = "twitter: creator" nội dung = "@ propernoungco" / & gt;
& lt; link rel = "icon" type = "hình ảnh / png" href = "/ static / hình ảnh / favicon.ico" / & gt;
& lt; link rel = "apple-touch-icon" href = "/ static / hình ảnh / favicon.ico" / & gt;
Đồn là
Đạo cụ.css & amp; & amp;
& lt; link rel = "biểu định kiểu" href = {`$ {props.css}`} / & gt;
Không thể
Đồn là
Đạo cụ.Image? (
& lt; meta persext = "og: hình ảnh" nội dung = {`$ {props.image}`} / & gt;
): (
& lt; meta persext = "og: hình ảnh" nội dung = "https://www.properrounun.co/static/images/proper-noun-social.png" / & gt;
)
Không thể
Đồn là
Đạo cụ.Image & amp; & amp;
& lt; meta name = "twitter: hình ảnh" nội dung = {`$ {props.image}`} / & gt;
Không thể
Đồn là
Đạo cụ.Canonical & amp; & amp;
& lt; liên kết rel = "canonical" href = {`$ {props.canonical}`} / & gt;
Không thể
Đồn là
Đạo cụ.js & amp; & amp;
& lt; script type = "văn bản / javascript" src = {`$ {props.js}`} & gt; & lt; / script & gt;
Không thể
& lt; / head & gt;
)