![]() ![]() ![]() When you visit the page in your browser, the rendering sequence looks something like this: A SPA loads itself into an HTML template that's the same for every page, because the page content is determined by the SPA. ![]() That's where life gets exciting if your website is a SPA. Open Graph is ubiquitous now, so if you want those previews for your website, you need to populate those tags. The crawlers bring the rich data back to their search engines and social media networks, which turn it into nice-looking previews. I don't just want title and description and keywords, I want authors! Photos! Videos! With Open Graph meta tags, websites can load all that information into a format that web crawlers can read and store without parsing the whole page. Get testing with #Ruby and #Selenium #testautomation #automatedtesting- WonderProxy August 30, 2021įacebook published Open Graph about a decade ago as a way to communicate website content summaries as a richer experience than regular meta tags allowed. That cute preview is made possible by the Open Graph Protocol. The image is key, that's what draws the eyeballs. You can drop any old link on Twitter or Facebook and it'll work fine, but what you REALLY want is a cute social sharing card, with a preview of the title and description and logo or image. So it's a SPA, top to bottom, and that means I needed a way to make it look pretty on Twitter.īut let's back up a minute: Why is this even a problem? Social media link sharing has evolved a bunch since the days of just-use-a-link-shortener-and-pray. Client-side work is not my jam (ironic, I know). I considered going halfsies when I was building it, only React-ifying the interactive bits and leaving the rest (like our privacy policy, or the About page) on the server side, but I started thinking about all the stylesheets and fonts and design I'd have to duplicate between the interactive bits and the static bits and recoiled in horror. Test Local.ly is a SPA built with ReactJS (and SlimPHP in the backend again). It's small right now, but we've got big plans for the future. You can make sure Brazilians are actually seeing Portuguese, confirm that your GDPR banner is showing up in France and not Chile, or just check out how different news outlets change their headlines depending on where you are. Test Local.ly leverages the WonderProxy network to take localized screenshots of websites. It's fast, and it's slick, and it's not public so we never had to care about how those pages might show up in search engines or on social media.Įnter Test Local.ly, a new service we just launched a few days ago. PHP still drives state and behavior with the SlimPHP framework, but everything our users touch is composed with JavaScript. A couple years ago we replaced our user account dashboard with a single-page app (SPA) built on ReactJS. That's not to say we've completely shunned the 21st-century shinies. Who needs Twig when you've got, amirite? Most of our public website is still classic PHP templating. We've stuck with it through the bad times, through the trials, and finally arrived in 2021 where PHP Is Pretty Great, Actually™. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |