Metadane HTML: zawarte elementy i najlepsze praktyki

Opublikowany: 2021-01-08

Elementy i najlepsze praktyki w metadanych HTML

Metatagi to krótkie fragmenty kodu, które informują wyszukiwarki o kluczowych informacjach na temat Twojej strony internetowej. Kontrolują również, w jaki sposób przeglądarki internetowe wyświetlają się odwiedzającym. Metatagi są obecne na każdej stronie internetowej i można je zobaczyć tylko w kodzie HTML. Oto lista przykładów metatagów dla SEO.

  • Meta opis
  • Meta roboty
  • Tytuł meta
  • Zestaw znaków meta
  • Przekierowanie meta odświeżania
  • Meta widok

Tytuł meta

Tytuł strony wyświetlany przez Google i inne wyszukiwarki w wynikach wyszukiwania to tytuł meta. Tytuł HTML zapewnia użytkownikom szybki wgląd w zawartość wyniku i jego związek z zapytaniem. Zwykle jest to podstawowa forma informacji, która decyduje, w który wynik kliknąć. Używanie wysokiej jakości tytułów na swoich stronach internetowych jest bardzo ważne dla SEO. Oto przykład tytułu meta:

Metadane HTML: zawarte elementy i najlepsze praktyki

Najlepsze praktyki

  • Użyj specjalnego tagu tytułu dla swoich stron
  • Tytuły powinny być krótkie i opisowe
  • Unikaj używania ogólnych i niejasnych tytułów
  • Użyj tytułu lub zdania, wielkości liter
  • Nie używaj przynęty na klik, ale raczej czegoś wartego kliknięcia
  • Dopasuj intencję wyszukiwania
  • Użyj 60 znaków lub mniej
  • W razie potrzeby uwzględnij docelowe słowa kluczowe

Znajdowanie i naprawianie błędów w tytule tagu

Upewnij się, że tag tytułu nie jest ani za długi, ani za krótki. Unikaj niepotrzebnie długich lub rozwlekłych tytułów, zachowując ich zwięzłość i opis. Upewnij się, że każda strona ma tag tytułu. Unikaj wielu tagów tytułu HTML na stronie, ponieważ wyszukiwarki mogą wyświetlać nieistotny tag tytułu, jeśli istnieje wiele stron internetowych. Duplikuj tytuły na wielu stronach. Bardzo ważne jest, aby każda ze stron Twojej witryny miała niepowtarzalny i opisowy tytuł.

Przetestuj SEO i wydajność swojej witryny w 60 sekund!

Dobry projekt witryny ma kluczowe znaczenie dla zaangażowania użytkowników i konwersji, ale powolna witryna lub błędy wydajności mogą sprawić, że nawet najlepiej zaprojektowana witryna internetowa będzie działać gorzej. Diib to jedno z najlepszych na świecie narzędzi do monitorowania wydajności i SEO. Diib wykorzystuje moc big data, aby szybko i łatwo zwiększyć ruch i rankingi. Jak widać w Przedsiębiorcy!

  • Łatwe w użyciu automatyczne narzędzie SEO
  • Monitorowanie słów kluczowych i linków zwrotnych + pomysły
  • Zapewnia szybkość, bezpieczeństwo, + śledzenie Core Vitals
  • Inteligentnie sugeruje pomysły na poprawę SEO
  • Ponad 250 000 000 członków na całym świecie
  • Wbudowane testy porównawcze i analiza konkurencji

Na przykład „www.diib.com”

Używany przez ponad 250 tys. firm i organizacji:

  • logo
  • logo
  • logo
  • logo

Synchronizuje się z Google Analytics

Budynek łączący

Meta opis

Meta opis to krótki opis strony internetowej. Wyszukiwarki używają go do wyświetlania strony internetowej w wynikach wyszukiwania. Informuje i zdobywa zainteresowanie użytkowników za pomocą zwięzłego i dokładnego podsumowania zawartości danej strony. Meta opis zapewnia użytkownika, że ​​znajduje się na właściwej stronie i dokładnie to, czego szuka. Jednak nie są one wykorzystywane przez Google jako bezpośredni czynnik rankingowy. Poniższy obrazek pokazuje meta opis:

Metadane HTML: zawarte elementy i najlepsze praktyki

Najlepsze praktyki

  • Napisz unikalny i zrozumiały opis dla każdej strony
  • Podaj dokładne podsumowanie
  • Nie używaj ogólnych opisów
  • Użyj głównych słów kluczowych we właściwym zdaniu
  • Użyj przypadku zdania
  • Nie używaj przynęty na klik, ale napisz coś wartego kliknięcia
  • Dopasuj cel wyszukiwania
  • Użyj 160 znaków lub mniej

Typowe błędy w opisie meta

Najczęstsze błędy w pisaniu metaopisu są prawie podobne do błędów w tagach tytułowych. Meta opis, który jest za długi lub za krótki. Zwykle nie ma ograniczeń co do długości opisu meta. W celu dopasowania do szerokości urządzenia, wyodrębnione wyniki wyszukiwania są zwykle skracane. Innym błędem jest sytuacja, w której stronie internetowej całkowicie brakuje metaopisu.

Upewnij się, że piszesz to na swojej stronie. Możesz również mieć stronę z więcej niż jednym metaopisem, jednak może to zmylić wyszukiwarki. Częstym błędem jest również posiadanie podobnych opisów meta na wielu stronach. Upewnij się, że każda strona ma swój własny, niepowtarzalny opis.

Meta Roboty

Roboty Meta umożliwiają wyszukiwarce indeksowanie stron internetowych, a także oferują instrukcje, jak to zrobić. Obecność Twojej witryny w wynikach wyszukiwania może mieć negatywny wpływ, jeśli nie użyjesz poprawnych atrybutów w metatagu robots. Zrozumienie tego tagu i efektywne korzystanie z niego znacznie wpłynie na Twoje SEO.

Wartości indeksu mówią botom, aby wykonywały indeksowanie stron, podczas gdy wartość noindex instruuje roboty, aby nie robiły indeksowania stron. Poniższa wartość poleca botom indeksowanie linków na stronie w celu poręczenia za nie, podczas gdy wartość nofollow instruuje je, aby nie indeksowały linków na stronie, aby uniknąć jakiejkolwiek rekomendacji.

Najlepsze praktyki

Używaj metatagów robota tylko podczas ograniczania indeksowania Google na stronie i unikaj blokowania stron z metatagami robota w robotach.

Typowe błędy Meta Robots

Niektóre z typowych błędów meta robotów obejmują roboty blokujące strony bez indeksu. Utrudnia to Google zobaczenie tagu robotów noindex i może kontynuować indeksowanie adresu URL. Nieuczciwy meta noindex zmniejsza ruch organiczny na stronie, uniemożliwiając Google jej indeksowanie. Nieuczciwe meta nofollow uniemożliwi Google indeksowanie linków do strony i zmniejszy szanse na wykrycie i zindeksowanie kluczowej treści. Może to również uniemożliwić przepływ PageRank do ważnych stron.

Meta rzutnia

Meta viewport ustawia widoczny obszar strony internetowej i podaje instrukcje, w jaki sposób strona będzie wyświetlana przez przeglądarkę na różnych rozmiarach ekranu. Jest to ważne, ponieważ strony internetowe dostosowane do urządzeń mobilnych zajmują wyższą pozycję w wynikach wyszukiwania mobilnego Google.

Najlepsze praktyki

Ważne jest, aby używać meta widoku na wszystkich stronach internetowych i ze standardowym tagiem.

Metazestaw znaków

Znacznik ten określa kodowanie znaków na Twojej stronie lub po prostu instruuje przeglądarkę, jak wyświetlać znaki i tekst na stronie. Istnieją dwa popularne zestawy znaków, w tym UTF-8 używany do kodowania Unicode i ISO-8859-1 używany do kodowania alfabetu łacińskiego. Kodowanie z niewłaściwym znakiem spowoduje nieprawidłowe wyświetlanie przeglądarki.

Metadane HTML: zawarte elementy i najlepsze praktyki

Będziesz zainteresowany

(Źródło obrazu: Naucz się samouczków internetowych)

Problemy z formatowaniem znaków powodują negatywne wrażenia użytkownika, a Twoje strony mogą wyglądać na uszkodzone. Inne problemy, które może powodować, to mniej osób linkujących do Twojej strony, krótki czas przebywania na stronie, krótki czas na stronie, wysoki współczynnik odrzuceń, a wyszukiwarka może nie rozumieć Twojej treści.

Najlepsze praktyki

  • Zawsze używaj metatagu charset na wszystkich swoich stronach internetowych
  • Tam, gdzie to możliwe, używaj Unicode/UTF-8

Ważne jest, aby sprawdzić wszystkie strony internetowe, aby upewnić się, że używają kodowania UTF-8.

Przekierowanie metaodświeżania

Ten tag po pewnym czasie przekierowuje użytkownika do innego adresu URL. Google rozumie i szanuje tagi przekierowań meta-refresh, ale najlepiej nie używać ich w SEO. Dzieje się tak, ponieważ większość przeglądarek ich nie obsługuje i może wprowadzać w błąd użytkownika, jednocześnie podnosząc obawy dotyczące bezpieczeństwa. Zajmuje też trochę czasu, ponieważ strony wymagają przeanalizowania przed wyświetleniem docelowego adresu URL. Tak będzie wyglądać ten tag:

Metadane HTML: zawarte elementy i najlepsze praktyki

(Źródło zdjęcia: HostPapa)

Najlepsze praktyki

  • Używaj tagów przekierowań meta-odświeżania tylko wtedy, gdy jest to konieczne

Najlepiej jest unikać używania przekierowań meta-odświeżania tam, gdzie to możliwe, ponieważ są one złą praktyką. Jeśli masz je na swoich stronach internetowych, możesz zamiast nich użyć przekierowań 301 lub 302, jeśli to możliwe.

Meta słowa kluczowe

Słowa kluczowe meta są dobrym przykładem metatagu, który jest często używany w dzisiejszych czasach. Nie zaleca się dodawania metatagu słów kluczowych z listą docelowych słów kluczowych, ponieważ Google przestał używać słów kluczowych do rankingów. Dzieje się tak, ponieważ wiele osób upchnęło nietrafne słowa kluczowe, a użytkownicy nigdy nie zobaczyli tych słów kluczowych. Google zignorował metatag słów kluczowych, ponieważ był często nadużywany.

Bing używa teraz metatagu słów kluczowych do sygnalizowania spamu, więc może to działać na Twoją niekorzyść. Najlepiej jest usunąć tag ze swojej witryny.

Metadane to dane, które dostarczają informacji o innych danych. Metadane HTML podsumowują podstawowe informacje o danych, ułatwiając znalezienie i pracę z tymi konkretnymi danymi. Można go utworzyć ręcznie dla większej dokładności lub automatycznie, aby zaoferować bardziej podstawowe informacje. Dane Mata są używane w plikach dokumentów, obrazach, filmach, arkuszach kalkulacyjnych i stronach internetowych.

Co to jest generator tagów meta?

Generator metatagów umożliwia tworzenie wymaganych i najbardziej przydatnych metatagów HTML dla SEO.

Najlepsze praktyki podczas korzystania z metadanych HTML

Zawsze deklaruj Doctype

Deklaracja doctype powinna być pierwszą rzeczą w metatagach HTML dla SEO. Powiadamia przeglądarkę o używanych standardach XHTML. Zalecane jest używanie ścisłego doctype XHTML 1.0, chociaż niektórzy programiści uważają go za trudny wybór. Daje pewność, że Twój kod jest ściśle zgodny z najnowszymi standardami.

Używaj znaczących tagów tytułów

Znaczniki tytułu sprawiają, że strona internetowa jest bardziej zrozumiała i przyjazna dla wyszukiwania.

Użyj opisowej listy metatagów

Lista metatagów dodaje stronie więcej znaczenia dla agentów użytkownika, takich jak roboty wyszukiwarek. Ważne jest, aby opis nie zawierał powtarzających się słów i fraz, ponieważ wyszukiwarki to wykryją. Używaj prostych i jednoznacznych opisów, wyjaśniając cel swojej strony internetowej.

Podziel swój układ na główne sekcje za pomocą divs

Tworząc projekt strony internetowej, w pierwszym kroku rozważ podzielenie strony na sekcje. Będzie to promować czysty i dobrze zaplanowany kod, jednocześnie pomagając uniknąć nieporozumień i nadmiernego używania elementów div podczas pisania złożonych i długich znaczników.

Unikaj mieszania treści z prezentacji

Nie mieszaj treści HTML z wizualną prezentacją treści dostarczaną przez CSS. Tworzenie osobnego pliku CSS dla swoich stylów zamiast używania stylów wbudowanych w HTML jest bardzo ważne. Umożliwi to Tobie i innym programistom pracującym nad kodem wprowadzenie szybkich zmian i sprawi, że Twoja treść będzie bardziej zrozumiała dla klientów użytkownika.

Minimalizuj i ujednolicaj CSS

Typowe strony internetowe mają jeden główny plik CSS i prawdopodobnie inne rzeczy, takie jak poprawki specyficzne dla przeglądarki i reset CSS. Gdy każdy plik C wysyła żądanie HTTP, spowalnia czas ładowania witryny. Usunięcie znaków, które nie są potrzebne, takich jak znaki nowej linii, spacje i tabulatory z całego kodu i ujednolicenie plików, które można ze sobą zintegrować. Pomoże to rozwiązać ten problem i skrócić czas ładowania witryny.

Minimalizuj, ujednolicaj i przesuwaj w dół JavaScript

Unikaj używania wbudowanego JavaScript, ale zamiast tego spróbuj zminimalizować i ujednolicić biblioteki JavaScript, aby zmniejszyć liczbę żądań HTTP potrzebnych do wygenerowania jednej ze stron. Jednak w większości przeglądarek nie można pobierać równolegle, co oznacza, że ​​przeglądarka nie będzie pobierać niczego innego podczas pobierania JavaScript, przez co strona wygląda tak, jakby ładowała się powoli.

Aby tego uniknąć, możesz załadować kod JavaScript po załadowaniu kodu CSS, umieszczając kod JavaScript na końcu dokumentu HTML, jeśli ma to zastosowanie, najlepiej przed zamknięciem tagu body.

Mądrze używaj elementów nagłówka

Użycie elementów h1 do h6 do wskazania kolejności treści w kodzie HTML sprawia, że ​​treść jest bardziej przyjazna dla użytkownika, agenta użytkownika, wyszukiwarek i oprogramowania do czytania zawartości ekranu. Korzystając z blogów, najlepiej jest użyć elementu h1 w tytule posta na blogu, a nie w nazwie witryny, ponieważ jest to idealne rozwiązanie dla wyszukiwarek.

Użyj właściwych znaczników HTML we właściwym miejscu

Aby uniknąć zamieszania i stworzyć odpowiednią strukturę treści, ważne jest, aby znać dostępne znaczniki HTML i wiedzieć, jak ich używać.

Mamy nadzieję, że ten artykuł okazał się przydatny.

Jeśli chcesz dowiedzieć się więcej o kondycji swojej witryny, uzyskać osobiste rekomendacje i alerty, przeskanuj swoją witrynę przez Diib. Zajmuje to tylko 60 sekund.

Wejdź na swoją stronę internetową

Na przykład „www.diib.com”

Nie mogę się nacieszyć DIIB!! Najlepsze narzędzie i jestem bardzo wdzięczna za jego znalezienie. Absolutnie to uwielbiam!! Trzymamy kciuki, żebyście nie podnosili cen, bo to jest idealne.
Referencje
Katarina Gage
Dyrektor Operacyjny w ahoymatey.com.au

Unikaj nadmiernego używania div

Niektórzy programiści umieszczają znaczniki div na innych znacznikach div, które mają więcej znaczników div, tworząc wiele elementów div. Element div jest uważany za element bez znaczenia, którego należy używać tylko wtedy, gdy nie ma innych dostępnych odpowiednich elementów zgodnie ze specyfikacjami HTML W3C. Unikaj posiadania wielu divów, używając ich w sposób odpowiedzialny i tylko wtedy, gdy jest to konieczne.

Użyj nieuporządkowanej listy do nawigacji

Element nawigacyjny jest bardzo istotnym czynnikiem w projektowaniu strony internetowej w połączeniu z CSS. Dzięki temu menu nawigacyjne będą semantyczne i piękne. Oto dwa sposoby, aby to zrobić:

Metadane HTML: zawarte elementy i najlepsze praktyki

(Źródło zdjęcia: Studytonight)

Zamknij swoje tagi

Specyfikacje W3C wymagają zamknięcia wszystkich tagów. Inne przeglądarki mogą poprawnie wyświetlać Twoje strony, nawet jeśli zamknięcie tagów jest nieprawidłowe zgodnie z normalnymi standardami.

Użyj małych liter

Utrzymywanie znaczników małymi literami jest standardową praktyką w branży. Wielkie litery w znacznikach wpływają na czytelność kodu, ale nie zmieniają sposobu wyświetlania stron internetowych.

Użyj modułowych poprawek IE

Jeśli masz problemy ze swoimi stronami, możesz użyć komentarzy warunkowych, aby skupić się na przeglądarce internetowej. Upewnij się, że poprawki są modułowe, aby upewnić się, że Twoja praca jest przyszłościowa, tak aby starsza wersja IE nie wymagała żadnego wsparcia.

Zweryfikuj swój kod

Nie powinieneś postrzegać walidacji jako ostatecznej oceny dobrej pracy w porównaniu ze złą pracą. Praca, która weryfikuje niekoniecznie jest dobrym kodem i, alternatywnie, praca, która nie w pełni weryfikuje, niekoniecznie jest złym kodem.

Usług autowalidacji można używać jako przydatnych debugerów do identyfikowania błędów renderowania. Często sprawdzaj swoją pracę podczas pisania HTML, aby uniknąć problemów, które mogą być trudne do zidentyfikowania po zakończeniu pracy.

Napisz spójnie sformatowany kod

Napisanie przejrzystej bazy kodu z dobrymi intencjami podkreśla Twój profesjonalizm i ułatwia pracę programistom, którzy mogą pracować nad Twoim kodem. Zwiększysz również czytelność swojej pracy, gdy od samego początku napiszesz odpowiednio wcięte znaczniki. Na przykład:

Metadane HTML: zawarte elementy i najlepsze praktyki

(Źródło obrazu: html.com)

Unikaj nadmiernych komentarzy

Celem udokumentowania kodu jest uczynienie go zrozumiałym, a komentowanie kodu jest rozsądne i logiczne w przypadku języków programowania, takich jak Java, PHP i C#. Jednak znaczniki są bardzo oczywiste i nie trzeba komentować każdej linii w XHTML/ HTML. Przeglądanie swojej pracy pod kątem semantyki pomoże ci, jeśli dużo komentujesz w swoim HTML, aby wyjaśnić proces.

Diib: Pobierz statystyki metadanych HTML tutaj!

Korzystanie z tych elementów i przestrzeganie wskazówek pomoże Ci w działaniach SEO.

Elementy takie jak dobry opis meta zwiększą współczynniki klikalności z wyszukiwań, nawet jeśli nie poprawią one pozycji w rankingu. Metatagi są obecnie używane na platformach społecznościowych, takich jak Twitter i Facebook. Możesz użyć tagów, aby sprawdzić, w jaki sposób Twoje dane są udostępniane na Facebooku. Partnerstwo z Diib Digital zapewni Ci istotne wskaźniki dotyczące metadanych, dzięki którym będziesz mógł podejmować skuteczne decyzje dotyczące stanu Twojej witryny.

Oto niektóre z funkcji naszego Panelu użytkownika, które z pewnością Ci się spodobają:

  • Indywidualne cele zaprojektowane w celu zwiększenia wydajności witryny
  • Alerty informujące o innych technicznych problemach związanych z SEO w witrynie Domain Authority
  • Zepsute strony, na których masz linki zwrotne (kontroler 404)
  • Narzędzia do monitorowania i śledzenia słów kluczowych, linków zwrotnych i indeksowania
  • Doświadczenie użytkownika i optymalizacja prędkości mobilnej
  • Optymalizacja tytułu obrazu

Kliknij tutaj, aby uzyskać bezpłatny skan lub po prostu zadzwoń pod numer 800-303-3510, aby porozmawiać z jednym z naszych ekspertów ds. rozwoju.