Início » WordPress Mobile » Tags para Mobile First no cabeçalho da página
WordPress Mobile

Tags para Mobile First no cabeçalho da página

O uso de tags para mobile first é uma forma de irmos além do design responsivo. Você se atenta à essa possibilidade de personalização da experiência?
Escrito Por Leandro Vieira em fevereiro de 2020 /3 min de leitura
Conteúdo escrito por humano
Tags Mobile

Uma página web, no fritar dos ovos, é um emaranhado de tags estruturais e semânticas.

Através dessas tags definimos a disposição do layout, organizamos os elementos da interface, aplicamos meta-informações e damos significado semântico aos dados.

O cabeçalho da página engloba informações destinadas a dispositivos, robôs e sistemas diversos.

As tags para Mobile First são um exemplo.

Isto é, temos várias especificações que não são percebidas por quem navega nas páginas, mas são consumidas em situações diversas.

Os dois tipos mais comuns de tags

As tags meta e link são as mais utilizadas ao desenvolvermos projetos mobile.

Combinada com atributos e valores variados, as possibilidades são diversas.

Esses tipos de tags são armazenadas no cabeçalho das páginas HTML.

Logo, não são visualizadas, mas seus reflexos são perceptíveis em diversas situações.

Imagem ilustrando um corpo humano e fazendo alusão as tags head, body e footer

Head versus heading

O cabeçalho das páginas HTML é definido através da tag head.

Já o conjunto de tags que definem a hierarquia de títulos são os “headings”, ou seja, os cabeçalhos.

Dado a proximidade de tradução dessas duas palavras, head e heading, é preciso saber diferenciar.

Head é a tag <head>, irmã da tag <body>.

As headings são as tags de títulos, ou seja, <h1>, <h2>, <h3> … até <h6>.

Portanto, as tags para mobile first estão no cabeçalho, ou head, das páginas HTML.

Elas são utilizadas para as tratativas da responsividade, implementação de PWA, AMP, Open Graph e várias outras tecnologias.

O WordPress, de forma nativa, considera algumas inserções. E outras podem ser feitas através de plugins.

Tags link para mobile first

Considerando as tags do tipo <link>, as mais comuns para o mobile first, são utilizadas para:

  • Definir o endereço do manifest para PWA;
  • Determinar o endereço dos “favicons” para mobile;
  • Estabelecer os endereços dns-prefetch para ajudar no carregamento antecipado de arquivos;
  • Indicar o endereço da versão AMP da página.

Tags meta para mobile first

As tags do tipo <meta>, mais comumente utilizadas em projetos mobile first, são utilizadas para:

  • Definir o endereço da versão para o Facebook Instant Article;
  • Indicar o view port;
  • Determinar o theme color desejado;
  • Estabelecer as tags Open Graph para melhorar e ter mais controle nos compartilhamentos da página;
  • Estabelecer tags Twitter Card para melhorar e ter mais controle nos compartilhamentso no Twitter.

Conclusão

O uso de tags para mobile first é uma forma de irmos além do design responsivo.

É uma camada para personalizar a experiência dos usuários com o nosso projeto em dispositivos móveis.

Considere conhecer, e claro, fazer uso dessas tags e garantir aos seus usuários uma melhor performance, integração social e controle sobre a forma como os conteúdos são compartilhados socialmente.

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.
Qual nota você da para este artigo?
Ruim

O que você achou disso?

Clique nas estrelas

Média da classificação 0 / 5. Número de votos: 0

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Excelente
Artigos Relacionados
site-wordpress-caiu

Meu site WordPress caiu! E agora?

  1. […] você precisa conhecer as Tags para Mobile First e assim garantir aos seus usuários uma melhor performance, integração social e controle sobre a […]

Construa seu site WordPress sob medida com os maiores especialistas em WordPress da America Latina
Conheça a Apiki

Faça um comentário
Cadastre-se rápido

Fazer Login