How to add meta properties like image description and title to a deep link in Android

Question

I know this can be achieved using Firebase Deep Linking, but I find it a bit too complicated with a custom domain, so I go with the regular one. But, I could not find how do I add an image, title and subtitle for it? Also, the URL will be dynamic like this:

forms.mysitename.in/solve/randomFormId

Some random IT boy · Answer 1 · 2022-06-25T10:39:24.347

0

Because at the end of the day you're handling URI's you can pass them as query parameters. Note that you should base-64 encode the parameters before interpolating the string as it's otherwise unusable.

If you use Android's Uri class that's handled for you already and can write the following:

Uri
  .Builder()
  .scheme("https")
  .authority("forms.mysitename.in")
  .appendPath("solve")
  .appendPath("$randomFormId")
  .query("title=$title&description=$description&image=$imageUrl")
  .build()

Assuming your image parameter is a Url. If it's not a URL you can use the Base64 encoded version into the query parameter but that's not advisable

The following code:

private fun makeUri(): Uri = with(Uri.Builder()) {
    val randomFormId = UUID.randomUUID()
    val title = "og:meow:My title with spaces and emoji "
    val description = "A description :)"
    val imageUrl ="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    scheme("https")
    authority("forms.mysitename.in")
    appendPath("solve")
    appendPath("$randomFormId")
    appendQueryParameter("title", title)
    appendQueryParameter("description", description)
    appendQueryParameter("image", imageUrl)
    build()
}

Log.d("Test", "${makeUri()}")

Prints:

https://forms.mysitename.in/solve/a6d37c1f-ad7d-46f4-87ef-8e77a9159d6a?title=og%3Ameow%3AMy%20title%20with%20spaces%20and%20emoji%20%F0%9F%91%80&description=A%20description%20%3A)&image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F45201%2Fkitty-cat-kitten-pet-45201.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D1%26w%3D500

Which is a valid Uri.

You can also use this following function to create a new Uri from an old one:

private fun fromUri(
    uri: Uri,
    newTitle: String = uri.getQueryParameter("title") ?: "",
    newDescription: String = uri.getQueryParameter("description") ?: "",
    newImageUrl: String = uri.getQueryParameter("imageUrl") ?: "",
) = with(Uri.Builder()) {
    scheme(uri.scheme)
    authority(uri.authority)
    uri.pathSegments.forEach { pathSegment -> appendPath(pathSegment) }

    // Trick to not add it if it's empty
    newTitle.takeIf { it.isNotEmpty() }?.let { appendQueryParameter("title", it)}
    newDescription.takeIf { it.isNotEmpty() }?.let { appendQueryParameter("description", it)}
    newImageUrl.takeIf { it.isNotEmpty() }?.let { appendQueryParameter("imageUrl", it)}
    build()
}

edited Jun 25 '22 at 10:39

answered Jun 24 '22 at 20:29

Some random IT boy

7,569
2
21
47

Hmmmm. Seems interesting. But, can i build this for every random form id? Like if i make a form, i will store it in firestore and then the document id is that random id. So, will i be able to set the title according to the form title. Also, can i modify the details later? – Sambhav Khandelwal Jun 25 '22 at 03:33
And for testing, I added this code in my `Application` class, but it doesn't work. Also, the default one, which is only used to show the URL, does not appear. This is the code of my Application class: `Uri.Builder() .scheme("https") .authority("forms.abcd.in") .query("title=abcds&description=abcd") .build()` And also in that builder class, I found `appendQueryParameter`. What is that? I can pass values like `og:title`, but that doesn't work either! – Sambhav Khandelwal Jun 25 '22 at 10:04
You are right. If you use `query` it expects that the string is already encoded which is not. You need to use `appendQueryParameter`. Let me provide you with an updated code-snippet. You won't be able to modify the `Uri` once you call `build` but you can create once from the already created one. I'll provide a snippet for that too. Also your Firebase entities have nothing to do with the Uri's and URLs so you should be able to update those as well – Some random IT boy Jun 25 '22 at 10:32
Hmmm. I will try that out. Also, can the URL be shortened? – Sambhav Khandelwal Jun 25 '22 at 11:37
I just realized what your code might be doing and feel you got me wrong. What I meant is not adding those fields in the link. I wanted to show a preview of the link with a description, image and title just like seen on WhatsApp, etc. Or are you doing what I explained? – Sambhav Khandelwal Jun 25 '22 at 11:53
Url shortening requires a backend service that given a URL gives a unique (short) token that you can later use to get the original URL back by calling a certain endpoint of your backend. Also seems like you might have phrased your question wrong. What I've answered is what you actually answered: How to add the title, description and image to a deep link. How to get an app to crawl your links using meta-tags is a totally different question and not related to android nor deep links – Some random IT boy Jun 25 '22 at 12:32
[This article](https://css-tricks.com/essential-meta-tags-social-media/) will be helpful. Essentially your webserver needs to add the suitable meta tags when other sites crawl your link – Some random IT boy Jun 25 '22 at 12:32
Thanks for that. I have chnaged the title – Sambhav Khandelwal Jun 25 '22 at 13:45
BTW, @SomeRandomITBoy, I can also add these meta tags if I am creating my own site for this right? – Sambhav Khandelwal Jun 25 '22 at 15:24
Yes! It's as simple as including `` tags on your `` node of your HTML site! – Some random IT boy Jun 25 '22 at 21:15
Hmm. Thanks. But i will still wait for an answer if i get – Sambhav Khandelwal Jun 26 '22 at 03:12

How to add meta properties like image description and title to a deep link in Android

1 Answers1