Cách triển khai Giao thức đồ thị mở trong Next.js
Bạn đã bao giờ muốn trang Next.js của mình hiển thị như một đối tượng phong phú khi được chia sẻ trên phương tiện truyền thông xã hội? Nếu vậy, bạn cần triển khai giao thức Open Graph.
Gói next-seo giúp bạn dễ dàng thêm các thẻ Open Graph vào trang Next.js của mình. Bạn cũng có thể sử dụng cách tiếp cận thủ công hơn để kiểm soát tốt hơn kết quả đã hoàn thành.
Cuối cùng, bạn sẽ muốn xem xét chính xác thông tin nào cần đưa vào thẻ của mình.
Mục Lục
Đồ thị mở là gì?
Giao thức Open Graph là một tiêu chuẩn mở cho phép các nhà phát triển kiểm soát cách phương tiện truyền thông xã hội hiển thị nội dung của họ. Nó ban đầu được phát triển bởi Facebook nhưng nhiều nền tảng khác đã áp dụng giao thức này. Chúng bao gồm Twitter, LinkedIn và Pinterest.
Open Graph cho phép bạn chỉ định chính xác cách các trang web khác sẽ hiển thị nội dung của bạn, đảm bảo rằng nó trông đẹp và dễ đọc. Nó cũng cho phép kiểm soát tốt hơn cách các liên kết hiển thị. Điều này giúp bạn dễ dàng theo dõi số lần nhấp qua và các chỉ số tương tác khác.
Tại sao sử dụng Giao thức đồ thị mở?
Có ba lĩnh vực chính mà Open Graph nên cải thiện: tương tác với mạng xã hội, SEO và lưu lượng truy cập trang web.
1. Cải thiện sự tương tác trên mạng xã hội
Open Graph có thể giúp cải thiện mức độ tương tác trên mạng xã hội bằng cách giúp người dùng chia sẻ nội dung của bạn dễ dàng hơn. Bằng cách chỉ định cách các trang web sẽ hiển thị nội dung của bạn, bạn có thể làm cho nội dung của bạn trở nên hấp dẫn và dễ đọc hơn. Do đó, điều này có thể dẫn đến nhiều lượt chia sẻ và lượt thích hơn, cũng như tăng tỷ lệ nhấp.
2. Tăng cường SEO
Open Graph cũng có thể giúp cải thiện SEO của bạn. Bằng cách chỉ định tiêu đề, mô tả và hình ảnh cho từng phần nội dung, bạn có thể kiểm soát cách nó xuất hiện trong kết quả tìm kiếm. Điều này có thể giúp tăng tỷ lệ nhấp vào trang web của bạn, cũng như cải thiện xếp hạng tổng thể của bạn.
3. Tăng lưu lượng truy cập trang web
Cuối cùng, Open Graph có thể giúp tăng lưu lượng truy cập trang web. Bằng cách giúp người dùng chia sẻ nội dung của bạn dễ dàng hơn, bạn có thể tăng số lượng người xem nội dung đó. Do đó, điều này có thể dẫn đến nhiều khách truy cập trang web hơn và tăng lưu lượng truy cập.
4. Cải thiện trải nghiệm người dùng
Một lợi ích khác của việc sử dụng giao thức Open Graph là nó có thể cải thiện trải nghiệm người dùng trên trang web của bạn. Bằng cách bao gồm siêu dữ liệu, bạn có thể hỗ trợ khả năng truy cập và sử dụng lại dữ liệu, đảm bảo rằng người dùng nhìn thấy thông tin phù hợp nhất. Điều này có thể dẫn đến trải nghiệm tổng thể tốt hơn trên trang web của bạn, điều này có thể dẫn đến nhiều khách truy cập trở lại hơn.
Tại sao sử dụng Next.js?
Có hai lý do chính để sử dụng Next.js: để cải thiện hiệu suất và giúp phát triển dễ dàng hơn.
1. Cải thiện hiệu suất
Next.js có thể giúp cải thiện hiệu suất bằng cách tách mã ứng dụng của bạn và tìm nạp trước các tài nguyên. Điều này có thể dẫn đến thời gian tải nhanh hơn và giảm tải máy chủ.
2. Giúp phát triển dễ dàng hơn
Next.js cũng có thể giúp phát triển dễ dàng hơn bằng cách cung cấp một cách đơn giản để tạo các ứng dụng React do máy chủ hiển thị. Điều này có thể giúp việc phát triển và triển khai các ứng dụng React trở nên nhanh chóng và dễ dàng hơn.
Cách triển khai Giao thức đồ thị mở trong Next.js
Có hai cách để triển khai Open Graph Protocol trong Next.js: sử dụng gói next-seo hoặc tạo một tùy chỉnh _document.js tập tin.
Phương pháp 1: Sử dụng Gói seo tiếp theo
Cách dễ nhất để triển khai Open Graph Protocol trong Next.js là sử dụng gói next-seo. Gói này sẽ tự động tạo các thẻ cần thiết cho bạn.
Để cài đặt gói next-seo, hãy chạy lệnh sau:
npm install next-seo Sau khi cài đặt gói, bạn có thể sử dụng nó bằng cách thêm mã sau vào index.js tập tin:
import { NextSeo } from 'next-seo';const DemoPage = () => (
<>
<NextSeo
title="Your Title"
description="This is a demo description"
canonical="https://www.example.com"
openGraph={{
url: 'https://www.example.com',
title: 'Open Graph Title',
description: 'Open Graph Description',
images: [
{
url: 'https://www.example.com/og-image01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt',
type: 'image/jpeg',
},
{
url: 'https://www.example.com/og-image02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second',
type: 'image/jpeg',
},
{ url: 'https://www.example.com/og-image03.jpg' },
{ url: 'https://www.example.com/og-image04.jpg' },
],
site_name: 'YourSiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>
<p>Demo Page</p>
</>
);
export default DemoPage;
Mã này nhập thành phần NextSeo từ gói next-seo và sử dụng nó để chỉ định tiêu đề, mô tả và hình ảnh cho trang. Nó cũng chỉ định tên trang web và xử lý Twitter.
Chạy lệnh sau để khởi động máy chủ phát triển:
npm run devMở http: // localhost: 3000 trong trình duyệt của bạn để xem trang demo.
Phương pháp 2: Sử dụng Tệp _document.js Tùy chỉnh
Một cách khác để triển khai Open Graph Protocol trong Next.js là tạo một tùy chỉnh _document.js tập tin. Tệp này sẽ cho phép bạn tự chỉ định các thẻ Open Graph và tạo mã có thể sử dụng lại cho tất cả các trang.
Để thiết lập một tùy chỉnh _document.js tệp, tạo một tệp mới trong trang thư mục với các nội dung sau:
import Document, { Html, Head, Main, NextScript } from 'next/document';class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<meta property="og:url" content="https://www.example.com" />
<meta property="og:title" content="Open Graph Title" />
<meta property="og:description" content="Open Graph Description" />
<meta property="og:image" content="https://www.example.com/og-image.jpg" />
<meta property="og:site_name" content="YourSiteName" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@site" />
<meta name="twitter:creator" content="@handle" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Thêm nội dung bên dưới vào tệp index.js của bạn:
const DemoPage = () => (
<>
<p>Demo Page</p>
</>
);export default DemoPage;
Mã này nhập thành phần Tài liệu từ tiếp theo / tài liệu và tạo một tùy chỉnh Tài liệu của tôi thành phần. Nó chỉ định tiêu đề, mô tả và hình ảnh cho trang của chúng tôi, cũng như tên trang web và xử lý Twitter.
Chạy lệnh sau để khởi động máy chủ phát triển:
npm run devMở http: // localhost: 3000 trong trình duyệt của bạn để xem trang demo.
Thêm thẻ Open Graph vào trang web của bạn có thể giúp bạn kiểm soát nhiều hơn cách nó xuất hiện trong các bài đăng trên mạng xã hội và có thể giúp cải thiện tỷ lệ nhấp. Bạn cũng có thể cải thiện cách trang web của mình xuất hiện trong SERPs, điều này cuối cùng có thể dẫn đến cải thiện xếp hạng trang web.
Ngoài ra còn có nhiều cách khác để cải thiện xếp hạng trang web. Bạn nên tối ưu hóa trang web của mình cho các thiết bị di động và sử dụng các tiêu đề và mô tả giàu từ khóa. Nhưng sử dụng thẻ Open Graph là một cách nhanh chóng và dễ dàng để bắt đầu.