{"id":48750,"date":"2025-11-27T10:28:33","date_gmt":"2025-11-27T13:28:33","guid":{"rendered":"\/pt\/tutoriais\/o-que-e-splash-page\/"},"modified":"2026-03-10T12:59:53","modified_gmt":"2026-03-10T15:59:53","slug":"o-que-e-splash-page","status":"publish","type":"post","link":"\/pt\/tutoriais\/o-que-e-splash-page\/","title":{"rendered":"O que \u00e9 splash page? Guia completo para come\u00e7ar e criar a sua"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Uma splash page &eacute; uma p&aacute;gina de introdu&ccedil;&atilde;o que aparece antes do conte&uacute;do principal de um site, geralmente sobrepondo a p&aacute;gina inicial. Ela funciona como uma tela de boas-vindas, criada para causar impacto logo no primeiro contato do visitante.<\/p><p>O objetivo pode variar: transmitir uma primeira impress&atilde;o marcante, destacar uma informa&ccedil;&atilde;o importante ou at&eacute; personalizar a experi&ecirc;ncia de cada usu&aacute;rio.<\/p><p>Neste guia, voc&ecirc; vai entender o que &eacute; splash page, em que ela se diferencia de outros tipos de p&aacute;ginas, por que pode ser &uacute;til para o seu site e como criar uma que realmente funcione.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-diferenca-entre-splash-page-e-landing-page\"><strong>Diferen&ccedil;a entre splash page e landing page<\/strong><\/h2><p>Muita gente confunde splash page com landing page, j&aacute; que ambas s&atilde;o p&aacute;ginas independentes que aparecem antes ou no lugar de uma p&aacute;gina comum do site. Para entender a diferen&ccedil;a, &eacute; importante saber primeiro o que &eacute; uma landing page. Veja como elas se distinguem:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Elemento<\/strong><\/td><td><strong>Splash page<\/strong><\/td><td><strong>Landing page<\/strong><\/td><\/tr><tr><td>Objetivo<\/td><td>Chamar a aten&ccedil;&atilde;o rapidamente e compartilhar informa&ccedil;&otilde;es importantes antes de entrar no site principal<\/td><td>Incentivar uma a&ccedil;&atilde;o espec&iacute;fica, como se cadastrar ou comprar<\/td><\/tr><tr><td>Momento em que aparece<\/td><td>Surge antes da p&aacute;gina inicial ou do conte&uacute;do principal<\/td><td>&Eacute; acessada por meio de um link em an&uacute;ncios, e-mails ou campanhas<\/td><\/tr><tr><td>Tamanho do conte&uacute;do<\/td><td>Curto, geralmente um t&iacute;tulo e um texto curto<\/td><td>Mais completo, com t&iacute;tulos, informa&ccedil;&otilde;es sobre a oferta e uma chamada para a&ccedil;&atilde;o (CTA)<\/td><\/tr><tr><td>Navega&ccedil;&atilde;o<\/td><td>M&iacute;nima, normalmente apenas um bot&atilde;o como &ldquo;Entrar no site&rdquo; ou escolher idioma<\/td><td>Geralmente n&atilde;o h&aacute;, para evitar distra&ccedil;&otilde;es e manter o foco no objetivo principal<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-diferenca-entre-splash-page-e-homepage\"><strong>Diferen&ccedil;a entre splash page e homepage<\/strong><\/h2><p>A splash page e a homepage est&atilde;o entre as primeiras p&aacute;ginas que um visitante pode ver em um site. Apesar de terem fun&ccedil;&otilde;es diferentes, &eacute; comum confundir as duas. Veja como diferenci&aacute;-las:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Elemento<\/strong><\/td><td><strong>Splash page<\/strong><\/td><td><strong>Homepage<\/strong><\/td><\/tr><tr><td>Fun&ccedil;&atilde;o<\/td><td>Tela de introdu&ccedil;&atilde;o exibida antes do conte&uacute;do principal<\/td><td>P&aacute;gina principal do site, com navega&ccedil;&atilde;o e conte&uacute;do central<\/td><\/tr><tr><td>Momento em que aparece<\/td><td>Interrompe brevemente a navega&ccedil;&atilde;o para mostrar algo espec&iacute;fico<\/td><td>Apoia a experi&ecirc;ncia de navega&ccedil;&atilde;o o tempo todo, guiando o usu&aacute;rio pelo site<\/td><\/tr><tr><td>Conte&uacute;do<\/td><td>M&iacute;nimo, com forte impacto visual e texto curto<\/td><td>Mais completo, com menu de navega&ccedil;&atilde;o e links para p&aacute;ginas e se&ccedil;&otilde;es principais<\/td><\/tr><tr><td>Segmenta&ccedil;&atilde;o de p&uacute;blico<\/td><td>Pode ser exibida de acordo com localiza&ccedil;&atilde;o, dispositivo ou campanha<\/td><td>Vis&iacute;vel para todos os visitantes por padr&atilde;o<\/td><\/tr><tr><td>Dura&ccedil;&atilde;o<\/td><td>Tempor&aacute;ria ou sazonal, usada em an&uacute;ncios, lan&ccedil;amentos ou promo&ccedil;&otilde;es<\/td><td>Parte permanente da estrutura do site<\/td><\/tr><tr><td>Intera&ccedil;&atilde;o<\/td><td>Uma a&ccedil;&atilde;o r&aacute;pida &mdash; clicar, selecionar ou confirmar<\/td><td>Explora&ccedil;&atilde;o cont&iacute;nua, permitindo ao usu&aacute;rio navegar por diferentes &aacute;reas do site<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-diferenca-entre-splash-page-e-popup\"><strong>Diferen&ccedil;a entre splash page e popup<\/strong><\/h2><p>Outra d&uacute;vida comum &eacute; confundir splash page com popup, j&aacute; que ambos interrompem a navega&ccedil;&atilde;o do usu&aacute;rio. No entanto, eles funcionam de formas diferentes. Veja a compara&ccedil;&atilde;o:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Elemento<\/strong><\/td><td><strong>Splash page<\/strong><\/td><td><strong>Popup<\/strong><\/td><\/tr><tr><td>Objetivo<\/td><td>Exibir an&uacute;ncios, verificar idade, selecionar idioma<\/td><td>Promover ofertas, captar inscri&ccedil;&otilde;es em newsletter ou mostrar alertas<\/td><\/tr><tr><td>Momento em que aparece<\/td><td>Antes de entrar no site<\/td><td>Depois que a p&aacute;gina j&aacute; carregou<\/td><\/tr><tr><td>Tamanho<\/td><td>Tela inteira<\/td><td>Janela pequena ou sobreposi&ccedil;&atilde;o<\/td><\/tr><tr><td>Intera&ccedil;&atilde;o do usu&aacute;rio<\/td><td>Bloqueia o acesso temporariamente, precisa ser fechada para continuar navegando<\/td><td>Interrompe a navega&ccedil;&atilde;o por alguns segundos, mas pode ser ignorado ou fechado<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-criar-uma-splash-page\"><strong>Como criar uma splash page<\/strong><\/h2><p>Os passos para criar uma&nbsp;<strong>splash page<\/strong>&nbsp;podem variar de acordo com a ferramenta que voc&ecirc; usa para construir o site. De forma geral, siga estas etapas:<\/p><ol class=\"wp-block-list\">\n<li><strong>Defina o objetivo.&nbsp;<\/strong>Pense no motivo principal para criar a splash page. Por exemplo, uma loja online que vende produtos com restri&ccedil;&atilde;o de idade pode precisar de uma tela de verifica&ccedil;&atilde;o para cumprir exig&ecirc;ncias legais.<\/li>\n\n\n\n<li><strong>Escreva uma mensagem clara e objetiva.&nbsp;<\/strong>Mostre apenas o que o visitante precisa saber ou fazer antes de acessar o conte&uacute;do principal.<\/li>\n\n\n\n<li><strong>Planeje o layout.&nbsp;<\/strong>Prefira um design simples, mas com um visual chamativo. Inclua um t&iacute;tulo de destaque e uma chamada para a&ccedil;&atilde;o (CTA) alinhada ao seu objetivo.<\/li>\n\n\n\n<li><strong>Adicione elementos da sua marca.&nbsp;<\/strong>Como ser&aacute; a primeira tela exibida, a splash page deve refletir sua identidade visual e manter a consist&ecirc;ncia com o restante do site.<\/li>\n\n\n\n<li><strong>Crie uma op&ccedil;&atilde;o de sa&iacute;da.&nbsp;<\/strong>Adicione um link ou bot&atilde;o que leve o usu&aacute;rio para a homepage, caso ele escolha n&atilde;o interagir com a splash page. Essa op&ccedil;&atilde;o precisa estar vis&iacute;vel e acess&iacute;vel.<\/li>\n\n\n\n<li><strong>Defina como a splash page ser&aacute; exibida.&nbsp;<\/strong>Dependendo da plataforma usada, configure para que ela apare&ccedil;a antes da homepage ou de acordo com crit&eacute;rios como localiza&ccedil;&atilde;o ou dispositivo do visitante.<\/li>\n\n\n\n<li><strong>Teste e publique.&nbsp;<\/strong>Verifique se todos os bot&otilde;es funcionam, se os elementos visuais est&atilde;o claros e se a p&aacute;gina &eacute; responsiva em diferentes tamanhos de tela antes de coloc&aacute;-la no ar.<\/li>\n<\/ol><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Voc&ecirc; sabia?                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Mesmo que o&nbsp;<a href=\"\/pt\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Criador de Sites da Hostinger<\/strong><\/a>&nbsp;ainda n&atilde;o tenha um recurso nativo de popups, &eacute; poss&iacute;vel criar uma splash page facilmente. Basta personalizar um dos modelos prontos de landing page usando o editor de arrastar e soltar. Al&eacute;m disso, a ferramenta permite integrar solu&ccedil;&otilde;es de terceiros e at&eacute; adicionar c&oacute;digo personalizado.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-vantagens-da-splash-page-e-por-que-ela-converte\"><strong>Vantagens da splash page e por que ela converte<\/strong><\/h2><p>Veja por que vale a pena usar uma splash page no seu site:<\/p><p><strong>Chama a aten&ccedil;&atilde;o de imediato<\/strong><\/p><p>Como a splash page aparece antes da homepage, o visitante v&ecirc; a mensagem desejada logo de cara. Combinando um design impactante e um texto claro, ela &eacute; perfeita para destacar promo&ccedil;&otilde;es, lan&ccedil;amentos de produtos ou comunicados importantes.<\/p><p>Al&eacute;m disso, pode ser usada para mostrar prova social, como n&uacute;meros de vendas ou conquistas da marca &mdash; uma &oacute;tima maneira de gerar confian&ccedil;a e aumentar as convers&otilde;es.<\/p><p><strong>Destaca informa&ccedil;&otilde;es essenciais<\/strong><\/p><p>Seja para divulgar um evento, uma oferta por tempo limitado ou at&eacute; um aviso legal, a splash page garante que todos os visitantes vejam a informa&ccedil;&atilde;o logo na entrada. Assim, voc&ecirc; n&atilde;o precisa atualizar v&aacute;rias p&aacute;ginas do site para transmitir a mesma mensagem.<\/p><p>Um exemplo &eacute; a Black Sheep, marca australiana de roupas de ciclismo. Visitantes dos EUA s&atilde;o recebidos com uma splash page informando que a empresa realiza entregas no pa&iacute;s e detalhando taxas adicionais.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a601ae814f08\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a601ae814f08\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/09\/blacksheep-splash-page.png\/w=1024,h=1024,fit=scale-down\" alt=\"splash page da black sheep\" class=\"wp-image-50897\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Personaliza a experi&ecirc;ncia do usu&aacute;rio<\/strong><\/p><p>Splash pages tamb&eacute;m ajudam a segmentar usu&aacute;rios de acordo com localiza&ccedil;&atilde;o, idioma ou idade. Isso permite direcion&aacute;-los para a vers&atilde;o mais adequada do site, oferecendo uma navega&ccedil;&atilde;o mais relevante &mdash; o que aumenta as chances de convers&atilde;o.<\/p><p>A varejista Zara faz exatamente isso: ao acessar uma vers&atilde;o do site diferente da regi&atilde;o do visitante, exibe uma splash page sugerindo a troca para a vers&atilde;o local.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a601ae817c87\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a601ae817c87\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/09\/zara.png\/w=1024,h=1024,fit=scale-down\" alt=\"splash page da zara\" class=\"wp-image-50898\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Atende a exig&ecirc;ncias legais e de conformidade<\/strong><\/p><p>Se o seu site precisa verificar idade, solicitar consentimento ou confirmar a localiza&ccedil;&atilde;o do usu&aacute;rio, a splash page &eacute; uma solu&ccedil;&atilde;o simples e eficaz.<\/p><p>A cervejaria Heineken, por exemplo, utiliza uma splash page para confirmar a maioridade dos visitantes antes de liber&aacute;-los para navegar e comprar no site.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a601ae81a9bb\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a601ae81a9bb\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/09\/heineken-splash-page.png\/w=1024,h=1024,fit=scale-down\" alt=\"splash page da heineken\" class=\"wp-image-50896\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Embora n&atilde;o tenham o foco direto em convers&atilde;o como uma landing page, as splash pages desempenham um papel estrat&eacute;gico: refor&ccedil;am a identidade da marca, direcionam visitantes ao lugar certo e&nbsp;melhoram a experi&ecirc;ncia do cliente no e-commerce. Esse tipo de personaliza&ccedil;&atilde;o pode ser decisivo para transformar visitantes em clientes.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-otimizar-uma-splash-page\"><strong>Como otimizar uma splash page<\/strong><\/h2><p>Uma splash page mal planejada pode aumentar a taxa de rejei&ccedil;&atilde;o, o que prejudica o SEO do seu site. Para evitar isso, siga estas dicas de otimiza&ccedil;&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li><strong>Use t&iacute;tulos adequados.&nbsp;<\/strong>Mesmo em p&aacute;ginas curtas, organize o conte&uacute;do com tags H1 e H2. Isso melhora a leitura e ajuda os buscadores a entenderem a estrutura da p&aacute;gina.<\/li>\n\n\n\n<li><strong>Adicione links internos.&nbsp;<\/strong>Inclua pelo menos um link para outra p&aacute;gina do seu site. Assim, a splash page faz parte da estrutura interna e n&atilde;o fica &ldquo;&oacute;rf&atilde;&rdquo; dentro do SEO..<\/li>\n\n\n\n<li><strong>Use texto alternativo para imagens.&nbsp;<\/strong>Adicione alt text aos elementos visuais. Isso facilita a indexa&ccedil;&atilde;o pelos buscadores, melhora a acessibilidade para leitores de tela e refor&ccedil;a o compromisso da sua marca com a inclus&atilde;o.<\/li>\n\n\n\n<li><strong>Verifique a responsividade em dispositivos m&oacute;veis.&nbsp;<\/strong>Garanta que a splash page funcione bem em todos os tamanhos de tela. Uma boa experi&ecirc;ncia no celular &eacute; essencial para engajamento e SEO.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-como-o-google-indexa-splash-pages-e-como-evitar-problemas-de-rastreamento\"><strong>Como o Google indexa splash pages e como evitar problemas de rastreamento<\/strong><\/h3><p>O Google analisa a estrutura e o conte&uacute;do do seu site para entender sobre o que ele trata. Como a maioria das splash pages tem pouco ou nenhum texto, os buscadores podem ter dificuldade em interpretar essas p&aacute;ginas. Por isso, &eacute; importante incluir links internos que direcionem para outras &aacute;reas do site, ajudando os rob&ocirc;s a encontrar mais conte&uacute;do e garantindo que suas p&aacute;ginas principais continuem ranqueando bem.<\/p><p>Outro ponto essencial &eacute; a experi&ecirc;ncia mobile-first. O Google d&aacute; bastante peso &agrave; navega&ccedil;&atilde;o em dispositivos m&oacute;veis, ent&atilde;o a splash page precisa ser f&aacute;cil de fechar, ter um visual limpo e usar imagens de boa qualidade. Al&eacute;m disso, a velocidade de carregamento &eacute; um fator cr&iacute;tico: quase metade dos usu&aacute;rios espera que uma p&aacute;gina abra em at&eacute; dois segundos, de acordo com nossas&nbsp;estat&iacute;sticas de p&aacute;gina de destino. Se a splash page demora muito, aumenta a taxa de rejei&ccedil;&atilde;o e isso pode derrubar o posicionamento nos resultados de pesquisa.<\/p><p>Em resumo, para que sua splash page n&atilde;o prejudique o SEO, ela deve ser leve, responsiva, r&aacute;pida e estar bem conectada ao restante do site por meio de links internos.<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-faz-uma-boa-splash-page\"><strong>O que faz uma boa splash page?<\/strong><\/h2><p>Clareza, usabilidade e consist&ecirc;ncia s&atilde;o os fatores que diferenciam uma splash page esquec&iacute;vel de uma que realmente funciona. Uma p&aacute;gina bem planejada guia o visitante sem sobrecarreg&aacute;-lo, transmite a identidade da marca e apresenta uma chamada para a&ccedil;&atilde;o clara, alinhada aos seus objetivos. Se voc&ecirc; n&atilde;o sabe por onde come&ccedil;ar, fazer uma&nbsp;auditoria de experi&ecirc;ncia do usu&aacute;rio&nbsp;pode ajudar a identificar &aacute;reas que precisam ser melhoradas.<\/p><p>N&atilde;o existe uma f&oacute;rmula &uacute;nica para criar uma splash page de alto desempenho, mas as mais eficazes costumam ter alguns elementos em comum:<\/p><h3 class=\"wp-block-heading\" id=\"h-hierarquia-visual\"><strong>Hierarquia visual<\/strong><\/h3><p>A hierarquia visual orienta o olhar do visitante, mostrando o que deve ser visto primeiro, depois e por &uacute;ltimo. Isso pode ser feito ajustando tamanho, cor, contraste ou posi&ccedil;&atilde;o dos elementos.<\/p><p>Um bom exemplo &eacute; a farm&aacute;cia online Hebe, que usa um layout em forma de pir&acirc;mide para tornar sua splash page simples de entender: logo no topo, seguida de um t&iacute;tulo com chamada para a&ccedil;&atilde;o e, por fim, as op&ccedil;&otilde;es de sele&ccedil;&atilde;o de pa&iacute;s. O design minimalista ajuda a manter o foco, eliminando distra&ccedil;&otilde;es.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a601ae81d5d6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a601ae81d5d6\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/09\/hebe-splash-page.png\/w=1024,h=1024,fit=scale-down\" alt=\"splash page da hebe\" class=\"wp-image-50900\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Como a aten&ccedil;&atilde;o das pessoas costuma ser curta, um design limpo e direto &eacute; mais eficaz. De fato, p&aacute;ginas mais curtas superam p&aacute;ginas longas em convers&atilde;o por 13,5% &mdash; prova de que &ldquo;menos &eacute; mais&rdquo; tamb&eacute;m se aplica aqui.<\/p><h3 class=\"wp-block-heading\" id=\"h-design-consistente\"><strong>Design consistente<\/strong><\/h3><p>Quando a splash page e a homepage compartilham o mesmo estilo, a experi&ecirc;ncia de navega&ccedil;&atilde;o fica mais fluida. Usar as mesmas cores, fontes e identidade visual transmite confian&ccedil;a e mostra que o visitante est&aacute; no lugar certo. Al&eacute;m disso, refor&ccedil;a a personalidade da marca e cria uma transi&ccedil;&atilde;o natural para o restante do site.<\/p><p>A marca H&amp;M, por exemplo, adota esse conceito ao aplicar um design minimalista em preto e branco tanto na splash page (em cima) quanto na homepage (abaixo). Assim, ao fechar a splash page, o usu&aacute;rio n&atilde;o sente que mudou de site.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a601ae81ffb7\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a601ae81ffb7\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2025\/09\/hm-splash-page-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"splash page e homepage da h&amp;m\" class=\"wp-image-50899\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-formularios-de-inscricao-e-links-de-redes-sociais\"><strong>Formul&aacute;rios de inscri&ccedil;&atilde;o e links de redes sociais<\/strong><\/h3><p>Se a ideia &eacute; usar a splash page para construir uma audi&ecirc;ncia, vale incluir formul&aacute;rios de inscri&ccedil;&atilde;o e links para redes sociais. Os formul&aacute;rios permitem coletar endere&ccedil;os de e-mail de visitantes interessados, que depois podem ser usados em campanhas de marketing. J&aacute; os links para redes sociais facilitam a conex&atilde;o com a marca em diferentes plataformas, ampliando o alcance e aumentando as chances de engajamento.<\/p><p>No caso dos formul&aacute;rios, a simplicidade costuma trazer melhores resultados. Pesquisas indicam que o n&uacute;mero ideal de campos &eacute; tr&ecirc;s, com taxa de convers&atilde;o de cerca de 10%. As combina&ccedil;&otilde;es mais eficazes s&atilde;o e-mail + nome (7%) e e-mail + data de nascimento (5,7%). Ainda assim, voc&ecirc; pode adaptar os campos de acordo com os objetivos da sua splash page.<\/p><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Voc&ecirc; sabia?                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Com&nbsp;<a href=\"\/pt\/email-marketing\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>a ferramenta de email marketing Hostinger Reach<\/strong><\/a>, voc&ecirc; pode usar a intelig&ecirc;ncia artificial para criar um formul&aacute;rio de inscri&ccedil;&atilde;o, iniciar uma campanha e acompanhar seu desempenho &mdash; tudo em um s&oacute; lugar.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-fazer-depois-de-lancar-sua-splash-page\"><strong>O que fazer depois de lan&ccedil;ar sua splash page<\/strong><\/h2><p>Depois que a splash page estiver no ar, o pr&oacute;ximo passo &eacute; acompanhar seu desempenho e fazer ajustes com base nos dados. Ferramentas como o Google Analytics ajudam a monitorar o comportamento dos usu&aacute;rios &mdash; quanto tempo permanecem na p&aacute;gina, cliques no CTA e sa&iacute;das &mdash; e a entender se a splash page est&aacute; realmente cumprindo seu objetivo.<\/p><p>Tamb&eacute;m vale realizar testes com diferentes chamadas para a&ccedil;&atilde;o, t&iacute;tulos e layouts, at&eacute; descobrir quais elementos funcionam melhor para o seu p&uacute;blico. Se mesmo assim os resultados n&atilde;o forem satisfat&oacute;rios, talvez seja hora de analisar outras partes do site. Nossas&nbsp;estat&iacute;sticas de web design&nbsp;mostram que uma boa experi&ecirc;ncia de usu&aacute;rio pode aumentar as taxas de convers&atilde;o em at&eacute; quatro vezes, e CTAs personalizados recebem 42% mais cliques. Por outro lado, problemas de usabilidade, como navega&ccedil;&atilde;o confusa ou layout polu&iacute;do, afastam at&eacute; 79% dos visitantes.<\/p><p>Com&nbsp;<a href=\"\/pt\/criador-de-sites-com-ia\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>o criador de sites com IA<\/strong><\/a>&nbsp;da Hostinger, voc&ecirc; pode melhorar facilmente seu site sem precisar de conhecimentos em programa&ccedil;&atilde;o. Os modelos s&atilde;o totalmente personaliz&aacute;veis, otimizados para dispositivos m&oacute;veis e criados com foco em usabilidade. O editor de arrastar e soltar, aliado a ferramentas de IA, torna o processo simples tanto para iniciantes quanto para profissionais.<\/p><p>Voc&ecirc; ainda pode aproveitar o per&iacute;odo de teste gratuito de sete dias para experimentar a ferramenta sem riscos. Caso atenda &agrave;s suas necessidades, o upgrade custa a partir de&nbsp;<strong>\u20ac2.99\/m&ecirc;s<\/strong>&nbsp;e todas as compras incluem garantia de reembolso de 30 dias.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/criador-de-sites\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Uma splash page &eacute; uma p&aacute;gina de introdu&ccedil;&atilde;o que aparece antes do conte&uacute;do principal de um site, geralmente sobrepondo a p&aacute;gina inicial. Ela funciona como uma tela de boas-vindas, criada para causar impacto logo no primeiro contato do visitante. O objetivo pode variar: transmitir uma primeira impress&atilde;o marcante, destacar uma informa&ccedil;&atilde;o importante ou at&eacute; personalizar [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/o-que-e-splash-page\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Descubra o que \u00e9 splash page, como criar a sua e por que ela pode aumentar convers\u00f5es e melhorar a experi\u00eancia do usu\u00e1rio no seu site.","rank_math_focus_keyword":"o que \u00e9 splash page","footnotes":""},"categories":[4941],"tags":[],"class_list":["post-48750","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-a-splash-page\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-splash-page\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/splash-page\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-una-splash-page\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-splash-page-website\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/cos-e-una-splash-page\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wat-is-een-splashpagina\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-a-splash-page\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-una-splash-page\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-una-splash-page\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-una-splash-page\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-splash-page\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=48750"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/48750\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=48750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=48750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=48750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}