Jak naprawić niebieskie linki w Gmailu, aby spełnić marzenie e-mail?

Opublikowany: 2021-07-16

Sfrustrowany pozornie przypadkowymi, niemarkowymi niebieskimi linkami podczas testowania doskonałej poczty e-mail w Gmailu? Byłem tam. Skończone. Dobre wieści? Nie zrobiłeś nic złego. Od 2017 r. Gmail automatycznie zamienia niektóre kopie — takie jak adresy e-mail, numery telefonów, adresy fizyczne i godziny — w elementy klikalne, czasami zmieniając je na niebieski. A ponieważ otwiera się drugi najpopularniejszy klient poczty e-mail z ponad 30% e-mailami, według naszych danych nie można zignorować Gmaila.

Niezależnie od tego, jakie są niebieskie linki i dlaczego, Twój e-mail powinien wyglądać tak, jak został zatwierdzony. A przynajmniej niech linki będą na markę. Na szczęście usunięcie domyślnej stylizacji nie jest takie trudne. Przeprowadzimy Cię przez proces powstawania niebieskich linków — i co możesz zrobić, aby dopasować je do wyglądu wiadomości e-mail. Wszystko przy zachowaniu łatwych w użyciu linków dla odbiorców Gmaila.

Czy w Twoich e-mailach znajdują się niebieskie linki?

Zawsze wiedz, kiedy klienci poczty e-mail zaktualizują renderowanie wiadomości e-mail dzięki podglądowi wiadomości e-mail Litmus. Wyświetlaj podgląd e-maili we wszystkich popularnych klientach i urządzeniach pocztowych — w tym w Gmailu — i wykrywaj błędy przed wysłaniem.

Dowiedz się więcej →

Pamiętaj o dostępności

Po pierwsze, należy pamiętać, że niebieskie linki służą ważnemu celowi. Ułatwiają subskrybentom działanie na Twoim e-mailu — na przykład przejście do podanej lokalizacji lub szybkie połączenie. Zarówno pod względem użyteczności, jak i dostępności.

bluelinki — Tak, w naszych e-mailach też pojawiły się niebieskie linki

Jednak te automatyczne linki mogą mieć domyślną stylizację: podkreśloną i niebieską. To mogą być sprzeczne z projektowania e-mail, a nawet uczynić swój e-mail mniej dostępne, jeśli linki są na kolor tła, który nie kontrastu również z nimi.

stopka — Niebieski link tutaj jest ledwo zauważalny

Dlatego warto zachować funkcjonalność łącza, ale nadać mu styl, aby lepiej pasował do projektu wiadomości e-mail i był czytelny.

Anatomia zepsutego e-maila (wydanie drugie)

Uwaga: istnieją inni sprawcy zepsutego e-maila

Czy błędy e-maili przyprawiają Cię o dreszcze? Niebieskie linki to tylko jeden ze sposobów, w jaki Twój e-mail może wyglądać na uszkodzony. Zapoznaj się dokładnie z tym, co może zepsuć Twój e-mail oraz ze wskazówkami i poradami, aby pozostać prawdziwymi.

Ujawnij typowe problemy i poprawki →

Trzy sposoby na zmianę niebieskiego koloru linku w Gmailu

Aby zmienić niebieski kolor linku, musisz zrozumieć, dlaczego tak się dzieje. Gdy Gmail wykryje adres lub numer telefonu w e-mailu, automatycznie dodaje dodatkową deklarację stylu, która formatuje dowolny link w e-mailu jako niebieski, jeśli nie ma do niego dołączonych stylów wbudowanych:

.ii a[href] { color: #15c; }

Klasa .ii odnosi się do klasy nadanej div, która zawiera całą wiadomość e-mail w Gmailu. a[href] to selektor atrybutów CSS. Oznacza to, że każde łącze w klasie .ii musi mieć kolor niebieski.

Adresy i numery telefonów nie są często łączone w e-mailach. Jednak Gmail rozpoznaje je i zamienia je w link, czy Ci się to podoba, czy nie. Ponieważ łącza te są tworzone w locie, nie są do nich dołączone żadne wbudowane style, a zatem używana jest domyślna stylizacja powyżej.

Istnieją trzy metody, których możesz użyć, aby zatrzymać kolor niebieski linków, w zależności od tego, czy chcesz, aby te linki wyglądały tak samo, czy inaczej niż inne linki w wiadomości e-mail.

Opcja 1: Użyj metody <span>

Metoda <span> to najprostsza technika zapobiegania zmienianiu koloru numerów telefonów i adresów w Gmailu na niebieski. Jest to idealne rozwiązanie, jeśli chcesz stylizować je inaczej niż inne linki , zachowując ich funkcjonalność. Oto jak:

Zawiń numer telefonu lub adres w <span></span>
Daj <span> klasę, na przykład: <span class=”kontakt”></span>
Zadeklaruj klasę w sekcji <style> swojego e-maila, aby stylizować numer telefonu lub adres w dowolny sposób
Zysk!

Oto przykład kodu HTML, w którym adres pojawia się w wiadomości e-mail:

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

A oto przykładowa deklaracja stylu dla klasy „kontakt” w bloku <style> w e-mailu <head>, gdzie ustawiamy link jako czarny (#000000) i podkreślony:

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

Zmień czarny kolor w naszym przykładowym kodzie, zamieniając #000000 na kolorowy kod szesnastkowy, który pasuje do Twojej marki. Jeśli nie chcesz, aby Twój link był podkreślony, zmień podkreślenie w kodzie na Brak.

Utworzenie <span> z nazwą klasy wokół adresu lub numeru telefonu daje ci coś do kierowania za pomocą CSS. Samo kierowanie na <span> nie zmieni stylu linku. Stylizuje tylko tekst bez linku , podczas gdy link w <span> nadal będzie miał domyślny niebieski styl. Tak więc, aby kierować łącze wewnątrz zakresu, deklaracja stylu zawiera nazwę klasy oraz „a”.

Jest to szczególnie przydatne w przypadku numerów telefonów, jeśli chcesz dodać <a href=”tel:XXX-XXXX”> bezpośrednio do numerów telefonów, ale nie chcesz, aby numer telefonu próbował otworzyć aplikację telefonu na komputerze. A potem pojawia się konieczność ukrywania i pokazywania treści na komputery lub urządzenia mobilne. Po prostu pomiń ból głowy i wykorzystaj fakt, że klient poczty w końcu robi coś, aby Ci pomóc.

Opcja 2: Zastąp wszystkie style linków

Inną opcją jest ustawienie własnego domyślnego stylu, który będzie miał zastosowanie do wszystkich linków w wiadomości e-mail. Ta opcja jest idealna, jeśli chcesz, aby linki do Twojego adresu lub numeru telefonu wyglądały tak samo jak inne linki, zachowując jednocześnie funkcjonalność zapewnianą przez Gmaila.

Dodaj tę deklarację stylu dotyczącą Gmaila do bloku <style> w sekcji <head> e-maila, na przykład:

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

Następnie dodaj identyfikator „body” do tagu body:

<body id="body">
</body>

Podkreślenie „u” to metoda kierowania dla Gmaila. Konwertuje doctype na znacznik podkreślenia, a Gmail jest jedynym klientem, który zachowuje się w ten sposób. Dlatego używanie tagu podkreślenia z sąsiednim selektorem elementu div lub identyfikatora/klasy na tym div w CSS jest unikalną metodą kierowania reklam tylko na klientów Gmaila (przynajmniej na razie). W tym przykładzie użyliśmy identyfikatora „body”.

Dzięki tej metodzie, jeśli chcesz, aby linki w wiadomości e-mail miały nieco inny styl, należy to dodać do tych konkretnych linków, ponieważ ta technika powyżej spowoduje stylizowanie wszystkich linków zgodnie z definicją w deklaracji stylu.

Jednak z tą metodą jest małe zastrzeżenie.

Nie działa, gdy użytkownicy Gmaila mają domyślnie wyłączone obrazy, a następnie je włączają. Wynika to z błędu w Gmailu, który nieprawidłowo zmienia styl po włączeniu obrazów. Programista poczty Remi Parmentier ma więcej szczegółów na temat tego błędu.

Opcja 3: Dodaj tag <a> i samodzielnie dodaj do nich linki

Dzięki aktywnemu łączeniu elementów, które Gmail łączyłby automatycznie, masz większą kontrolę nad ich stylami i kolorami. Ta opcja jest idealna, jeśli chcesz również zmienić miejsce, w którym treść prowadzi do , Być może masz stronę kontaktową w swojej witrynie, do której wolisz kierować subskrybentów, zamiast kazać im automatycznie otwierać aplikację nawigacyjną telefonu lub od razu dzwonić do Ciebie.

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

W powyższym przykładzie adres fizyczny jest wystylizowany na szary kolor bez podkreślenia i jest połączony ze stroną kontaktową naszej witryny. Uniemożliwi to Gmailowi zastosowanie domyślnego stylu i funkcji.

Żegnaj, niebieskie linki do Gmaila

W przypadku jednej z naszych trzech metod niebieskie linki nie będą już zakłócać wyglądu wiadomości e-mail i sprawiać, że będzie wyglądała na uszkodzoną w Gmailu. I to świetnie — ponieważ zepsute e-maile mogą zepsuć zaangażowanie i konwersje (a na pewno tego nie chcesz).

Masz pytania dotyczące naszych metod? A może masz inne rozwiązanie do udostępnienia? Daj nam znać w komentarzach poniżej.

Twórz markowe, bezbłędne e-maile z Litmus

Zobacz, jak wyglądają Twoje e-maile (nie ma już niebieskich linków, prawda?) w ponad 90 klientach poczty e-mail, aplikacjach i urządzeniach, w tym w Gmailu. Pożegnaj się z niedziałającymi e-mailami. Uff!

Rozpocznij bezpłatny okres próbny →

Pierwotnie opublikowana 13 października 2017 r. przez Jainę Mistry. Ostatnia aktualizacja 16 lipca 2021 r.

Udostępnij, dziękuję!

Co musisz wiedzieć, aby zarządzać 3 rodzajami nieaktywnych subskrybentów poczty e-mail

Dowiedz się, jak podejść do nieaktywnych subskrybentów w oparciu o typ nieaktywnych subskrybentów wiadomości e-mail, aby stworzyć skuteczną strategię ponownego zaangażowania.
Czytaj więcej

Przykłady i strategie e-mail marketingu na Dzień Singla

E-maile z okazji Dnia Singla zyskują na popularności na całym świecie (nie tylko w Chinach). Zobacz 8 przykładów e-maili, które zainspirują Twoją kampanię oraz strategie, aby rozpocząć planowanie.
Czytaj więcej

Holistyczna macierz metryk wiadomości e-mail: czy widzisz pełny obraz?

Zobacz pełny obraz skuteczności e-mail marketingu dzięki krótko- i długoterminowym, holistycznym metrykom wiadomości e-mail. I już dziś twórz skuteczniejsze kampanie.
Czytaj więcej

Jak wyrzucić e-maile z Czarnego Piątku i Cyberponiedziałku (BF/CM) poza park?

Wyróżnij się i konwertuj subskrybentów dzięki tym sprawdzonym strategiom e-maili z okazji Czarnego Piątku w Cyberponiedziałek oraz doskonałym przykładom, którymi można się zainspirować.
Czytaj więcej

Renderowanie wiadomości e-mail w programie Outlook: jak nauczyłem się przestać się martwić i pokochać program Outlook

Zastanawiasz się, dlaczego Twoje e-maile wyglądają źle w Outlooku? Dowiedz się o problemach z renderowaniem i wyświetlaniem wiadomości e-mail, które możesz napotkać, oraz o tym, jak je naprawić, aby uzyskać perfekcję wiadomości e-mail.
Czytaj więcej