Tiêu đề meta động trong Laravel
|
Bạn có thể tìm thấy tệp HTML nguồn trong thư mục <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>3 của dự án đã tạo. Bạn có thể chỉnh sửa thẻ <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>4 trong đó để thay đổi tiêu đề từ “Ứng dụng React” thành bất kỳ thứ gì khác Show Lưu ý rằng thông thường bạn sẽ không thường xuyên chỉnh sửa các tệp trong thư mục <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>3. Ví dụ: thêm biểu định kiểu được thực hiện mà không cần chạm vào HTML Nếu bạn cần tự động cập nhật tiêu đề trang dựa trên nội dung, bạn có thể sử dụng API <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>6 của trình duyệt. Đối với các tình huống phức tạp hơn khi bạn muốn thay đổi tiêu đề từ các thành phần React, bạn có thể sử dụng React Mũ bảo hiểm, thư viện của bên thứ ba Nếu bạn sử dụng máy chủ tùy chỉnh cho ứng dụng của mình trong quá trình sản xuất và muốn sửa đổi tiêu đề trước khi nó được gửi tới trình duyệt, bạn có thể làm theo lời khuyên trong. Ngoài ra, bạn có thể tạo trước mỗi trang dưới dạng tệp HTML tĩnh, sau đó tải gói JavaScript, được trình bày tại đây Tạo thẻ 7 động trên máy chủVì Tạo ứng dụng phản ứng không hỗ trợ kết xuất máy chủ, nên bạn có thể tự hỏi làm thế nào để tạo các thẻ <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>7 động và phản ánh URL hiện tại. Để giải quyết vấn đề này, chúng tôi khuyên bạn nên thêm trình giữ chỗ vào HTML, như thế này > <html lang="en"> <head> <meta property="og:title" content="__OG_TITLE__" /> <meta property="og:description" content="__OG_DESCRIPTION__" /> head> html> Sau đó, trên máy chủ, bất kể bạn sử dụng chương trình phụ trợ nào, bạn có thể đọc <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>9 vào bộ nhớ và thay thế <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>0, <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>0 và bất kỳ trình giữ chỗ nào khác bằng các giá trị tùy thuộc vào URL hiện tại. Đảm bảo làm sạch và thoát khỏi các giá trị được nội suy để chúng được an toàn khi nhúng vào HTML Nếu bạn sử dụng máy chủ Node, bạn thậm chí có thể chia sẻ logic khớp tuyến giữa máy khách và máy chủ. Tuy nhiên, sao chép nó cũng hoạt động tốt trong các trường hợp cơ bản Tiêm dữ liệu từ máy chủ vào trangTương tự như phần trước, bạn có thể để lại một số trình giữ chỗ trong HTML để chèn các biến toàn cục, chẳng hạn <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script> Sau đó, trên máy chủ, bạn có thể thay thế <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>1 bằng JSON của dữ liệu thực ngay trước khi gửi phản hồi. Mã khách hàng sau đó có thể đọc <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>2 để sử dụng nó. Đảm bảo khử trùng JSON trước khi gửi nó cho khách hàng vì nó làm cho ứng dụng của bạn dễ bị tấn công XSS Một ngày nọ, tôi quyết định tạo một gói tốt có thể giúp tôi giải quyết mọi vấn đề về SEO trong Laravel. Đó là một chặng đường rất dài. Có phiên bản đầu tiên của gói của tôi (kodicms/laravel-assets) trên packagist. org và đã có khoảng 72 nghìn lượt tải xuống, nhưng tôi không thích nó. Nó có rất nhiều vấn đề, với các bài kiểm tra, codebase, nhưng vấn đề chính là tài liệu. Và tôi đã quyết định phát triển một phiên bản mới tốt hơn của công cụ để quản lý thẻ meta, kiểu, tập lệnh, OpenGraph, thẻ Twitter, v.v. t. c. với siêu tài liệu, bằng cách sử dụng TDD Và cuối cùng, hãy để tôi giới thiệu gói butschster/thẻ meta mới của tôi để quản lý thẻ meta và các thẻ khác trong Laravel, có thể giúp bạn tiết kiệm 90% thời gian Trình quản lý thẻ meta Laravel là gì?- Chuẩn SEO Bây giờ, hãy chuyển sang phần thú vị về cách chúng ta có thể sử dụng gói này trong các ứng dụng laravel của bạn. Lúc đầu, bạn phải chạy lệnh sau để đưa gói này qua Trình soạn thảo; composer require butschster/meta-tagsSau khi gói được cài đặt, bạn cần đăng ký nhà cung cấp dịch vụ. Chỉ cần chạy lệnh thủ công php artisan meta-tags:installKhi đã xong, bạn có thể thiết lập meta ứng dụng mặc định trong config/meta_tags. cấu hình php Sau khi cấu hình hoàn tất, bạn có thể thêm phần bên dưới vào khu vực meta của bố cục chính mà bạn muốn bao gồm các thẻ meta; Bây giờ bạn có thể quản lý meta trong bộ điều khiển của mình như thế này Đó là nó Bạn có thể làm những việc như thế này ________số 8góiHay… Cái này thì sao? Bạn có thể nhóm các thẻ meta, liên kết, tập lệnh của mình thành các gói có tên và đặt phụ thuộc Và đưa chúng vào bố cục của bạn thông qua cấu hình /*Hoặc thông qua bộ điều khiển <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>0
Vị tríTập lệnh phải ở chân trang. Bạn nói. “Anh bạn, tôi nên làm gì đây, tôi muốn đặt đoạn mã của mình ở cuối trang” Không vấn đề gì. . ) Sử dụng vị trí tùy chỉnh
<!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>1 mở rộngLúc đầu, bạn có thể tạo bất kỳ thẻ meta và liên kết nào. Nó rất đơn giản Hầu hết các gói thẻ meta không hỗ trợ tiện ích mở rộng, nhưng trong gói này, bạn có thể sử dụng Laravel Macroable trait Hoặc bạn có thể tạo lớp của riêng mình, lớp đó sẽ triển khai giao diện \Butschster\Head\Contracts\MetaTags\Entities\TagInterface Sự kết luận Gần đây bạn tôi đã hỏi một câu hỏi. Tôi có thể thêm nhiều biểu tượng yêu thích? <!doctype html> <html lang="en"> <head> <script> window.SERVER_DATA = __SERVER_DATA__; </script>2 tôi nói CÓ. hãy để Ross nó Tôi kết luận rằng tôi phải nói rằng, cách tiếp cận này cho phép các nhà phát triển sử dụng các thẻ meta linh hoạt, tạo các gói có thể tái sử dụng và chia sẻ chúng với bạn bè của bạn Mô tả meta động là gì?Mô tả meta là bản xem trước văn bản ngắn được hiển thị cho từng kết quả tìm kiếm tóm tắt nội dung của trang . Các công cụ tìm kiếm hiển thị mô tả meta khi nó có liên quan cao đến những gì người dùng đang tìm kiếm, nếu không, họ có thể chọn văn bản từ trang và tạo mô tả động.
Tại sao tiêu đề meta của tôi không được cập nhật?Google chưa thấy mô tả mới của bạn
. Google có thể mất thời gian để xử lý những thay đổi bạn đã thực hiện, tùy thuộc vào tần suất trang web của bạn được thu thập dữ liệu. Google might not have crawled the page, or updated their index with your content. It can take time for Google to process the changes you made, depending on how frequently your website is crawled.
Tiêu đề meta có cần thiết không?Tiêu đề meta là một yếu tố quan trọng đối với cả người dùng và công cụ tìm kiếm vì nó truyền tải chủ đề và mục đích chính của tài liệu . Nó được sử dụng để tạo thành các tiêu đề của các mục trong SERPs (Trang kết quả của Công cụ tìm kiếm) và do đó có thể tăng số lần nhấp vào một trang web hoặc tài liệu xếp hạng.
Tiêu đề meta tùy chỉnh là gì?Có hai thành phần đối với meta tùy chỉnh. thẻ tiêu đề và mô tả. Thẻ tiêu đề meta là tiêu đề sẽ xuất hiện trên công cụ tìm kiếm hoặc trong bài đăng trên mạng xã hội . Chúng rất quan trọng đối với SEO, chia sẻ và khả năng sử dụng. Thẻ tiêu đề phải là một mô tả chính xác và ngắn gọn về nội dung của trang. |
