SEO: dane strukturalne, open graph, favicon Opcje

[Malinaa]

Patrzę na stronę w wynikach wyszukiwania Google i porównuję wygląd wyniku wyszukiwania z najlepszymi : )

Wpisuje w wyszukiwarkę frazę: Facebook i co się wyświetla
w odniesieniu do porównywanej strony jest podobnie brakuje jednak nagłówka z nazwą strony, zamiast nazwy jest domena.pl i poniżej adres https//www.domena.pl

1. Pytanie jak sprawić, aby w wynikach wyszukiwania pojawiała się nazwa serwisu (zamiast w nazwie domena)?

Wpisuje w wyszukiwarce frazę: Instagram i też w nagłówku mamy Instagram (nie instagram.com)
dochodzi tutaj też favicon, który wyświetlany jest tu większy niż w przypadku FB, gdzie jest "typowy" 16x16, ale przy Instagramie w wynikach wyświetlana jest większa ikona, spokojnie 24x24 może więcej.

2. Co dodać w kodzie strony, aby w wynikach wyszukiwania wyświetlana była większa ikona (zamiast typowy favicon 16x16)?

[Tomplus]

Jeżeli chodzi o większe ikony to należy dodać taki kod i pokrewny.. Rozmiary mogą być większe niż podane tu 64,32, np. 512x512.

[HTML] pobierz, plaintext 
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
[HTML] pobierz, plaintext 

[Malinaa]

Obecnie mam takie

[HTML] pobierz, plaintext 
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="favicon.png" rel="icon" type="image/png">
<link href="favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
<link href="favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
[HTML] pobierz, plaintext 

gdzie favicon.png (druga linia) ma wymiary 48x48 i to jest maksymalny rozmiar, aby dodać większe muszę stworzyć nową grafikę : |

apple-touch-icon, czy też musi być dodane w rozmiarze 180x180 bo zajrzałem co tam ciekawego piszą i wyczytałem, że ze względu na jakość najlepiej główny szablon favicon zrobić w wymiarach 512x512 i pewnie też dodać do meta tags,
gdzie wcześniej trafiłem na info, że współczesne ikony nie powinny być większe niż 16×16 i 32×32. Jak widzę powinny być jednak większe, bo obecnie przy 32x32 nadal wyświetla (indeksuje) małą ikonkę,
ostatecznie jak duża powinna być ikona 180, czy wystarczy, może od razu zrobić 512 i dodać też do meta tagów.

Aby nie powtarzać tych tagów wiele razy, co będzie takim optymalnym minimum, które linie kodu umożliwiające oprócz dodania typowej ikony wyświetlić w wynikach wyszukiwania na przeglądarce dużą ikonę?

[Tomplus]

Tutaj jest tabela formatów dla APPLE, to tak na szybko. Dla nieapplowych urządzeń reguły są podobne.

Kod

DEVICE OR CONTEXT    ICON SIZE
iPhone               180px × 180px (60pt × 60pt @3x)
iPhone (X/Plus)      120px × 120px (60pt × 60pt @2x)
iPad Pro             167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini      152px × 152px (76pt × 76pt @2x)

Zwykle tworzysz dużą grafikę, jak największą [chyba że masz grafikę wektorową] i zapisujesz są w do coraz mniejszych rozdzielczości.

[trueblue]

Wedle wskazówek Google, ikona powinna mieć wielokrotność 48px:
https://developers.google.com/search/docs/a...l=pl#guidelines
Poszukaj generatorów favicon, które wygenerują potrzebny kod na wszystkie przeglądarki, iOS i Android.

Czy posiadasz na stronie matatag <title>? Jeśli tak, to czy jego zawartość bezpośrednio wskazuje na przeznaczenie strony?

[Malinaa]

Zrobiłem grafikę 512x512.png, a generator zrobił resztę. Super, jeszcze tylko naniosę poprawki w kodzie i zobaczymy, czy teraz będzie tak super ładnie.
Favicony powinny być już Ok. Dzięki za pomoc.

Chociaż mam jeszcze pytanko do wygenerowanego pliku site.webmanifest
Jaka zawartość powinna być w "name" and "short_name" i dlaczego po dodaniu polskich znaków w tych polach w przeglądarce wyświetla krzaki?

[HTML] pobierz, plaintext 
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}
[HTML] pobierz, plaintext 

Naturalnie mam na stronie metatag <title>, w którym jest nazwa, ale jest też więcej słów kluczowych,
natoniast jak rozumieć "czy jego zawartość bezpośrednio wskazuje na przeznaczenie strony?"

Szukając sposobu na wyświetlanie nazwy (bezpośrednio?) dodałem, m.in.:

[HTML] pobierz, plaintext 
...
<meta property="og:site_name" content="Nazwa Serwisu">
[HTML] pobierz, plaintext 

oraz

[HTML] pobierz, plaintext 
<script type="application/ld+json">
 {
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Nazwa Serwisu",
  "alternateName" : "Nazwa skrócona",
  ...
  "isPartOf": {
   "@type": "WebSite",
   ...
  }
}
</script>
[HTML] pobierz, plaintext 

i znacznik <h1 title="Nazwa skrócona">Nazwa Serwisu</h1>

Coś jednak nadal jest z Nazwą, ponieważ wyświetla w wynikach wyszukiwania zamiast nazwy serwisu - nazwę domeny?
A kod zmodyfikowałem jakiś miesiąc temu, więc jeśli trzeba poczekać na indeksowanie itp. to coś za długo trwa z tą nazwą (ikona po tygodnuu w wynikach była nowa, a nazwy brak).

Ten post edytował Malinaa 4.07.2024, 15:15:51

[trueblue]

Chociaż mam jeszcze pytanko do wygenerowanego pliku site.webmanifest
Jaka zawartość powinna być w "name" and "short_name" i dlaczego po dodaniu polskich znaków w tych polach w przeglądarce wyświetla krzaki?

https://kawalekkodu.pl/home-screen-home-czy...o-na-androidzie
Zapisujesz plik w UTF-8?

Naturalnie mam na stronie metatag <title>, w którym jest nazwa, ale jest też więcej słów kluczowych,
natoniast jak rozumieć "czy jego zawartość bezpośrednio wskazuje na przeznaczenie strony?"

Jak to "słów kluczowych"?
Title powinno wyraźnie wskazywać na zawartość strony - jeśli strona dotyczy zakładu wulkanizacyjnego, to w title nie opisujesz, że to wytwórnia cukierków.
Powinno być sformułowane w "ludzkiej" formie, a nie np. listy słów po przecinku.

[HTML] pobierz, plaintext 
...
<meta property="og:site_name" content="Nazwa Serwisu">
[HTML] pobierz, plaintext 

Metatagi z przedtrostkiem og: dotyczą OpenGraph czyli Facebooka (stąd sobie dociąga dane przy udostępnianiu strony w postach).

[Malinaa]

Zapisuje w UTF-8, ale po sprawdzeniu wykrzaczało. Spróbowałem poprawić w Notepad++ na format UTF-8-BOM i już jest ok.

Do not panic! Słowa kluczowe w sensie frazy (nie po przecinku) takie jak: Wirtualna Polska - Wszystko co ważne

Metatagi OpenGraph dotyczą Facebooka - jasne, jest jednak napisane w księdze Google 8-), że również czasem z nich korzysta.
Jeśli, więc tak się opiera co do Nazwy, może z pomocą OG->FB i Google znajdą konsensus.
No chyba, że masz lepszy pomysł

[Michur]

Odnośnie nazwy strony w serpach: https://developers.google.com/search/docs/a...ite-names?hl=pl

Mogę dodać z własnych doświadczeń, że Google chce, aby te nazwy były unikalne. Jeżeli istnieje już strona, która korzysta z takiej nazwy, w przypadku nowej strony może ją zignorować i będzie nadal wyświetlać domenę. Nawet jeżeli postawisz własny serwis w kilku językach na oddzielnych domenach, to bardzo możliwe, że tylko jednej wersji ustawi nazwę, a reszta będzie wyświetlać nadal domenę.

Ten post edytował Michur 14.01.2025, 15:41:25