Ten post jest pierwszym w mojej serii o pomocnym HTML i CSS dla blogerów.
Nauczyłem się podstawowego projektowania stron internetowych w wieku 11 lat . Doprowadziło to do doskonałej pracy przez całe lata studiów i wiele możliwości pracy od czasu do czasu.
Wiedza na temat kodowania, szczególnie w HTML i CSS, nie jest już warunkiem dla blogerów. Łatwe w użyciu motywy i wtyczki oraz WordPress wypełniły luki między tym, czego ludzie chcą i ich doświadczeniem technicznym.
Niezależnie od tego, pomocne jest zrozumienie, jak to działa, zwłaszcza jeśli potrzebujesz dostosować różne elementy swojej witryny. Te wskazówki dotyczące HTML i CSS dla blogerów pomogą zrozumieć SEO.
Przejdź do konkretnej sekcji:
Podstawowy HTML i CSS dla blogerów
Znacznik HTML informuje przeglądarkę, co wyświetlić. Ze wszystkich języków maszynowych HTML jest najbliższy ludzkiemu językowi. Ogólnie rzecz biorąc, nie jest trudno określić podstawowy cel znacznika HTML.
Generalnie tag ma dwie troski, a znacznik otwierający wygląda mniej więcej tak:
<tag>
A tag końcowy to to samo, co odwrotny ukośnik:
</tag>
Zasadniczo do uruchomienia i zamknięcia polecenia HTML potrzebny jest zarówno znacznik otwierający, jak i znacznik końcowy. Brak zamknięcia tagu może spowodować dziwną wygląd strony (lub nawet gorszą).
Nagłówki
Jedną z pierwszych rzeczy, które przychodzą na myśl w dyskusji na temat HTML i CSS dla blogerów w odniesieniu do SEO, są nagłówki.
<h1> Tytuł </h1>
Powyższy fragment kodu reprezentuje tag tytułu. „H” w znaczniku odnosi się do nagłówka, liczba odnosi się do jego poziomu ważności. Tag h1 powinien być tytułem Twojego wpisu na blogu.
<h2> Podtytuł ze słowem kluczowym </h2>
Tag h2 powinien być podpozycją wspierającą tytuł zawierający słowo kluczowe.
Tagi H3-H6 to dodatkowe narzędzia do podtytułów, których możesz używać lub nie. Możesz edytować rozmiar, kolor, czcionkę, pozycję i inne nagłówki w CSS, ale zapiszemy tę lekcję na inny czas. Ogólnie upewnij się, że znaczniki nagłówków mają sens dla treści. Znacznik h1 powinien być największy; wszystko inne powinno stamtąd się zmniejszać.
Nagłówki są ważnym sygnałem dla wyszukiwarek, aby wykazać trafność. Upewnij się, że używasz słowa kluczowego w co najmniej dwóch (ale najlepiej więcej) nagłówkach.
Podczas gdy nagłówki h2-h6 mogą być używane tyle razy na stronie, ile chcesz lub jest to konieczne, nagłówki h1 powinny być używane tylko raz na stronę. Konsultant SEO Alistair Gill mówi, że ludzie mają tendencję do nadużywania nagłówków h1, ponieważ chcą zwiększyć tekst.
„ Problem z wieloma h1s polega na tym, że są one mało istotne . Wyszukiwarki wykorzystują je do decydowania o treści, więc jeśli używasz więcej niż jednego, muszą podjąć decyzję, która jest ważniejsza. ”- Alistair Gill
Zawartość
Następujące znaczniki HTML i CSS nie są konieczne do zapamiętania, ale są przydatne do poznania.
<strong> Pogrubiony tekst </strong> <em> Kursywa Tekst </em> <span style = "text-decoration: podkreślenie"> Podkreślenie tekstu </span>
Mocne dla pogrubienia, em (phasize) dla kursywy i podkreślenia dla podkreślenia. Całkiem proste, prawda?
Najlepiej byłoby jednak, gdyby cokolwiek z „style =” znajdowało się w osobnym dokumencie CSS - nie w kodzie na twoim poście. To, co znane jest jako CSS inline (style CSS na stronie, a nie osobny dokument), jest niekorzystne dla SEO, ponieważ może zmniejszyć szybkość ładowania strony. Zagłębimy się w ten temat w kolejnej lekcji. Upewnij się, że chcesz otrzymywać powiadomienia o moim biuletynie e-mailowym po jego opublikowaniu (formularz rejestracji na pasku bocznym)!
Dodanie dekoracji tekstowych do słowa kluczowego w tekście jest dodatkowym sygnałem dla wyszukiwarek o znaczeniu artykułu. Jeśli to możliwe, wykorzystaj wszystkie trzy z tych zabiegów tekstowych na słowa kluczowe w całym artykule. Po prostu nie rezygnuj z czytelności.
Są starsze „przestarzałe” znaczniki dekoracji tekstu, które są obecnie uważane za przestarzałe dla wyszukiwarek. Obejmują one:
<b> Pogrubiony tekst </b> <i> Kursywa tekstu </i> <u> Podkreśla tekst </u>
Chociaż są one łatwiejsze do zapamiętania i wydają się bardziej logiczne, wyszukiwarki zinterpretują je jako znak, że nie są na bieżąco z nowymi najlepszymi praktykami i może to spowodować, że spadnie strona wyników wyszukiwania (nie dobry!). Zamiast tego wybierz poprzednią listę tagów HTML i CSS.
Obrazy
Najbardziej podstawowa wersja HTML obrazu dla SEO wygląda następująco:
<img src = "IMAGE.JPG" alt = "Słowo kluczowe">
Część „ img ” znacznika mówi stronie, aby wywołała obraz. „ Src ” jest źródłem pliku - wpisz tutaj swój adres URL obrazu. Adres URL powinien zawierać słowo kluczowe, więc zmień jego nazwę, zapisz i prześlij ponownie, jeśli to konieczne. Komenda „ alt ” została pierwotnie stworzona dla czytników ekranu, aby ułatwić dostęp do Internetu osobom niepełnosprawnym. Podczas gdy powinieneś użyć go do opisania obrazu, bardzo ważne jest również umieszczenie tutaj słowa kluczowego. Obraz to potężny komunikator mający znaczenie dla wyszukiwarki - więc upewnij się, że używasz go jako takiego!
Spinki do mankietów
Dodatkowy wzrost SEO można uzyskać, dodając wewnętrzne linki do stron i postów, które tworzą pomost do innych części bloga (lub witryny). Pomaga to wyszukiwarkom łączyć kropki między treściami w witrynie, co pomaga osiągnąć lepsze wyniki w wynikach wyszukiwania.
Chociaż WordPress (i inne systemy zarządzania treścią z edytorami WYSIWYG) bardzo ułatwia dodawanie linków bez zrozumienia HTML i CSS, oto jak wygląda podstawowy kod:
<a href="http://www.website.com/page.html"> Tekst linku </a>
Złammy to:
„ A ” jest kotwicą. To mówi stronie, że dzwonisz na inną stronę. „ Href ” jest jak „ src ” w tagu obrazu. To mówi stronie, co wywołujesz. Pomiędzy cytatami znajduje się adres URL strony. Pomiędzy karatami po cudzysłowach dodajesz tekst łącza.
Poza łączeniem stron na swoim blogu, polubienia wpływają również pozytywnie na SEO. Chcemy uwzględnić dwa lub więcej w każdym poście, potencjalnie dla lidera myśli lub polecanego biznesu.
Te podstawy dadzą ci wystarczająco dużo, aby rozpocząć naukę ogólnego HTML i CSS dla blogerów. Zostaw swoje pytania HTML i CSS w komentarzach i mogą one stać się kolejnym tematem na blogu.
Opublikowany również na Średni .
Całkiem proste, prawda?