Wygląda na to, że istnieje kilka różnych technik, więc miałem nadzieję uzyskać „ostateczną” odpowiedź w tej sprawie ...
Na stronie internetowej powszechną praktyką jest tworzenie logo, które prowadzi do strony głównej. Chcę to zrobić, jednocześnie optymalizując pod kątem wyszukiwarek, czytników ekranu, IE 6+ i przeglądarek, które wyłączyły CSS i / lub obrazy.
Przykład pierwszy: nie używa znacznika h1. Nie tak dobre dla SEO, prawda?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
Przykład drugi: Znalazłem to gdzieś. CSS wydaje się trochę zrzędliwy.
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}
Przykład trzeci: Ten sam HTML, inne podejście z użyciem wcięcia tekstu. Jest to podejście „Phark” do zastępowania obrazów.
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
Przykład czwarty: metoda Leahy-Langridge-Jefferies . Wyświetla się, gdy obrazy i / lub css są wyłączone.
<h1 id="logo" class="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}
Jaka metoda jest najlepsza do tego rodzaju rzeczy? W odpowiedzi podaj kod HTML i CSS.
title
atrybut nie powinien znajdować się w<a>
?Odpowiedzi:
Brakuje Ci opcji:
tytuł w href i img do h1 jest bardzo, bardzo ważny!
źródło
Robię to głównie jak wyżej, ale ze względu na dostępność muszę obsługiwać możliwość wyłączenia obrazów w przeglądarce. Więc zamiast wcięcia tekstu z linku poza stroną, zakrywam go absolutnie pozycjonując
do pełnej szerokości i wysokości<span>
<a>
i używając,z-index
aby umieścić go nad tekstem linku w kolejności układania.Cena jest jedna pusta
<span>
, ale jestem gotów mieć ją tam dla czegoś tak ważnego jak<h1>
.źródło
Jeśli ważne są względy dostępności, użyj pierwszego wariantu (gdy klient chce zobaczyć obraz bez stylów)
Nie musisz spełniać wyimaginowanych wymagań SEO, ponieważ powyższy kod HTML ma prawidłową strukturę i tylko Ty decydujesz, czy jest to odpowiednie dla odwiedzających.
Możesz także użyć wariantu z mniejszym kodem HTML
Pamiętaj, że usunąłem wszystkie inne style CSS i hacki, ponieważ nie odpowiadały zadaniu. Mogą być przydatne tylko w szczególnych przypadkach.
źródło
display:none
nie jest dostępne.Trochę się tutaj spóźniłem, ale nie mogłem się oprzeć.
Twoje pytanie jest na wpół wadliwe. Pozwól mi wyjaśnić:
Pierwsza połowa twojego pytania, dotycząca zastąpienia obrazu, jest ważnym pytaniem, a moim zdaniem jest to proste logo; atrybut alt; i CSS do jego pozycjonowania są wystarczające.
Druga połowa twojego pytania, dotycząca „wartości SEO” H1 dla logo, jest niewłaściwym podejściem do decydowania, które elementy zastosować dla różnych rodzajów treści.
Logo nie jest głównym nagłówkiem ani nawet nagłówkiem, a użycie elementu H1 do oznaczenia logo na każdej stronie witryny wyrządzi (nieznacznie) więcej szkody niż pożytku dla twoich pozycji w rankingu. Semantycznie, nagłówki (H1 - H6) są odpowiednie do, no cóż, tylko: nagłówków i podtytułów dotyczących treści.
W HTML5 na stronie dozwolony jest więcej niż jeden nagłówek, ale logo nie zasługuje na żaden z nich. Twoje logo, które może być rozmytym zielonym widżetem, a jakiś tekst znajduje się z boku nagłówka z jakiegoś powodu - to coś w rodzaju „stempla”, a nie elementu hierarchicznego do strukturyzacji treści. Pierwsza (to, czy wykorzystasz więcej, zależy od hierarchii nagłówków) H1 każdej strony witryny powinna zawierać nagłówek z jej tematem. Główny główny nagłówek strony indeksu może brzmieć „Najlepsze źródło rozmytych zielonych widżetów w Nowym Jorku”. Podstawowym nagłówkiem na innej stronie może być „Szczegóły wysyłki dla naszych rozmytych widżetów”. Na innej stronie może to być „About Bert's Fuzzy Widgets Inc.”. Masz pomysł.
Uwaga dodatkowa: Choć brzmi to niesamowicie, nie patrz na źródło poprawnych właściwości internetowych Google. To jest cały post sam w sobie.
Aby uzyskać jak najwięcej „wartości SEO” dla HTML i jego elementów, zapoznaj się ze specyfikacjami HTML5 i podejmij decyzje dotyczące znaczników na podstawie semantyki (HTML) i wartości dla użytkowników przed wyszukiwarkami, a będziesz mieć większy sukces ze swoją SEO.
źródło
Myślę, że zainteresowałaby Cię debata H1 . To debata na temat tego, czy użyć elementu h1 do tytułu strony, czy do logo.
Osobiście wybrałbym twoją pierwszą sugestię, coś w tym stylu:
Oczywiście zależy to od tego, czy twój projekt używa tytułów stron, ale takie jest moje stanowisko w tej sprawie.
źródło
To była dobra opcja dla SEO, ponieważ SEO nadaje tagowi H1 wysoki priorytet, wewnątrz tagu h1 powinna znajdować się nazwa Twojej witryny. Przy użyciu tej metody, jeśli wyszukujesz nazwę witryny w SEO, wyświetli się również logo Twojej witryny.
chcesz ukryć nazwę strony LUB tekst, użyj wcięcia tekstu w wartości ujemnej. dawny
źródło
Brakowało tytułu w
<a>
elemencie.Proponuję umieścić tytuł w
<a>
elemencie, ponieważ klient chciałby wiedzieć, jakie jest znaczenie tego obrazu. Ponieważ ustawiłeśtext-indent
już test<h1>
, ten użytkownik może uzyskać informacje o głównym logo, gdy najedzie na logo.źródło
Jak działa W3C?
Wystarczy spojrzeć na https://www.w3.org/ . Obraz ma
z-index:1
, tekst jest tutaj, ale z tyłu ze względu naz-index:0
sprzężony zposition: absolute;
Oryginalny HTML:
Oryginalny CSS:
źródło
Jedną kwestią, której nikt nie dotknął, jest fakt, że atrybut h1 powinien być specyficzny dla każdej strony, a użycie logo witryny skutecznie powiela H1 na każdej stronie witryny.
Lubię używać indeksu AZ ukrytego h1 dla każdej strony, ponieważ najlepsze SEO h1 często nie jest najlepsze pod względem sprzedaży lub wartości estetycznej.
źródło
Nowa metoda (Keller) ma poprawić prędkość w porównaniu z metodą -9999px:
zalecane tutaj: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
źródło
Nie wiem, ale tego formatu używali ...
Proste i nie wyrządziło mojej stronie żadnej szkody, o ile widzę. Możesz css go, ale nie widzę, aby ładował się szybciej.
źródło
Z powodu SEO:
źródło
Po przeczytaniu powyższych rozwiązań użyłem rozwiązania CSS Grid.
źródło
źródło
źródło