Linkpreview, pré-visualização de URLs de sites em redes sociais e apps de chat

• LinkPreview é um projeto que gera pré-visualizações de links de sites
• Permite ver rapidamente como uma URL específica aparece no Google/X/Facebook/Discord/WhatsApp
• Em comparação com outros produtos ou projetos open source existentes, oferece uma interface simples e fácil de usar

[GN⁺]

Comentários do Hacker News

• Bem feito e divertido de brincar. Gostei especialmente do detalhe de mostrar como ficaria dentro da interface padrão de cada plataforma
  Mas parece que os crawlers de metadados de cada plataforma se comportam de maneiras diferentes e, nas duas que conheço bem, WhatsApp e Discord, as prévias não bateram com a realidade em nenhum dos casos
  Seria bom também mostrar os redirecionamentos que acontecem ao seguir o link, e deveria ser possível passar a URL de destino por parâmetro de consulta ou fragmento
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  Se não dá para especificar dados na URL, fica só uma ferramentinha web bonitinha; mas, se puder ser controlada pela URL, vira um utilitário web nativo compartilhável. URLs legais não mudam; na web, a URL é a API
  Acrescentando após ver o tweet https://x.com/fayazara/status/1830272619637047359: está recebendo destaque no topo do HN e todo tipo de crítica ao mesmo tempo
• Excelente para uma ferramenta pequena, mas seria bom não obrigar a digitar https://; se eu digitar algo como example.com, deveria acrescentar automaticamente
  • Uma opção é usar um campo de entrada com type="url". Acho que isso desativa a capitalização automática e a autocorreção no teclado móvel
  • Sim, vou corrigir. É uma parte realmente irritante
• Ferramenta bem limpa. Algumas sugestões: seria bom buscar as meta tags e imagens usando a string de user agent do serviço cuja prévia está sendo exibida
  Por exemplo, o Twitter/X busca as meta tags com a string de user agent Twitterbot/1.0. Alguns sites podem fornecer conteúdo diferente para cada serviço a fim de otimizar as imagens para a forma como aquele serviço as exibe
  Além disso, a API parece não olhar para as meta tags específicas do Twitter [0]. Ela retorna apenas um único conjunto de metadados usado em todas as prévias. Por exemplo, em https://govukvue.org é usado o formato de card summary, com uma imagem pequena ao lado do nome e da descrição, mas esta ferramenta renderiza como se fosse summary_large_image
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • Vou tentar melhorar. Na verdade, fiz isso às pressas em cerca de 2 horas
• Parece não lidar corretamente com Open Graph. Por exemplo, em vez do og:image na tag head, mostrou um favicon pixelado ampliado para caber no contêiner
  • Estou apenas pegando o que existe no site e mostrando. Vou verificar. Fiquei curioso para saber com qual URL você testou
  • Entrei aqui justamente para dizer isso. Como está usando o favicon, a representação fica totalmente imprecisa
• Normalmente uso https://socialsharepreview.com/, e há muitas ferramentas parecidas. Fico curioso para saber em que esta é diferente ou melhor, e por que você criou a sua própria em vez de usar uma solução existente
  • A ferramenta acima quebrou em algumas prévias. É preciso clicar para ver várias prévias, e ela é lenta. A ferramenta do post mostra tudo em uma única página, é mais limpa, tem mais prévias e o estilo está adequado. São motivos bem claros
  • Eu estava entediado ontem à noite
• Fiz o inverso desta ferramenta. Ela gera uma página que permite verificar quais meta tags criam a prévia em uma plataforma específica
  https://getoutofmyhead.dev/link-preview-tester/
• Ainda sonho com o dia em que poderei criar sites seguindo os padrões, testá-los no navegador e ficar satisfeito porque, naturalmente, eles também vão funcionar em outros navegadores
  Mas agora existe uma ferramenta para verificar manualmente como uma porção de ferramentas proprietárias de chat renderiza as prévias da minha página
  E todo mundo fica empolgado como se fosse a melhor invenção desde o papel. Ver esse tipo de tendência no HN, e não em algum fórum engraçado da indústria de mídia, mostra que vivemos tempos interessantes
• Não sei por que eu deveria usar esta ferramenta em vez de https://socialsharepreview.com/, https://www.opengraph.xyz/ ou https://socialmediasharepreview.com/
  Como feedback, é estranho falhar em URLs sem HTTPS. Ela deveria ser inteligente o bastante para aceitar qualquer site digitado, navegar até a URL correspondente e escanear com base na URL final resolvida. Por exemplo, ao digitar "blizzard.com", deveria carregar "https://www.blizzard.com/en-us/"
  É legal ver Discord e WhatsApp, mas fico imaginando como seria com LinkedIn, Pinterest e Slack. Slack provavelmente deveria ser igual ao Discord
  Também não diz o que precisa ser corrigido. Seria bom ver como o socialsharepreview.com faz isso
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

Oferece muitas dicas úteis sobre o que corrigir para que o conteúdo seja expandido corretamente. É realmente útil para o pessoal de marketing que gosta desse tipo de coisa. Como cada site tem formatos e limites de caracteres diferentes, é bom compartilhar as informações a corrigir. Por exemplo, diferenças entre Twitter Cards e metadados Open Graph. Não verifiquei, mas seria bom também garantir que ele leia corretamente os metadados adequados para cada site.

• Já existem ferramentas gratuitas de pré-visualização como https://socialmediasharepreview.com/ resolvendo esse problema, então não entendo muito bem.
  A única explicação é que isso seja uma isca de ferramenta gratuita para vender o kit full-stack deles.
• Bem legal. Só que é preciso estar preparado para mantê-lo atualizado todo mês, senão ele logo vai deixar de ser útil.
  Uma das desvantagens de ferramentas assim é que a URL precisa estar acessível online, então, quando surge um problema, o ciclo de iteração e melhoria fica bem longo.
  No Polypane [1], criamos pré-visualizações de redes sociais que também funcionam com URLs locais, e também permitem sobrescrever a URL que aquela rede social exibiria. Criamos pré-visualizações para X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon e Threads, e fazemos manutenção frequente. Cada uma também tem design em modo claro e escuro, então é possível testar tudo de fato. Também informa o que está faltando e o que não é compatível. Você pode ver aqui: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • Não gosto quando o pessoal do HN enfia propaganda do próprio produto disfarçada de conselho útil.
• LinkedIn e Mastodon estão faltando. É uma ferramenta limpa. Seria útil ter uma mensagem de orientação para melhoria, dizendo o que fazer caso algo esteja faltando na página.
  • Pensei exatamente a mesma coisa. E, por algum motivo, o LinkedIn mostra todas as nossas páginas com a imagem errada.
    Se alguém conseguir descobrir, eu gostaria de saber. Pegue qualquer post do blog no site godotengine.org e cole no LinkedIn; você verá que ele puxa a imagem do autor em vez da miniatura do post. Não consegui resolver.
  • Vou adicionar LinkedIn, Telegram e mais algumas coisas hoje à noite.