Cách thêm tiêu đề thân thiện với SEO vào trang web Next.js

Cách thêm tiêu đề thân thiện với SEO vào trang web Next.js

Tiêu đề trang, thẻ meta và mô tả meta rất quan trọng đối với SEO. Chúng là những thứ đầu tiên người dùng nhìn thấy trên SERPS và xác định xem họ có nhấp qua trang web của bạn hay không. Do đó, điều quan trọng là tối ưu hóa tiêu đề, thẻ meta và mô tả của trang web của bạn.





itunes thay đổi vị trí sao lưu windows 10

Trong Next.js, bạn thêm chúng thông qua thành phần head tùy chỉnh. Bạn có thể thêm chúng vào tất cả các trang trong ứng dụng hoặc tùy chỉnh chúng cho từng trang.



LÀM VIDEO TRONG NGÀY

Thêm một Thẻ Head chung vào Tất cả các Trang Tiếp theo.js

Next.js cung cấp _app.js để khởi tạo trang. Bạn có thể sử dụng nó để tạo các thẻ meta được chia sẻ trên tất cả các trang.





import '../styles/globals.css' 
import Head from 'next/head' 
  
function MyApp({ Component, pageProps }) { 
  return <> 
    <Head> 
      <meta name="author" content="John Doe"/> 
    </Head> 
    <Component {...pageProps} /> 
  </> 
} 
  
export default MyApp

Nếu bạn muốn một trang có tiêu đề và mô tả tùy chỉnh, hãy thêm thành phần head vào đó và Next.js sẽ sử dụng nó thay vì thành phần mặc định trong Thành phần ứng dụng.

Thêm thẻ meta và mô tả vào một trang Next.js cụ thể

Thẻ meta tĩnh và mô tả phù hợp với các trang có nội dung được giữ nguyên, ví dụ: trang chủ.



Mở tệp /pages/index.js và sửa đổi thẻ head với tiêu đề và mô tả thích hợp.

import Head from "next/head"; 
  
const Home= () => { 
  return ( 
    <> 
    <Head> 
      <title>Blog</title> 
      <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 
      <meta name='description' content='Programming Articles'/> 
    </Head> 
    <main> 
      <h1>Welcome to my blog!</h1> 
    </main> 
    </> 
  ); 
}; 
  
export default Home;

Bạn truy cập thành phần Head bằng cách nhập nó từ next / head . Nó hoạt động bằng cách thêm các phần tử vào thẻ head của một trang HTML . Tùy thuộc vào nơi bạn đặt thành phần này, các thẻ meta và mô tả sẽ có sẵn trên toàn bộ ứng dụng hoặc trên các trang riêng lẻ.



Việc thêm tiêu đề, chiều rộng khung nhìn và mô tả trong tệp _app.js đảm bảo tất cả các trang có cùng một siêu dữ liệu.

Trang này có nội dung tĩnh, nhưng đôi khi, bạn có thể muốn tạo các trang sử dụng nội dung động.



trò chơi chữ tải xuống miễn phí cho android

Thêm tiêu đề và mô tả meta động vào trang Next.js

Tùy thuộc vào trường hợp sử dụng, bạn có thể sử dụng getStaticProps (), getStaticPaths () hoặc getServerSideProps () để tìm nạp dữ liệu trong Next.js. Dữ liệu này xác định nội dung của trang. Sử dụng nó để tạo siêu dữ liệu cho trang.

Ví dụ: việc tạo siêu dữ liệu cho ứng dụng Next.js để hiển thị các bài đăng trên blog sẽ rất tẻ nhạt.

Cách được đề xuất là tạo một trang động nhận một số nhận dạng mà bạn có thể sử dụng để tìm nạp nội dung blog . Sau đó, bạn có thể sử dụng nội dung này trong thành phần head.

import { getAllPosts, getSinglePost } from "../../utils/mdx"; 
import Head from "next/head"; 
  
const Post = ({ title, description, content }) => { 
  return ( 
    <> 
      <Head> 
        <title>{title}</title> 
        <meta name="description" content={description} /> 
      </Head> 
      <main>{/* page content */}</main> 
    </> 
  ); 
}; 
  
export const getStaticProps = async ({ params }) => { 
  // get a single post 
  const post = await getSinglePost(params.id, "posts"); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export const getStaticPaths = async () => { 
  // Retrieve all posts 
  const paths = getAllPosts("posts").map(({ id }) => ({ params: { id } })); 
  
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export default Post;

Hàm getStaticProps chuyển dữ liệu bài đăng đến thành phần Bài đăng dưới dạng đạo cụ. Thành phần Bài đăng hủy tiêu đề, mô tả và nội dung khỏi đạo cụ. Sau đó, thành phần head sử dụng tiêu đề và mô tả trong các thẻ meta.

Next.js là một khung được tối ưu hóa

Bạn vừa học được cách sử dụng head component để thêm meta title và mô tả vào dự án Next.js. Sử dụng kiến ​​thức này để tạo tiêu đề thân thiện với SEO, tăng SERP và thu hút nhiều khách truy cập hơn vào trang web của bạn.

Ngoài thành phần head, Next.js cung cấp các thành phần khác như Liên kết và Hình ảnh. Các thành phần này được tối ưu hóa giúp việc tạo các trang web thân thiện với SEO nhanh chóng dễ dàng hơn.

chụp ảnh và tìm hiểu xem nó là gì