Metatagi dostarczają przydatnych dodatkowych danych o Twoich stronach internetowych. Upewnij się, że wiesz, jak je uwzględnić podczas korzystania z Nuxt.

Nuxt.js to potężna platforma do tworzenia aplikacji Vue.js renderowanych po stronie serwera. Oprócz zapewnienia solidnej podstawy do tworzenia złożonych aplikacji, Nuxt.js ułatwia również dodawanie metatagów do stron.

Dowiedz się, jak dołączyć metatagi do aplikacji Nuxt, aby poprawić SEO witryny i widoczność w mediach społecznościowych.

Metatagi to fragmenty kodu, które dostarczają informacji o stronie internetowej. Te tagi są obecne w źródle HTML, podobnie jak zawartość Twojej strony, ale nie są widoczne na samej stronie.

Metatagi mogą dostarczać informacji, takich jak tytuł strony, opis i słowa kluczowe. Są one również wykorzystywane do dostarczania informacji do udostępniania w mediach społecznościowych i optymalizacji wyszukiwarek.

Zanim przejdziesz do dodawania metatagów, utwórz nową aplikację Nuxt.js. W tym celu upewnij się, że masz Node.js zainstalowany na Twoim urządzeniu

instagram viewer
. Następnie otwórz terminal i uruchom następujące polecenie:

npx utwórz-nuxt-aplikację moja-aplikacja

Spowoduje to utworzenie nowej aplikacji Nuxt.js w katalogu o nazwie moja-aplikacja. Postępuj zgodnie z instrukcjami, aby skonfigurować aplikację zgodnie z potrzebami.

Jednym ze sposobów dodawania metatagów do aplikacji Nuxt.js jest dodanie ich globalnie. Aby to zrobić, dodaj tag tytułu i dwa metatagi: jeden dla zestawu znaków i jeden dla widocznego obszaru. Otwórz swoje nuxt.config.js plik i dodaj właściwość head do pliku moduł.eksport obiekt:

moduł.eksport = {
 głowa: {
 tytuł: „Moja aplikacja”,
 meta: [
 { zestaw znaków: 'utf-8' },
 { nazwa: „rzutnia”, treść: „szerokość = szerokość urządzenia, skala początkowa = 1” }
 ]
 }
}

Dodawanie metatagów na pojedynczych stronach

Czasami możesz chcieć dodać metatagi tylko do określonych stron w swojej aplikacji. Aby to zrobić, możesz dodać właściwość head do definicji komponentu strony: