4/16/2023 0 Comments Social media meta image scriptThem myself in a photo editing app to ensure I get a good crop. You can generate them automatically, though I prefer to crop To make it more concrete we will use the SvelteKit MDsveX blog template Let's look at an example of how we code it up. So we've gone through what we need to include. □ Open Graph SEO in SvelteKit: The Code # We will see how to include the meta next. Let me know if there's a popular app I have forgotten to You may get slightly different results if youĬhange the order you include the tags in. Telegram, Slack and Discord use the Twitter image. WhatsApp and Signal pick the square image. The second is a square, 400 px × 400 px image. For the first one, I use a 1200 px × 627 px image. I found what works well for me is to use a Facebook optimised image first and then a square oneĪfterwards. Probably to optimise for the apps most used by your audience. Taking this into account, the best strategy is Open Graph image to use for different apps. This is because there is a patchwork of policies on which (this is in addition to the Twitter one we looked at previously), however the order you include You can include multiple images in the meta The world of Open Graph images is not a simple one. article:modified_time: what you would expect it.This also copies the timestamp to the clipboard. I added the alias code below into my ~/.zshrc fileĪnd then just type the command timestamp whenever I need to You generate a date in the rightįormat from the terminal with the date command. I set this to the time the article was first published. article:published_time: use the ISO 8601 date and time format.This time you use the personal Facebook page of the author. article:author: similar to publisher above, but.article:publisher: if you have a companyįacebook page, set this to the URL of your Facebook company page.Though, here are some additional metadata you can use on article or blog post pages: We will take a look at how to integrate that meta into your SvelteKit site in a moment. It is safe to ignore the warning when testing with Facebook Sharing Debugger (explained in Pages, it is no longer best practise to include it fb:app_id: Although you might see this on other.og:description: You can set this to the page's.Section (we discussed this in the earlier SvelteKit SEO post). We can set this it to the page title used in the HTML head og:title: This is an SEO title and will.og:type: Use article here for blog posts and website for other website pages.I write my posts in British English so use en_GB. If you do need this tag, it should be in language_TERRITORY format. If you skip it, Facebook will assume content is written in American English ( en_US), so Americans can leave this one out. og:locale: This is the language the shared page.og_site_name: This is just the name of your.The Open Graph tags you would use on any page of your site are: As anĮxample you can drop the second tag below and Twitter would knows to use the first one: As mentioned in the previous SvelteKit SEO post, you can omit some of the Twitter tags if you include the equivalent Open Graph Tag. Protocol is loosely based on the Open Graph one. Twitter tags we looked at in the earlier post look similar to Open Graph ones. , it has become widely adopted and is used by other apps (as we saw with Signal above). Finally we will look at nailing OpenĪlthough Open Graph protocol was developed at Facebook Let's start by looking at some general Open Graph tags you can use on any page of your site.įollowing that we look at some more specific to blog posts. What we can achieve shall we take a look at how to do it? Nicely cropped square image because we include the right Open Graph meta. The Signal App uses our preferred titles and descriptions as well as the I added the Open Graph logo overlay in the image itself, just to make it easier to which This is a screenshot from the Signal messaging app, showing some shares of pages from our test Open Graph SEO in SvelteKit: Signal app Shares
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |