Elementy WWW używane prawidłowo w SEO

Ostatnia aktualizacja 16 stycznia 2019 r.

Większość stron internetowych składa się z 3 podstawowych elementów: HTML, CSS i JavaScript. Te bloki konstrukcyjne tworzą wszystkie strony internetowe, bez względu na to, czego używają do ich renderowania. Każdy element sieciowy ma swoje właściwe miejsce. Chociaż mogą występować pewne nakładanie się, ich celowe stosowanie pomaga w stworzeniu strony zoptymalizowanej pod kątem SEO. Jak zatem należy używać tych elementów i jakie są sposoby ich niewłaściwego wykorzystania?

Podstawowe funkcje elementów sieci

Porównajmy stronę internetową do domu. Dom składa się z kilku części, z których każda znajduje się na swoim miejscu i służy swojemu celowi. W naszym domu na stronie internetowej HTML przypomina strukturalne elementy sieci, kratownice, ściany, fundament. HTML zapewnia ważny układ treści strony, określając jej kolejność i jakie elementy pojawiają się gdzie.

CSS powinien być używany do stylizacji. Jeśli będziemy trzymać się ilustracji domu, będzie to kolor ścian, szafek, rodzaj podłogi itp. Kolory strony, rozmiary czcionek, rzeczywisty układ strony można również zdefiniować w CSS. Ale czekaj, czy układ nie powinien być w kodzie HTML? Dobre pytanie. Podczas gdy HTML powinien układać elementy, które będą na Twojej stronie, CSS powinien kontrolować sposób wyświetlania tych elementów na tej stronie. CSS odpowiada za dużą część responsywności sieci.

Teraz, gdy Twój dom jest już zbudowany, nadszedł czas na niektóre media, takie jak prąd i bieżąca woda. JavaScript powinien być używany do interaktywnych elementów strony, takich jak zmiana elementów po kliknięciu, wyświetlanie danych i tak dalej. JavaScript może być używany do zmiany całego wyglądu i stylu Twojej strony, co działa dobrze, jeśli dostosowujesz ją do określonej grupy odbiorców lub przypadku użycia.

Po co je rozdzielać?

Tak więc, jeśli możesz używać HTML i CSS zarówno do układu, jak i JavaScript i CSS do stylizacji, po co je rozdzielać? Kiedy Google indeksuje Twoją stronę, szuka kluczowych wskaźników dotyczących tego, o czym jest Twoja strona i jak działa. Jeśli użyjesz jednego z elementów niewłaściwie, możesz wysłać złe sygnały i pogorszyć swoje rankingi. Może się to często zdarzyć podczas pracy z edytorami CMS, które stylizują za pomocą ustawień wstępnych dla elementów lub uruchamiają niepotrzebny JavaScript, który spowalnia strony w celu wykonania czynności, które można zrobić w CSS.

Przyjrzyjmy się więc niektórym typowym nadużyciom.

Niewłaściwe używanie tagów nagłówków

Jednym z najczęstszych nadużyć jest używanie tagów nagłówków do stylizowania elementów internetowych. Tagi nagłówków określają główne tematy na stronie, od najważniejszego tagu H1 (każda strona powinna mieć) do H6. Kiedy używasz do stylizowania elementów, mówisz Google, że te słowa są tym, o czym jest Twoja strona. Lub możesz użyć niewłaściwego tagu nagłówka (np. Używając h3 zamiast h2, ponieważ bardziej lubisz rozmiar czcionki). W obu przypadkach wysyłasz złą wiadomość. Zamiast tego powinieneś użyć CSS, aby nadać elementom odpowiedni rozmiar lub czcionkę, którą chcesz.

Podwójne znaczniki H1

Innym częstym problemem jest posiadanie 2 lub więcej tagów H1 na stronie. Twój tag H1 powinien być główną ideą strony; powinien powiedzieć wszystkim (i każdemu robotowi indeksującemu), który odwiedza stronę, o czym jest, i jako taki powinieneś mieć tylko jeden. Posiadanie dwóch tagów H1 jest jak wysyłanie dwóch różnych sygnałów na stronę. Niektórzy ludzie, a nawet profesjonalni motywy, mają tendencję do umieszczania swojego logo w tagu H1. Więc uważaj, aby upewnić się, że jest tylko jeden na stronie.

Wszystkie obrazy są obrazami tła.

Nie ma nic złego w posiadaniu tła obrazu. Obrazy przyciągają wzrok i mogą wnieść dużą wartość do Twojej witryny oraz zachęcić użytkowników do kupowania produktów lub usług. Ale wszystkie twoje obrazy nie powinny być obrazami tła. Pracując ostatnio na stronie, zauważyłem, że CMS zamienia wszystkie obrazy na obrazy tła. Intencją jest tu łatwiejsze stylizowanie i zmiana rozmiaru. Chociaż może to sprawić, że będzie wyglądać lepiej, stracisz istotną część korzyści płynących z obrazów na swojej stronie: tekst alternatywny. Tekst alternatywny opisuje zawartość obrazu i jest używany przez czytniki ekranu do identyfikowania zawartości obrazu. Tworząc wszystkie swoje obrazy jako obrazy tła, zmniejszasz dostępność strony, utrudniając ją osobom niepełnosprawnym i możesz uzyskać trafienie od Google w swoich rankingach.

Renderowanie CSS za pomocą JavaScript

Niepotrzebne serwowanie CSS przez JavaScript wydłuża czas ładowania stron. O wiele lepiej jest połączyć plik CSS w nagłówku, zamiast przechodzić przez ten dodatkowy krok. Ponadto użycie JavaScript do prostych animacji lub efektów najechania wydłuża czas ładowania, gdy można to zrobić znacznie szybciej za pomocą CSS. Nawet dodanie frameworków JavaScript, gdy nie są potrzebne, może wydłużyć czas ładowania. Jak ładowanie jQuery, aby animować przycisk. Zamiast pisać waniliowy JavaScript, a nawet lepiej, używając elementów animacji w CSS lub nawet arkusza stylów animacji CSS, ładuje się znacznie szybciej.

Stylizowanie elementów internetowych w HTML

Stylizacja elementów bezpośrednio w pliku HTML to kontrowersyjny temat. Wiele motywów i wtyczek w WordPressie i innych systemach CMS nieustannie polega na nadpisywaniu arkuszy stylów i innych wtyczek. Jest to zwykle postrzegane jako zła praktyka. Niektórzy twórcy treści zapisują style bezpośrednio w swoich treściach, ponieważ chcą zmienić style tematyczne. Jaki jest z tym problem? Często powoduje to problemy z CSS, gdy style zapisane bezpośrednio w elementach HTML zastępują style w pliku CSS. Aby tego uniknąć, zamiast pisać to bezpośrednio w kodzie HTML, przypisz elementom sieci web klasę i dodaj nowy arkusz stylów, do którego dodajesz style. W ten sposób można uniknąć problemów z arkuszami powodującymi konflikty, które mogą spowodować uszkodzenie lub nieprawidłowy styl witryny.

Używanie HTML do stylizacji układów

Ten jest nieco skomplikowany, ponieważ motywy często łączą selektory CSS ze strukturą HTML. Utrudnia to osobie dokonywanie zmian w strukturze HTML bez naruszania istotnych stylów, które sprawiają, że strona jest czytelna i funkcjonalna. Na przykład:

W tym przykładzie, jeśli zmienisz strukturę kodu HTML tego pierwszego, utracisz wszystkie style dla tego elementu, ponieważ był on zależny od struktury. Zamiast tego oddzielenie stylu od struktury, tak jak w przypadku późniejszych klas, pozwoli na ponowne użycie CSS, nawet jeśli zmienisz strukturę HTML.

Prawidłowo sformatowana strona to dobrze zoptymalizowana strona.

Treść Twojej strony jest ogromnym czynnikiem w rankingach. Podobnie jest z właściwym wykorzystaniem elementów strony internetowej. W szczególności HTML, CSS i JavaScript odgrywają równie dużą rolę w optymalizacji SEO Twojej strony. Znając rolę każdego elementu sieci i używając go w odpowiedni sposób, możesz zwiększyć swój ranking. Po prostu zbuduj stronę, która będzie funkcjonalna i atrakcyjna. Jeśli myślisz o zmianie motywów dla CMS lub dodaniu niestandardowego kodu CSS lub JavaScript do swoich stron, spójrz ponownie i upewnij się, że używasz swoich elementów internetowych we właściwy sposób.