Link Preview Customizations On Dynamic Websites
— A Basic Onpage SEO for Web Developers
Web developer and Search Engine Optimization (SEO) even though tightly-knitted don’t work in tandem most of the time. SEO is broad and developers could care less as there is the impression that such activities should be delegated to experts only. While not totally wrong, basic on-page SEO skills would be a great tool in a web developer’s arsenal and implementing as little as possible of it should be a routine in any decent web project. Shared links preview customization and optimization will be discussed in this article.
Why Link Preview Customization?
It is really basic and one of the few SEO activities specifically targeting HUMANS but not BOTS or search engines. It grabs site users attention with cool previews in search engines, social media, other web apps and improves Click-Through-Rate (CTR). Every developer especially freelancers want happy clients after all, more conversion by this simple concept would be appreciated by clients. The SEO activity occurs at the <head> section of a page.
Grand search engine optimization of whole site contents, most especially within the <body> sections should be holistically planned when starting a project. Things could get really dynamic and yet flow with the development process with little or no extra effort — this is an entire topic for another day.
It is really basic and one of the few SEO activities specifically targeting HUMANS but not BOTS or search engines.
We are going to make use of Laravel, a PHP framework to demonstrate how shared links preview can be coded in dynamic websites. I have used the concept explained in this article on a couple of projects, this example can be implemented in other platforms such as Node/Express apps etc.
It is assumed you are an intermediate developer who knows how to structure templates and corresponding partials in whatever language or framework of your choice. The concept is same and should be easily reproducible given this laravel page structure:
VIEWS TEMPLATE (blade is Laravel's template engine)
--------------------------------------------------------------
-resources/
|--views/
|--layouts/
|--app.blade.php
|--posts/
|--post.blade.php
|--partials/
|--_metas.blade.php
|--_assets.blade.php# The Templates
- app.blade.php
- _metas.blade.php
- post.blade.php
- _assets.blade.php (hold links to the css, js, fonts & other static assets and files. It is not a focus in this post and will not be discussed).
1 — app.blade.php
The base laravel layout page that yields its content into other sub-pages for extension as dynamic pages. You can structure your pages anyhow you want but they must be able to share contents as intended.
2 — _metas.blade.php
The core of the dynamic customization is done within this template.
3 — post.blade.php
Depending on the contents of your page variables listed at the meta sections of this template should be supplied as appropriate. This could be any page within your website and thus the contents will vary.
Your variables can be drawn from as many sources:
- Model Attributes — $post->meta_description. Retrieved from database.
- Model Methods — $post->metaDescription(). Programmatically created.
- Strings — ‘https://website.com/posts/demo-post/featured-image.jpg’
- From files (env and config files)
Your design pattern could influence how you craft the variables, the method below filters and mash up difference model properties to get a final output (using PHP trait). It could have been implemented differently eg with additional database fields on the post model and have the contents auto-generated and saved to database when creating a new post. There are many position implementations and yeah, many ways to skin this particular cat.
A Practical Example
Let’s use this particular article as a practical demo. We will not be drawing variables from database or model methods but directly with string input. If we have the values below as our variables for a page.
The page template will look like this:
The _metas.blade.php template renders a customized meta tags based on variables passed down from post.blade.php. The content of the post.blade.php directly above will be rendered as:
A review of the different parts of the meta template above
#1: General — Title and meta description are used in Search Engine Result Pages (SERPs) for the link preview displayed in Google, Bing, Yandex, Yahoo etc result pages.
#2: Microformat — can help enhance link preview in apps that are not using open graph protocol. Most apps and search engines use microformat and JSON+LD for page information extraction along with the title and description meta tags. While apps may use this for link preview generation, search engines use it more for page profiling and indexing.
#3: Twitter Card — solely used by Twitter for link preview styling. To prevent duplication of contents twitter uses og:protocol for styling link previews if some details are missing, preference is still for twitter card information.
#4: Open Graph Protocol — Originally created by Facebook but now used by many other organizations and apps to parse link previews.
Previewing Link Previews
You don’t want to go about testing some ugly and awkwardly styled links in your social media pages directly. While it will be much hassles checking from one app to the other, Metatags.io is an online tool that does this for you seamlessly. With it you can see what your page looks like in Google and across five social media pages viz Facebook, Twitter, Linkedin, Pinterest, Slack.
A preview of our demo in metatags.io will give the appealing view below.
Other individual preview tools are:
- Twitter card validator
- Facebook og:protocol preview tool
- Copy url link to your telegram or other apps, your link preview will come up nicely rather than flat and uninspiring link.
Medium.com implements link preview customization by default. If you have no image in your post chances are you will not get any image adorning your link preview whenever you share in social media and other apps. The process used by Medium to implement it would be close to what we illustrated in this article. You should try it sometimes soon. Most social media platforms implements it as well.
Used in Analytics?
With facebook you have this meta tag <meta property=”fb:app_id” content=”12345678901234” /> along with the others. This unique app id is used to generate analytics data formerly called Page Insights but can now be access from facebook analytics page. When signed it the analytics dashboard can be accessed from a link similar to below:
<meta property="fb:app_id" content="12345678901234" /> // meta taghttps://www.facebook.com/analytics/12345678901234/overview/
Twitter Card Analytics is no more functional and the resource page is no more available. Nevertheless, if you add the correct twitter:creator or twitter:site entry correctly you should have access to individual tweet analytics just like every other tweets.
As a site owner, what you supplied in the meta customizations are used differently by different social media companies and mobile apps to personalize user experience and generate some analytics data. Shared link previews will appear ugly on external platforms if not properly managed, with a nice featured image you cannot go wrong. Add basic link preview customization to your website, make it work for you and get improved CTR.
