Sobre este problema HTML
O HTML tem um conjunto definido de atributos globais (como class, id, title, lang, etc.) e atributos específicos de elementos que são permitidos pela especificação. Qualquer atributo que esteja fora deste conjunto — como st_url, st_title, ou displayText — irá desencadear um erro de validação porque o browser e o validador não o reconhecem como parte do padrão HTML.
O atributo st_url, juntamente com atributos relacionados como st_title, st_via, e displayText, originou-se de versões antigas da biblioteca de partilha social ShareThis. Estes eram atributos proprietários que o JavaScript do ShareThis leria do DOM para configurar o comportamento de partilha. Embora os browsers geralmente ignorem atributos que não compreendem (por isso a página pode ainda parecer funcionar), usar atributos não-padrão viola a especificação HTML e pode causar vários problemas:
- Conformidade com padrões: HTML inválido pode levar a comportamento imprevisível em diferentes browsers e versões futuras de browsers.
- Acessibilidade: Leitores de ecrã e outras tecnologias assistivas podem não lidar corretamente com atributos não-padrão, potencialmente causando confusão.
- Manutenibilidade: Markup não-padrão é mais difícil para outros programadores compreenderem e manterem.
- SEO: Os crawlers dos motores de busca podem penalizar ou interpretar mal páginas com erros de validação significativos.
O HTML5 introduziu atributos data-* especificamente para resolver este problema. Qualquer dado personalizado que você precise anexar a um elemento pode usar este padrão — por exemplo, data-st-url em vez de st_url. A própria biblioteca ShareThis atualizou a sua integração para usar atributos data-* em versões posteriores, por isso implementações modernas já devem seguir este padrão.
Como corrigir
-
Substitua atributos proprietários por equivalentes
data-*: Convertast_urlparadata-st-url,st_titleparadata-st-title,displayTextparadata-display-text, e assim por diante. - Atualize a sua integração ShareThis: Se você está a usar uma versão desatualizada do ShareThis (ou um módulo/plugin CMS desatualizado como uma integração Drupal antiga), atualize para a versão mais recente, que usa atributos HTML5 válidos.
- Verifique os seus templates CMS: Se os atributos inválidos estão codificados num template de tema ou num bloco de conteúdo, atualize-os manualmente.
Exemplos
Inválido: Atributos proprietários num <span>
<span class="st_facebook_large" displayText="Facebook" st_url="https://example.com" st_title="My Page Title"></span>
<span class="st_twitter_large" displayText="Twitter" st_url="https://example.com" st_title="My Page Title"></span>
Este markup usa st_url, st_title, e displayText, nenhum dos quais são atributos HTML válidos.
Válido: Usar atributos data-* em vez disso
<span class="st_facebook_large" data-display-text="Facebook" data-st-url="https://example.com" data-st-title="My Page Title"></span>
<span class="st_twitter_large" data-display-text="Twitter" data-st-url="https://example.com" data-st-title="My Page Title"></span>
Ao prefixar cada atributo personalizado com data-, o markup torna-se HTML5 válido. Note que pode também precisar de atualizar o JavaScript associado para ler destes novos nomes de atributos (por exemplo, usando element.dataset.stUrl em vez de element.getAttribute('st_url')).
Válido: Integração ShareThis moderna
Se você está a atualizar completamente a sua integração ShareThis, a abordagem moderna usa um padrão de markup diferente:
<div class="sharethis-inline-share-buttons" data-url="https://example.com" data-title="My Page Title"></div>
Versões modernas da biblioteca ShareThis esperam atributos data-* por defeito, por isso atualizar a biblioteca e o seu markup associado é a solução mais limpa. Consulte a documentação ShareThis para a abordagem de integração recomendada mais recente para a sua plataforma.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.