O que é o Open Graph e como posso usá-lo no meu site?


Pode levar muito tempo para criar conteúdo e manter um site. Como podemos garantir que nosso conteúdo se destaque ao ser compartilhado em feeds sociais na Internet?

O que é o Open Graph?

Gráfico aberto é um protocolo de internet criado originalmente por Facebook padronizar o uso de metadados em uma página da web para representar o conteúdo de uma página.

Dentro dele, você pode fornecer detalhes tão simples quanto o título de uma página ou tão específicos quanto a duração de um vídeo. Todas essas peças se encaixam para formar uma representação de cada página individual da internet.

Por que eu preciso disso?

O conteúdo da internet geralmente é criado com pelo menos um objetivo em mente – compartilhá-lo com outras pessoas. Isso pode não necessariamente importar se você está apenas enviando para um amigo, mas se deseja compartilhá-lo ou compartilhar em qualquer rede social ou aplicativo que utilize visualizações avançadas, você desejará que a visualização seja tão eficaz que possível.

Isso ajudará as pessoas a querer conferir seu conteúdo e, inevitavelmente, clicar nele.

O que acontece se eu não tiver?

A maioria das redes sociais, por padrão, tentará fazer o melhor possível para criar uma visualização do seu conteúdo. Na maioria das vezes, isso não vai tão bem.

Tomemos, por exemplo, o meu site colbyfayock.com.

Exemplo de um simples cartão do Twitter

Ele pega corretamente o título da minha página e a descrição, mas não é o tweet mais atraente de um feed.

Compare isso com a visualização de um único post e vemos uma história diferente.

Exemplo de um cartão do Twitter com uma imagem grande

Então, o que acontece se você não tiver tags de gráfico abertas? Nada de ruim acontecerá, mas você não aproveitará alguns dos recursos que ajudam a destacar o seu conteúdo, próximo a muitos outros conteúdos publicados na Internet.

Começando com o básico do gráfico aberto

As quatro tags básicas de gráfico aberto necessárias para cada página são og:title, og:type, og:imagee og:url. Essas tags devem ser exclusivas para cada página exibida, o que significa que as tags da sua página inicial devem ser diferentes da página do artigo de postagem do seu blog.

Anatomia de um cartão do Twitter usando tags Open Graph

Embora deva ser bem direto, veja a seguir o significado de cada uma das tags:

  • og:title: O título da sua página. Normalmente, é o mesmo que o da sua página da web </code> a menos que você queira apresentá-la de forma diferente.</li> <li><code>og:type</code>: O “tipo” de site que você possui. Explicarei mais na próxima seção, embora um “tipo” genérico seja “site”.</li> <li><code>og:image</code>: Este deve ser um link para uma imagem que você gostaria de representar seu conteúdo. Deve ser uma imagem de alta resolução que as redes sociais usarão em seus feeds.</li> <li><code>og:url</code>: Esse deve ser o URL da página atual.</li> </ul> <p>Ao colocar uma tag no seu site, você deve colocá-la no <code><head></code> junto com outros metadados. A tag usada será uma <code><meta></code> e deve se parecer com este padrão:</p> <p><!--kg-card-begin: code--></p> <pre><code><meta property=“[NAME]” content=“[VALUE]” /> </code></pre> <p><!--kg-card-end: code--></p> <p>Portanto, se eu criar um conjunto de quatro tags básicas de gráfico aberto para o meu site, <a target="_blank" href="https://colbyfayock.com" rel="noopener noreferrer">colbyfayock.com</a>, pode parecer com:</p> <p><!--kg-card-begin: code--></p> <pre><code class="language-html"><meta property="og:title" content="Colby Fayock - A UX Designer & Front-end Developer Blog" /> <meta property="og:type" content="website" /> <meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" /> <meta property="og:url" content="https://www.colbyfayock.com" /> </code></pre> <p><!--kg-card-end: code--></p> <h2 id="website-open-graph-type">Tipo de gráfico aberto do site</h2> <p>O protocolo de gráfico aberto possui algumas variações do “tipo” de site que ele suporta. Isso inclui tipos como site, artigo ou vídeo.</p> <p>Ao configurar suas tags de gráfico aberto, você terá uma idéia de qual tipo fará mais sentido para o seu site. Se sua página está focada em um único vídeo, provavelmente faz sentido usar o tipo “vídeo”. Se é um site geral sem vertical específico, você provavelmente deseja usar o tipo “site”.</p> <p>Semelhante às outras, isso é exclusivo para cada página. Portanto, se sua página inicial for “website”, você sempre poderá ter outra página do tipo “vídeo”.</p> <p>Portanto, se eu criar um tipo de gráfico aberto para o meu site, ele poderá se parecer com o seguinte na minha página inicial:</p> <p><!--kg-card-begin: code--></p> <pre><code class="language-html"><!-- colbyfayock.com --> <meta property=“og:type” content=“profile” /> </code></pre> <p><!--kg-card-end: code--></p> <p>Ao navegar para uma postagem de blog, seria semelhante a:</p> <p><!--kg-card-begin: code--></p> <pre><code class="language-html"><!-- https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ --> <meta property=“og:type” content=“article” /> </code></pre> <p><!--kg-card-end: code--></p> <p>Você pode encontrar os tipos mais comuns de sites de gráfico aberto na página de gráfico aberto: <a target="_blank" href="https://ogp.me/#types" rel="noopener noreferrer">https://ogp.me/#types</a></p> <p>Embora você geralmente não se preocupe com o básico, aqui estão mais alguns que valem a pena acrescentar:</p> <ul> <li><code>og:description</code>: Uma descrição da sua página. similarmente a <code>og:title</code>, isso pode ser igual ao do seu site <code><meta type=“description”></code> , a menos que você queira apresentá-lo de forma diferente.</li> <li><code>og:locale</code>: Se você deseja localizar suas tags, provavelmente faria sentido incluir a localidade. O formato é <code>language_TERRITORY</code>, onde o padrão é <code>en_US</code>.</li> <li><code>og:site_name</code>: O nome do site geral em que seu conteúdo está. Se você estiver em uma página de postagem do blog, poderá ter um <code>title</code> usando o título da postagem do blog, onde o <code>site_name</code> seria o nome do seu blog.</li> <li><code>og:video</code>: Tem um vídeo que suporta seu conteúdo? Aqui está uma chance de incluí-lo. Adicione um link ao seu vídeo usando essa tag.</li> </ul> <p>Essas tags serão adicionadas no mesmo padrão de antes:</p> <p><!--kg-card-begin: code--></p> <pre><code class="language-html"><meta property=“[NAME]” content=“[VALUE]” /> </code></pre> <p><!--kg-card-end: code--></p> <p>A maioria das redes sociais segue os princípios básicos dos padrões de gráficos abertos, mas algumas também incluem sua própria extensão para ajudar a personalizar a aparência e o comportamento de seu ecossistema.</p> <p>O Twitter, por exemplo, permite especificar <code>twitter:card</code>, que é o tipo de “cartão” que você pode usar quando exibir seu site. No momento, seus tipos de cartões incluem:</p> <ul> <li>resumo</li> <li>summary_large_image</li> <li>aplicativo</li> <li>jogador</li> </ul> <p>Isso ajudará você a escolher como seus links serão usados ​​no feed deles. Se você escolher <code>summary_large_image</code> por exemplo, o Twitter mostrará seus links com imagens grandes de alta resolução, desde que você o forneça no <code>og:image</code> tag.</p> <p>Aqui estão algumas referências rápidas à documentação de como usar tags de gráfico aberto em alguns sites de mídia social:</p> <h2 id="images-in-open-graph">Imagens no gráfico aberto</h2> <p>Ao adicionar sua imagem como <code>og:image</code> costuma ser suficiente, às vezes pode ser um desafio fazer com que sua imagem seja exibida corretamente. Se você estiver com problemas, o padrão de gráfico aberto inclui algumas tags de imagem, como <code>og:image:url</code> vs <code>og:image:secure_url</code> assim como o <code>og:image:width</code> e <code>og:image:height</code>.</p> <p>Tente se certificar de que está seguindo todos os <a target="_blank" href="https://ogp.me/#structured" rel="noopener noreferrer">notas e exemplos na documentação do gráfico aberto</a>. Além disso, algumas das redes sociais têm requisitos de imagem. <a target="_blank" href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image" rel="noopener noreferrer">Twitter, por exemplo, requer</a> uma proporção de 2: 1 com um tamanho mínimo de 300 x 157 e um tamanho máximo de 4096 x 4096 com menos de 5 MB e no formato JPG, PNG, WEBP ou GIF.</p> <p>Se você estiver preso, teste suas tags usando as ferramentas da rede de mídia social para ver se consegue encontrar o problema.</p> <p>Felizmente, nossas redes sociais favoritas também fornecem ferramentas para nos ajudar a depurar nossas tags. Depois de verificar se suas tags estão realmente aparecendo no código-fonte do seu site, você poderá visualizar a aparência do site no feed.</p> <p>Embora a maioria deles deva abranger um site básico, existem mais algumas tags que podem ajudar você e a sua empresa a descobrir através das redes sociais. Se você estiver interessado em mergulhar em mais, <a target="_blank" href="https://ogp.me/" rel="noopener noreferrer">a documentação</a> faz um ótimo trabalho ao fornecer uma lista de todas as tags disponíveis para você usar.</p> <p><a target="_blank" href="https://ogp.me/" rel="noopener noreferrer">https://ogp.me/</a></p> <h2 id="can-i-get-an-example">Posso obter um exemplo?</h2> <p>Se você está simplesmente procurando um exemplo para começar, eis o que você deve concluir ao configurar suas tags para <a target="_blank" href="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" rel="noopener noreferrer">uma postagem no blog</a>:</p> <p><!--kg-card-begin: code--></p> <pre><code class="language-html"><meta property="og:site_name" content="Colby Fayock" /> <meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" /> <meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" /> <meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" /> <meta property="og:type" content="article" /> <meta property="article:publisher" content="https://www.colbyfayock.com" /> <meta property="article:section" content="Coding" /> <meta property="article:tag" content="Coding" /> <meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" /> <meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" /> <meta property="twitter:site" content="@colbyfayock" /> </code></pre> <p><!--kg-card-end: code--></p> <h2 id="looking-for-other-ways-to-optimize-and-analyze-your-content">Procurando outras maneiras de otimizar e analisar seu conteúdo?</h2> <p><!--kg-card-begin: html--><a target="_blank" href="https://twitter.com/colbyfayock" rel="noopener noreferrer"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Siga-me para mais Javascript, UX e outras coisas interessantes!" style="width:100%;" data-lazy-src="https://cloudinary-image-function.netlify.com/social-footer-card"/><noscript><img src="https://cloudinary-image-function.netlify.com/social-footer-card" alt="Siga-me para mais Javascript, UX e outras coisas interessantes!" style="width:100%;"/></noscript></a><!--kg-card-end: html--> </div> <p><script type="rocketlazyloadscript" data-minify="1" async src="https://cibersistemas.pt/wp-content/cache/min/1/widgets.js?ver=1634642625" charset="utf-8"></script><br /> <br /><br /> <br /><a href="https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/">Fonte </a></p> <!-- AI CONTENT END 1 --> </div> <footer class="entry-footer suki-text-align-left"> <div class="entry-meta">Posted in <span class="entry-meta-categories cat-links"><a href="https://cibersistemas.pt/category/tecnologia/" rel="category tag">Tecnologia</a></span>  •  <span class="entry-meta-comments comments-link"><a href="https://cibersistemas.pt/tecnologia/o-que-e-o-open-graph-e-como-posso-usa-lo-no-meu-site/#respond">No Comments<span class="screen-reader-text"> on O que é o Open Graph e como posso usá-lo no meu site?</span></a></span></div> </footer> </div> </div> <div class="entry-author"> <div class="entry-author-body"> <div class="entry-author-name vcard"> <picture class="avatar avatar-80 photo"> <source type="image/webp" data-lazy-srcset="https://cibersistemas.pt/wp-content/uploads/2020/11/antonio-cesar-150x150.jpg.webp 2x" srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2080'%3E%3C/svg%3E"/> <img alt="António César de Andrade" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2080'%3E%3C/svg%3E" data-lazy-srcset="https://cibersistemas.pt/wp-content/uploads/2020/11/antonio-cesar-150x150.jpg 2x" height="80" width="80" data-lazy-src="https://cibersistemas.pt/wp-content/uploads/2020/11/antonio-cesar-150x150.jpg"/> </picture> <noscript><picture class="avatar avatar-80 photo"> <source type="image/webp" srcset="https://cibersistemas.pt/wp-content/uploads/2020/11/antonio-cesar-150x150.jpg.webp 2x"/> <img alt="António César de Andrade" src="https://cibersistemas.pt/wp-content/uploads/2020/11/antonio-cesar-150x150.jpg" srcset="https://cibersistemas.pt/wp-content/uploads/2020/11/antonio-cesar-150x150.jpg 2x" height="80" width="80"/> </picture> </noscript> <b class="fn"><a href="https://cibersistemas.pt/author/antonio/" title="Posts by António César de Andrade" rel="author">António César de Andrade</a></b> </div> <div class="entry-author-content"> <p>Apaixonado por tecnologia e inovação, traz notícias do seguimento que atua com paixão a mais de 15 anos.</p> </div> </div> </div> <nav class="navigation post-navigation" role="navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://cibersistemas.pt/tecnologia/o-ring-fit-adventure-ganha-um-novo-modo-de-ritmo-enquanto-todo-mundo-fica-em-casa/" rel="prev">O Ring Fit Adventure ganha um novo modo de ritmo, enquanto todo mundo fica em casa »</a></div><div class="nav-next"><a href="https://cibersistemas.pt/games/nintendo-direct-apresenta-um-monte-de-novos-jogos-de-switch-incluindo-burnout-paradise-remastered/" rel="next">« Nintendo Direct apresenta um monte de novos jogos de Switch, incluindo Burnout Paradise Remastered</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/tecnologia/o-que-e-o-open-graph-e-como-posso-usa-lo-no-meu-site/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://cibersistemas.pt/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='3091' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> </main> </div><aside id="secondary" class="widget-area sidebar suki-sidebar-widgets-mode-merged suki-widget-title-alignment-left suki-widget-title-decoration-border-bottom" role="complementary" itemscope itemtype="https://schema.org/WPSideBar"> <div class="sidebar-inner"> <div id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://cibersistemas.pt/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search…" value="" name="s" /><span class="suki-icon suki-search-icon" title="" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M26,46.1a20,20,0,1,1,20-20A20,20,0,0,1,26,46.1ZM63.4,58.5,48.2,43.3a3.67,3.67,0,0,0-2-.8A26.7,26.7,0,0,0,52,26a26,26,0,1,0-9.6,20.2,4.64,4.64,0,0,0,.8,2L58.4,63.4a1.93,1.93,0,0,0,2.8,0l2.1-2.1A1.86,1.86,0,0,0,63.4,58.5Z"/></svg></span> </label> <input type="submit" class="search-submit" value="Search" /> </form></div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title">Recent Posts</h2> <ul> <li> <a href="https://cibersistemas.pt/games/gran-turismo-7-a-linha-de-partida-nos-bastidores/">Gran Turismo 7 – A linha de partida (nos bastidores)</a> </li> <li> <a href="https://cibersistemas.pt/games/quando-call-of-duty-vanguard-unlock/">Quando Call Of Duty: Vanguard Unlock?</a> </li> <li> <a href="https://cibersistemas.pt/games/21-coisas-que-todo-jogador-do-battlefield-deve-saber/">21 coisas que todo jogador do Battlefield deve saber</a> </li> <li> <a href="https://cibersistemas.pt/games/pokemon-legends-arceus-imagens-misteriosas-restauradas/">Pokémon Legends: Arceus Imagens misteriosas restauradas!</a> </li> <li> <a href="https://cibersistemas.pt/games/trailer-de-revelacao-oficial-de-uncharted-gamespot/">Trailer de revelação oficial de Uncharted – Cibersistemas</a> </li> </ul> </div><div id="categories-4" class="widget widget_categories"><h2 class="widget-title">Categories</h2> <ul> <li class="cat-item cat-item-72"><a href="https://cibersistemas.pt/category/cinema/">Cinema</a> (18) </li> <li class="cat-item cat-item-74"><a href="https://cibersistemas.pt/category/cultura/">Cultura</a> (1) </li> <li class="cat-item cat-item-7"><a href="https://cibersistemas.pt/category/financeiro/">Financeiro</a> (1) </li> <li class="cat-item cat-item-4"><a href="https://cibersistemas.pt/category/games/">Games</a> (23,891) </li> <li class="cat-item cat-item-5"><a href="https://cibersistemas.pt/category/informatica/">Informática</a> (3) </li> <li class="cat-item cat-item-71"><a href="https://cibersistemas.pt/category/portugal/">Portugal</a> (1) </li> <li class="cat-item cat-item-73"><a href="https://cibersistemas.pt/category/series-e-tv/">Séries e TV</a> (28) </li> <li class="cat-item cat-item-2"><a href="https://cibersistemas.pt/category/tecnologia/">Tecnologia</a> (3,104) </li> <li class="cat-item cat-item-1"><a href="https://cibersistemas.pt/category/web-design/">Web Design</a> (128) </li> </ul> </div> </div> </aside> </div> </div> </div> </div> <footer id="colophon" class="site-footer suki-footer" role="contentinfo" itemscope itemtype="https://schema.org/WPFooter"> <div id="suki-footer-bottom-bar" class="suki-footer-bottom-bar site-info suki-footer-section suki-section suki-section-default"> <div class="suki-footer-bottom-bar-inner suki-section-inner"> <div class="suki-wrapper"> <div class="suki-footer-bottom-bar-row suki-footer-row suki-footer-row-with-center"> <div class="suki-footer-bottom-bar-left suki-footer-bottom-bar-column"> </div> <div class="suki-footer-bottom-bar-center suki-footer-bottom-bar-column"> <div class="suki-footer-copyright"> <div class="suki-footer-copyright-content">Copyright © 2021 <a href="https://cibersistemas.pt">Cibersistemas.pt</a> </div> </div> </div> <div class="suki-footer-bottom-bar-right suki-footer-bottom-bar-column"> </div> </div> </div> </div> </div> </footer> </div> </div> <iframe loading="lazy" src="about:blank" width="1" height="1" data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://amzn.to/3gAlLoO"></iframe><noscript><iframe src="https://amzn.to/3gAlLoO" width="1" height="1"></iframe></noscript><div class="wppopups-whole" style="display: none"></div><script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://cibersistemas.pt/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.7' id='regenerator-runtime-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://cibersistemas.pt/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://cibersistemas.pt/wp-includes/js/dist/hooks.min.js?ver=a7edae857aab69d69fa10d5aef23a5de' id='wp-hooks-js'></script> <script type='text/javascript' id='wppopups-js-extra'> /* <![CDATA[ */ var wppopups_vars = {"is_admin":"","ajax_url":"https:\/\/cibersistemas.pt\/wp-admin\/admin-ajax.php","pid":"3091","is_front_page":"","is_blog_page":"","is_category":"","site_url":"https:\/\/cibersistemas.pt","is_archive":"","is_search":"","is_singular":"1","is_preview":"","facebook":"","twitter":"","val_required":"This field is required.","val_url":"Please enter a valid URL.","val_email":"Please enter a valid email address.","val_number":"Please enter a valid number.","val_checklimit":"You have exceeded the number of allowed selections: {#}.","val_limit_characters":"{count} of {limit} max characters.","val_limit_words":"{count} of {limit} max words."}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://cibersistemas.pt/wp-content/cache/min/1/wp-content/plugins/wp-popups-lite/src/assets/js/wppopups.js?ver=1634642609' id='wppopups-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-browser-checker-js-after'> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script type='text/javascript' id='rocket-preload-links-js-extra'> /* <![CDATA[ */ var RocketPreloadLinksConfig = {"excludeUris":"\/(.+\/)?feed\/?.+\/?|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/02slkywcu7xi01f0\/|\/wp-admin\/|\/logout\/|\/02slkywcu7xi01f0\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"https:\/\/cibersistemas.pt","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-preload-links-js-after'> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://cibersistemas.pt/wp-includes/js/comment-reply.min.js?ver=5.8.1' id='comment-reply-js' defer></script> <script type='text/javascript' id='suki-js-extra'> /* <![CDATA[ */ var sukiConfig = {"breakpoints":{"mobile":500,"tablet":768,"desktop":1024}}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://cibersistemas.pt/wp-content/themes/suki/assets/js/main.min.js?ver=1.3.2' id='suki-js' defer></script> <script type='text/javascript' src='https://cibersistemas.pt/wp-includes/js/wp-embed.min.js?ver=5.8.1' id='wp-embed-js' defer></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://cibersistemas.pt/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> </body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1634829695 -->