Tag: html

30
kwi

SEO Twojej strony WWW – 15 kroków do perfekcyjnie zoptymalizowanej strony, cz.1

Optymalizacja strony WWW pod kątem wyszukiwarek internetowych zawsze była dla nas podstawowym elementem przy tworzeniu nowych witryn dla naszych klientów. Projektując strony WWW lub starając się ulepszyć istniejące, należy wziąć pod uwagę niniejszą listę porad, która może pomóc w zwiększeniu efektywności SEO Twojej witryny. Warto kierować się wymienionym wskazówkami, ponieważ bycie widocznym w Internecie to podstawa sukcesu wielu firm.

1. Zwiększ widoczność dzięki przyjaznym dla SEO adresom URL:

Po pierwsze, tworząc nową stronę lub modyfikując istniejącą, pamiętaj, by mieć przyjazny dla SEO adres URL, który naturalnie używa słów kluczowych, jednocześnie pokazując o czym jest strona. Jest to dobre zarówno dla wyszukiwarek – do przypisania wartości SEO, jak i dla użytkowników – wzbudza zaufanie poprzez uczynienie adresu URL zrozumiałym.
Wskazówki:
a) Eksperymentuj z adresami URL zawierającymi tylko słowa kluczowe, ponieważ wykazują oznaki podniesienia rangi.
b) Unikaj trudnych, domyślnych adresów URL generowanych przez Twój system zarządzania treścią. Często składają się one z kombinacji liter i cyfr, co nie jest przyjazne pod kątem wyszukiwarki.
c) Upewnij się czy używasz tylko jednej wersji adresu URL – jeśli nie, może nastąpić zamieszanie zarówno po stronie użytkownika, jak i po stronie wyszukiwarki. Jeśli to możliwe, sprawdź plik Robots.txt, aby upewnić się, że Twój adres URL będzie podlegał indeksowaniu.

2. Tytuł – Zawsze włączaj słowa kluczowe:

SEO - keywords-słowa kluczoweZnacznik tytułu jest najważniejszym czynnikiem SEO strony. Algorytm Google przypisuje dużą wagę do tagu Tytuł, aby zidentyfikować, o czym jest strona internetowa. Nie tylko wyświetla się na górze przeglądarki, ale także w wynikach SERP. Zwróć uwagę, czy nie tylko mądrze używasz słowa kluczowego, ale też czy tytuł jest przekonujący. Używaj zasad pisania dobrych nagłówków, które są zrozumiałe, proste i przechodzą od razu do sedna.
Wskazówka: Im bliżej początku tytułu znajduje się słowo kluczowe, tym większą wagę ma w wyszukiwarce.

3. Nagłówki HTML – H1, H2,H3:

Podstawową zasadą jest hierarchia. Element najwyższego poziomu powinien być oznaczony tagiem h1, kolejny pod względem ważności – h2 itd. Celem tagów h jest poinformowanie Google, w jaki sposób treść jest uporządkowana pod kątem czytelności. Na przykład, tytuł artykułu opisuje temat tego posta, a następnie podpozycje, które wyjaśniają i szczegółowo opisują SEO strony.
Podczas pracy nad stroną zwróć uwagę na nagłówki i podtytuły swojej treści i wykorzystaj te same zasady, co w przypadku tagów tytułu. Czy nagłówki używają słów kluczowych w sposób naturalny? Czy są angażujące?

4. Meta opis:

Meta opis znajduje się tylko w wynikach wyszukiwania. Nie ma innego miejsca na stronie czy w przeglądarce, w którym ten element byłby widoczny. Warto zadbać o jego poprawne działanie oraz wyświetlanie. Poprawnie wyświetlający się meta opis nie powinien przekraczać 150 znaków. Spraw, by te 150 znaków zostało dobrze wykorzystane, np. do wezwania do działania, wskazania unikalnych propozycji i wartości, promowania nazwy marki, polecanych szczegółów dotyczących Twojej firmy itp.

5. Wewnętrzne linkowanie:

Celem jest zawsze kierowanie wyszukiwarek i użytkowników w głąb witryny, więc jeśli odwołujesz się do konkretnych stron lub źródeł, pamiętaj, aby połączyć je linkiem, który używa wezwań do działania (np. „Dowiedz się więcej”, „Zapisz się teraz”) lub frazy kluczowe naturalnie. Jeśli przejdziesz do naszego postu na stronie Generating Leads Online, zobaczysz na końcu postu zamiast dodania nagiego linku użyliśmy tekstu kotwicy „Pobierz nasz przewodnik”, aby skierować użytkowników do przewodnika.

6. Dodaj linki wychodzące:

Linki wychodzące mają swoje miejsce w świecie SEO i uważa się, że łączenie się z innymi stronami w twojej branży w celach referencyjnych lub cytowań ma pozytywny wpływ na SEO. Linki zewnętrzne to nie tylko wyższe miejsce w rankingu Google. Jest to sygnał trafności, który pomaga Google zrozumieć twoją treść, o co w niej chodzi, a także pokazuje, że dodajesz wartościowe odnośniki czytelnikom, łącząc się z przydatnymi zasobami.

7. Używaj języka naturalnego:

SEO - meta opisUżywaj słów kluczowych, a także stosuj ich odmiany kontekstowe w treściach, które pojawiają się w twojej witrynie. Najlepiej kilkukrotnie powtórzyć dane słowo kluczowe w różnych miejscach na stronie WWW. Nie zapominaj żeby kontent był podany w sposób przemyślany i naturalny, najlepiej kilkukrotnie powtórzony. Ta technika SEO znana jest jako LSI z ang. Latent semantic indexing – ukryte indeksowanie semantyczne, co oznacza synonimy oraz słowa kluczowe, których Google używa, aby lepiej określić trafność strony. Na przykład, jeśli pracujesz nad stroną docelową związaną z zespołem The Rolling Stones, według najlepszych praktyk SEO należy używać zwrotu „Rolling Stones” w całym tekście, a także powiązanych zwrotów, takich jak „rock n roll”, „Mick Jagger” i „Keith Richards”.
Dobrym testem, pokazującym naturalność tekstu, jest po prostu głośne czytanie treści – czy brzmi to jak coś, co naturalnie występuje w rozmowie? Jeśli nie, pomyśl o zmniejszeniu użycia słów kluczowych lub dostosowaniu sformułowań, tak aby był czytana treść była płynna.

8. Kontroluj objętość/długość treści:

Długość / objętość tekstów na stronie WWW może oznaczać zwiększenie wartości SEO, więc staraj się dążyć do dłuższych tekstów, jeśli możesz. Teoretycznie im więcej wartościowych treści dostarczasz, tym lepiej, ale nie zawsze tak jest. Aby zoptymalizować stronę chodzi o znalezienie właściwej równowagi pomiędzy liczbą słów i oferowaną wartością tekstu. Fragmenty treści, które są bogate w informacje, nie muszą być złożone z setek zdań. Dobrym pomysłem może być poproszenie zaprzyjaźnionej osoby o ocenę, aby określić, czy wzbudzasz ciekawość użytkowników za pomocą treści, które zapewniają im to, czego poszukują, np. do nauki, rozrywki itp.

19
lis

Jak stworzyć napis wypełniony grafiką przy pomocy CSS3 i HTML5?

Czy pamiętasz może czas, kiedy zaczynałeś swoją przygodę z Photoshopem? Może zaprojektowałeś wtedy tekst oparty na obrazie, a następnie umieściłeś go na swojej stronie?

Dzięki właściwościom maski CSS, możesz uzyskać podobny efekt.

Elementy, które będa potrzebne:

dowolne zdjęcie
tekstura (plik PNG)
czcionka Lato (Google Font)
czcionka Pacifico (Google Font)
czcionka Oswald (Google Font)

Będziemy tworzyć takie napisy:clip

Używanie Webkit Background-Clip

W tej części tutoriala użyjesz właściwości background-clip aby uzyskać ciekawy napis przy pomocy nagłówka h1.

Struktura HTML

Umieść w swoim kodzie dwa bloki i nadaj im kolejno ID:  napis-1, napis-2. W obu blokach umieścić dowolny tekst za pomocą nagłówków h1.

<div id="napis-1">

<h1>LEW</h1>

</div>


<div id="napis-2">

<h1>Jest królem dżungli!</h1>

</div>

Style CSS

Teraz w CSS użyjemy właściwości background-clip aby przyciąć odpowiednio tło do tekstu. Tło domyślnie będzie rozciągać się do zewnętrznej krawędzi obramowania tekstu.

Użyjemy dwóch różnych obrazów tła. Pierwszy z nich to bedzie lew a drugi dżungla.

Właściwość Webkit-text-fill-color ustawiamy jako przezroczystą aby mieć pewność że kolor nie pojawi się nam w tekście.

#napis-1 {
	background: url(images/lion.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

#napis-2 {
	background: url(images/jungle.jpg) no-repeat top center;
	background-size: cover;
	color: #fff;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	cursor: pointer;
}

#napis-1 h1 {
	font-size: 200px;
	font-family: Anton, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin: 0;
	padding: 0;
}

#napis-2 h1 {
	font-size: 110px;
	font-family: Pacifico, sans-serif;
	text-align: center;
	-webkit-transition: text-shadow 1s ease;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	margin-top: -75px;
	padding: 0;
}

Użycie Webkit Mask-Image

Korzystając z właściwoścy webkit-mask-image możesz umieścić obraz w tekście. Jest to prawie taka sama właściwość jak background-clip z tym, że obraz maski przycina widoczną część elementu zgodnie z przezroczystością maski obrazu.

Struktura HTML

Stwórz napis używając nagłówka h1 i całość umieść w bloku o ID maska.


<div id="maska">

<h1>BARDZO FAJNY NAPIS Z TŁEM</h1>

</div>

Style CSS

W CSS określ kolor, typ, wielkość czcionki, itd. Ponadto użyj właściwości -webkit-mask-image do przycięcia tła wobec tekstu. Obróć tekst o -4 stopnie przy pomocy właściwości transform.

#maska{
    font-family: Oswald, sans-serif;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    border: 14px solid #fff;
    border-radius: .2em;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(images/rough-texture.png);
    -webkit-transform: rotate(-4deg);
    -moz-mask-image: url(images/rough-texture.png);
    -moz-transform: rotate(-4deg);
    -o-mask-image: url(images/rough-texture.png);
    -o-transform: rotate(-4deg);
    mask-image: url(images/rough-texture.png);
    transform: rotate(-4deg);
}

Podsumowanie

W taki oto prosty sposób można łatwo przyciąć obraz do tekstu używając właściwości background-clip w CSS. Pamiętaj tylko, że przeglądarka Internet Explorer 8 nie ma wsparcia dla tej właściwości.

Demo oraz pliki do pobrania.

Używamy plików cookie

Nasza strona wykorzystuje pliki cookie, aby poprawić komfort korzystania z niej. Aby dowiedzieć się więcej o plikach cookie, których używamy, zapoznaj się z naszą witryną polityka prywatności.

Prosta polityka prywatności

Poniżej możesz zmienić ustawienia plików cookie nasze i naszych partnerów. Korzystanie przez nas z analitycznych plików cookie wymaga zgody użytkownika.

  • Analityka

    Analityczne pliki cookie służą do zrozumienia, w jaki sposób użytkownicy wchodzą w interakcję z witryną. Te pliki cookie pomagają dostarczać informacji na temat wskaźników liczby odwiedzających, współczynnika odrzuceń, źródła ruchu itp. Głównym celem analityki jest poprawa funkcjonalności witryny lub aplikacji.

    akceptacja
  • Niezbędne pliki cookie

    Te pliki cookie są wykorzystywane w celu zapewnienia użytkownikowi bardziej spersonalizowanego korzystania z naszej witryny internetowej i zapamiętywania wyborów dokonywanych przez użytkownika podczas korzystania z naszej witryny internetowej. Na przykład możemy używać funkcjonalnych plików cookie do zapamiętywania preferencji językowych użytkownika lub danych logowania.

    wymagany